HTML5-表单

表单(form)

作用: 用于收集用户信息, 让用户填写、选择相关信息格式: <form> 所有的表单内容，都要写在form标签里面</form> 注意事项: 所有的表单内容，都要写在form标签里面form标签中有两个比较重要的属性action和method, action表单提交的地址 method 表单提交的方式(post/get)

input标签

如果说td是表格最核心的标签, 那么input就是表单最核心的标签. input标签有一个type属性, 这个属性有很多类型的取值, 取值的不同就决定了input标签的功能和外观不同

明文输入框

作用: 用户可以在输入框内输入内容,并看到输入的值账号:<input type="text"/> 暗文输入框 作用: 用户可以在输入框内输入内容，以密码的形式密码:<input type="password"/> 给输入框设置默认值 账号:<input type="text" value="123"/>密码:<input type="password" value="123"/> 规定输入字段中的字符的最大长度 账号: <input type="text" name="fullname" maxlength="16" minlength='6'/>

单选框(radio) 作用: 用户只能从众多选项中选择其中一个单选按钮，天生是不互斥的，如果想互斥，必须要有相同的name属性 <input type="radio" name="xingbie" value='1' /> 男<input type="radio" name="xingbie" value='0' /> 女<input type="radio" name="xingbie" value='2' /> 妖

多选框(checkbox) 作用: 用户只能从众多选项中选择多个复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name） <input type="checkbox" name="aihao"/> 篮球<input type="checkbox" name="aihao"/> 足球<input type="checkbox" name="aihao"/> 棒球

给单选、多选设置默认值  指定radio和checkbox默认值, 前提是同一组内容必须设置相同name属性 <input type="radio" name="xingbie" checked="checked"/> 男 <input type="radio" name="xingbie" /> 女 <input type="radio" name="xingbie" /> 妖<input type="checkbox" name="aihao" checked="checked"/> 篮球<input type="checkbox" name="aihao" checked="checked"/> 足球<input type="checkbox" name="aihao"/> 棒球 label标签 作用: label标签不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性注意事项: 表单元素要有一个id，然后label标签就有一个for属性，for属性和id相同就表示绑定了所有表单元素都可以通过label绑定 <!--给文本框添加绑定--> <labelfor="account">账号:</label> <inputtype="text"id="account"/> <!--给单选框添加绑定--> <inputtype="radio"name="sex"id="man" value='0'/><labelfor="man">男</label> <!--给多选框添加绑定--> <inputtype="checkbox"id="basketball" name="hobby" value='1'/> <labelfor="basketball">篮球</label

按钮

作用: 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）<input type="button" value="点我丫" onclick='func()'/>

图片按钮

作用:定义图像形式的提交按钮<input type="image" src="lnj.jpg" />

重置按钮

作用: 定义重置按钮。重置按钮会清除表单中的所有数据<input type="reset" />注意事项: 这个按钮不需要写value自动就有“重置”文字reset只对form表单中表单项有效果

提交按钮

作用:定义提交按钮。提交按钮会把表单数据发送到action属性指定的页面 <input type="submit" />注意事项: 这个按钮不需要写value自动就有“提交”文字要想通过submit提交数据到服务器,被提交的表单项都必须设置name属性 默认明文传输(GET)不安全, 可以将method属性设置为POST改为非明文传输(学到Ajax再理解)

隐藏域

作用: 定义隐藏的输入字段<input type="hidden" name='ccc' value='kkkk'>暂时不用掌握, 在Ajax中对数据的CRUD操作有非常大的作用

取色器

<input type="color">HTML5中input类型增加了很多type类型, 例如color、date但是都不兼容, 后面讲到浏览器兼容时会重点讲解

日期选择器 <input type="date">HTML5中input类型增加了很多type类型, 例如color、date但是都不兼容, 后面讲到浏览器兼容时会重点讲解

数据列表

作用: 给输入框绑定待选项

格式:

datalist> <option>待选项内容</option></datalist>

如何给输入框绑定待选列表

搞一个输入框搞一个datalist列表给datalist列表标签添加一个id给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可 请输入你的车型:<inputtype="text"list="cars"> <datalistid="cars"> <option>奔驰</option> <option>宝马</option> <option>奥迪</option> <option>路虎</option> <option>宾利</option> </datalist> select标签 作用: 用于定义下拉列表 格式: <select> <optgroup label="分组名称"> <option>列表数据</option> </optgroup> </select> 注意点: 1.下拉列表不能输入内容, 但是可以直接在列表中选择内容 2.可以通过给option标签添加一个selected属性来指定列表的默认值 3.可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类

多行文本框(文本域)

作用: textarea标签用于在表单中定义多行的文本输入控件 cols属性表示columns“列”, 规定文本区内的可见宽度rows属性表示rows“行”, 规定文本区内的可见行数1.默认情况下输入框可以无限换行 2.默认情况下输入框有自己的宽度和高度 3.可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入 4.默认情况下输入框是可以手动拉伸的 听过设置属性resize:none 设置不可以拉伸

格式:

<textarea cols="30" rows="10">默认