文本区域
- 如果用户输入大段字符串,则应该使用
<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
域的模式