初学HTML代码笔记终极篇3之表单列表

一、代码部分

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单</title>
</head><body><h1>一、表单元素之input </h1><form>请输入用户名：<input type="text" name="usename" value="请输入用户名" maxlength="6"> <br> 密码：<input type="password"><br> 性别：男 <input type="radio" name="sax"> 女 <input type="radio" name="sax"><br><input type="radio" id="nan" name="sax"><label for="nan">男(点文字也可以选)</label><input type="radio" id="女" name="sax"><label for="女">女(点文字也可以选)</label> <br> 爱好：吃饭<input type="checkbox" name="hobby" value="吃饭"> 睡觉<input type="checkbox" name="hobby" value="睡觉"><br><input type="checkbox" name="默认选项" value="打勾" checked="checked"> 两周内自动登录<br><input type="submit" value="免费注册"><br><!-- value修改这里了按钮的名字 --><input type="reset" value="重新填写"><input type="button" value="获得验证码"><br> 上传头像：<input type="file"><br></form><form><h1>二、表单元素之select </h1>籍贯：<select><option selected="selected">广东</option><option>北京</option><option>上海</option></select> <br> 对该网站的反馈：<textarea>我要吐槽：</textarea></form>
</body></html>

二、笔记部分

一、无序列表ul
<ul> 注：ul里面只能放li标签，其他什么鬼都不行，包括文字
<li>列表项1</li> but li标签里什么都能放 like容器
<li>列表项1</li>
</ul>
无序列表的属性用css设置
二、自定义列表dl
<dl>
<dt>联系我</dt>
<dd>微信</dd>
<dd>QQ</dd>
</dl>
dl是表格框架
dt是表头
dd是dt的弟弟

表单
1.表单应用场景
用于收集用户信息
2.组成：表单域（大框框）、表单元素、提示信息
一、表单域<form>
<form>会把它范围的表单元素提交给服务器
属性：action :指定接受并处理表单数据的服务器程序的url地址
method:指定提交方式 get/post
name:名字

二、表单元素
① <input/>标签用于输入
属性：type属性用于指定不同的控件类型
常见的控件类型：
text:文本框
password:密码框
单选按钮（圆点）：radio（注意必须使被选选项的属性上添加相同的name）
checkbox(方框勾)：可多选
2.name属性和value属性
相同点：用于提供给后台人员使用
（1）name （不写就不能单选）
定义input的名字如
性别：男 <input type="radio" name="sax">
女 <input type="radio" name="sax">
后台显示 sax="男" 表示用户选择了男这个按钮
（id 是给css设置属性的注意区分）
（2）value
规定input的值用户修改值就是修改value，值传递
3.checked属性（单选按钮和复选框）
默认选这个项
4.submit 属性
提交按钮会提交给服务器
5.reset 属性
重置按钮
6.button属性
普通按钮后期搭配js使用
7.file属性
上传文件用的

②<label>标签用绑定一个表单元素，当点击<label>文本</label> 时，
光标就会转到对应的表单元素上，增加用户体验。
<input type="radio" id="nan"><label for="nan"> 男(点文字也可以选) </label>
<input type="radio" id="女"><label for="女"> 女(点文字也可以选) </label>
注意：要使id 和for的内容一样才能成功绑定

③<select>标签（也是要放到form里面的）
下拉列表
在option里写selected=“selected ”表示该项为默认选项
④<textarea>文本域标签
用于多行文本的输入

