Html5 表单的学习

学习来源

文本区域

• 如果用户输入大段字符串，则应该使用<textarea>标签，因为<input type="text"/>只能接受单行文本。
• 其中<textarea>标签有3个属性，cols设置文本区域内可见字符宽度。
  rows设置文本区域内可见行数。
  wrap定义输入内容大于文本区域宽度时显示的方式。soft默认值，提交表单时，被提交的值不包含不含行。hard提交表单时，被提交的值包含不换行，使用hard时，必须设置cols属性。

单选按钮和复选框

• 使用<input type="radio>"可用定义单选按钮，多个name属性值相同的单选按钮可用合并为一组，称为单选按钮组，在单选按钮组，只能选择一个选项，不能多选或空选。
• 设计单选按钮组时，应该设置单选按钮组的默认值

选择框

• 使用<select>标签可用设计选择框，在标签中应该含一个或多个<option>标签
• 使用<optgroup>标签可用对选择项目进行分组，一个标签包含多个<option>标签，使用label属性设置分类标题。
• 选择框可用显示下拉菜单和列表框两种形式。
• 下拉菜单：在选择框中只能选一个项目
• 列表框：设置多选。

文件域和隐藏域

• 使用<input type="file">可以设计文件域，用来提交本地文件，使用multiple属性可以上传多个文件。
• 使用<input type="hidden">可以设计隐藏域，用来向服务域提交一些简单、固定的值，该值不会显示在页面上，常常用于提交客户端的标识值。

数据列表

• 使用datalist元素为输入框提供一个可选的列表，供用户输入匹配或者直接选。
• datalist元素需要与option元素配合使用，每一个option选项都必须设置value属性值。
• <datalist>标签用于定义列表框，<option>标签用于定义列表项。
• 如果需要把datalist提供的列表绑定到某个输入框上，需要使用输入框的list属性来引用datalist元素的id

输出结果

• output元素用于在浏览器中显示计算结果或脚本输出
• <output name="">Text</output>

设置属性

名称和值

• 每个表单空间都应该设置一个名称。
• 该属性有两个作用，一是服务器可以根据name获取对应控件提交的值，二是在Javascript脚本中可以直接使用点语法访问对应控件对象。
• 如果需要设置CSS样式，或者需要通过DOM访问表单对象，或者需要与<label>标签绑定，还应该为表单控件设置id属性。
• 如果表单控件需要向服务器传递值，必须设置value属性值。

必填

• required属性用于定义输入框填写的内容不能为空。

禁止验证

• novalidate属性规定在提交表单时不应该验证form或input域。适用<form>标签。

多选

• multiple属性可以设置输入域一次选择多个值。适用于email和file类型的<input>标签。

匹配模式

• pattern属性规定用于验证input域的模式

HTML5表单的学习代码