H5表单的应用

表单的概念：主要负责采集用户输入的信息，相当于一个控件的集合：由文本域、复选框、单选框、菜单、文件地址域、按钮等表单元素组成，最常见的表单应用有：搜索引擎页面、用户登录页面、用户注册页面

表单的一般结构如下：

<form action="url地址" method=“提交方式” name=“表单名称”>

　　各种表单的控件

</form>

H5新增表单属性：

autocomplete属性，共有两个值，on，off，用于指定表单是否有自动完成功能，所谓“自动完成”，是指将表单输入的内容记录下来，当再次输入的时候，会讲历史记录信息展现在一个下拉列表框里，实现自动完成输入

 <from autocomplete="on" > </form>

novalidate：用于指定表单在提交时，取消对表单进行的指定检查，这样使得from表单内的表单控件不被验证

H5的input标签：

type：属性

text　　　　　　　　  单行文本输入框

password　　　　　　密码输入框

radio　　　　　　　　单选按钮

checkbox　　　　　　复选框

button　　　　　　　　普通按钮

submit　　　　　　　　提交按钮

reset　　　　　　　　重置按钮

image　　　　　　　　图像形式的提交按钮

hidden　　　　　　　　隐藏域

file　　　　　　　　　　文件域

email　　　　　　　　　地址输入域

url　　　　　　　　　　URL地址输入域

number　　　　　　　　数值的输入域

range　　　　　　　　一定范围内数字值的输入域

Date　　　　　　　　　　事件日期的输入类型

search　　　　　　　　　　搜索域

color　　　　　　　　　　颜色的输入域

tel　　　　　　　　　　电话号码输入类型

name属性，由用户自己定义

value属性，用户自己定义

size属性，正整数

readonly：readonly，将控件的内容设置为只读

checked：checked 定义用户被默认选中的样式

maxlength：正整数  允许用户最多输入的字符数

autocomplete：on || off 是否自动完成表单内容

autofocus：autofocus 指定页面自动加载后是否自动获得焦点

multiply：multiply 指定输入框是否可以选择多个值

min、max、step：数值规定输入框中的最大最小值以及间隔

pattern：字符串  验证输入的内容是否与定义的正则表达式匹配

placeholder：字符串  input默认的提示

required：required 规定输入框填写的内容不为空

 

其他表单知识

<textarea></textares>  cols定义课件宽度，rows定义可见行数 其他属性类似于input

<label><label> 配合input使用，对元素值进行标记

自动绑定　　性别 <label for="male">男</label>

　　　　　　　　　　<input type="radio" name="sex" id="male">

　　　　　　　　<label for="female">女</abel>

　　　　　　　　　　<input type="radio" name="sex"  id="female">  

<select>标签定义下拉菜单

例如 <select>

　　　　<option value="1">选项一</option>

　　　　<option value="2">选项二</option>

　　　　<option value="3">选项三</option>

       </select>

select：常用属性

size：正整数 制定下拉菜单的可见选项数

multiple：multiple 指定下拉菜单具有多选的功能 按住Ctrl键 进行多选

option：的重用属性   seleced="selected"设置当前为默认选中

<datalist>标签 定义输入域的选项列表

示例　　<input id="url" list="urlList">

　　　　<datalist id="urlList">

　　　　　　<option value="www.baidu.com" >百度</option>

　　　　　　<option value="www.sina.com">新浪</option>

　　　　</datalist>