三、操作实例(相亲网注册)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相亲网注册页面</title>
</head><body><h5>青春不常在，抓紧谈恋爱</h5><table width="400"><!-- 第一行 --><tr><td>性别</td><td><input type="radio" name="sax" id="nan"><label for="nan">男</label> &nbsp <input type="radio" name="sax" id="nv"> <label for="nv">女</label></td></tr><!-- 第二行 --><tr><td>生日</td><td><form><select><option selected="selected">请选择年份</option><option>2003年</option><option>2002年</option><option>2001年</option><option>1999年</option><option>1998年</option></select><select><option selected="selected">请选择月份</option><option>1月</option><option>2月</option><option>3月</option><option>4月</option><option>5月</option><option>6月</option><option>7月</option><option>8月</option><option>9月</option><option>10月</option><option>11月</option><option>12月</option></select> <select><option selected="selected">请选择日</option><option>1日</option><option>2日</option><option>3日</option><option>4日</option><option>5日</option><option>6日</option></select></form></td></tr><!-- 第三行 --><tr><td>所在地区</td><td><form><input type="text"></form></td></tr><!-- 第四行 --><tr><td>婚姻状况</td><td><form><input type="radio" name="hunying" id="hun" checked="checked"><label for="hun">未婚</label><input type="radio" name="hunying" id="yihun"><label for="yihun">已婚</label><input type="radio" name="hunying" id="sang"><label for="sang">丧偶</label></form></td></tr><!-- 第五行 --><tr><td>学历</td><td><form><input type="text" value="幼儿园"></form></td></tr><!-- 第六行 --><tr><td>喜欢的类型</td><td><form><input type="checkbox">清纯的 <input type="checkbox">性感的 <input type="checkbox">可爱的 <input type="checkbox">小鲜肉</form></td></tr><!-- 第七行 --><tr><td>自我介绍</td><td><textarea></textarea></td></tr><!-- 第八行 --><tr><td></td><td><input type="submit" value="免费注册"></td></tr><tr><td></td><td><input type="checkbox" checked="checked">我同意注册条款和会员加入标准</td></tr><tr><td></td><td><a href="#">我是会员,立即登录</a></td></tr><tr><td></td><td><h3>我承诺</h3><ul><li>年满18,单身</li><li>抱着严谨的态度</li><li>真诚寻找另一半</li></td></tr></table>
</body></html>

三篇笔记基本上包括了pink老师讲解基础HTML的全部内容,完结撒花...本人也即将开始CSS的学习,开心哇哇哇!!!

小白在路上,一起前进吧,希望得到您的指正.感谢

初学HTML代码笔记终极篇3之表单列表相关推荐

什么标签用于在表单中构建复选框_UI/UX笔记之如何设计好表单
原文链接: UI/UX笔记之如何设计好表单 | 须臾所学免费设计资源网presentationvip.com 无论是注册流程,多视图步骤程序还是单调的数据输入界面,表单都是数字产品设计中最重要的组成 ...
table中加表单元素每行怎么验证_Validform 一行代码搞定整站的表单验证 - 文章
Validform 一行代码搞定整站的表单验证,为什么能如此方便?插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素,让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符 ...
初学HTML代码笔记3终结篇之列表和表单(pink老师)
一.代码部分 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
MVC教程第四篇：传递表单数据
MVC教程第四篇:传递表单数据摘要本文将完成我们"MVC公告发布系统"的公告发布功能,以此展示在ASP.NET MVC中如何传递处理表单的数据. 前言通过前几篇文章, ...
SpringBoot非官方教程 | 第二十篇：处理表单提交
转载请标明出处: http://blog.csdn.net/forezp/article/details/71023868 本文出自方志朋的博客这篇文件主要介绍通过springboot 去创建和提交 ...
jQuery整理笔记七----几个经典表单应用
1.文本框获得(失去)焦点当文本框获得输入焦点时,将该文本框高亮显示,算不得一个应用,仅仅是一个小技巧,能够提高用户体验. <!DOCTYPE html PUBLIC "-//W3C ...
jQuery整理笔记七----几个经典表单应用 .
登录 | 注册收藏成功确定收藏失败,请重新收藏确定标题标题不能为空网址标签摘要公开取消收藏全部设为已读查看所有通知暂没有新通知返回通知列表下一条上一条分享资讯传PPT ...
第三十篇，Django表单与模型
什么是表单: 表单是搜集用户数据信息的各种表单元素的集合,作用是实现网页上的数据交互,用户在网站输入信息,然后提交到网站服务器端进行处理(如数据录入和用户登录.注册等). 用户表单是web开发的一项基 ...
html笔记2（表格、表单以及注册页面）
html笔记 1.表格标签(table) 表格属性表格结构标签合并单元格表格总结 2.列表标签无序列表(ul) 有序列表(ol) 自定义列表(dl) 3.表单(form标签以下三个标签也可以 ...

初学HTML代码笔记终极篇3之表单列表

初学HTML代码笔记终极篇3之表单列表相关推荐

最新文章

热门文章

初学HTML代码笔记终极篇3之表单 列表

初学HTML代码笔记终极篇3之表单 列表相关推荐

最新文章

热门文章

初学HTML代码笔记终极篇3之表单列表

初学HTML代码笔记终极篇3之表单列表相关推荐