HTML5：表单

表单简介

表单标签对‘<form>’是一个“块级元素”。表单标签的内容通常是“表单元素”+“提交按钮”的形式。它虽然和‘<div>’标签一样属于“块级元素”，但它却有自己的实际用处，也就是若不将“表单元素”放置于表单标签‘<form>’中，那某些表单元素将会失效，如：“提交”按钮和“重置”按钮。

表单属性

• name：规定表单的名称

• action：规定当提交表单时向何处发送表单数据，它的属性值应该是一个“URL”

• method：规定用于发送 form-data 的 HTTP 方法，值为：get/post

• target：规定在何处打开“action”中设定的URL。有以下值（_blank、_self、_parent、_top、frame的name）

• enctype：规定在发送到服务器之前应该如何对表单数据进行编码，有以下值：

  • application/x-www-form-urlencoded（默认，在发送前编码所有字符）；
  • multipart/form-data（不对字符编码，在使用包含文件上传控件的表单时，必须使用该值；
  • text/plain（空格转换为 “+” 加号，但不对特殊字符编码）；

• autocomplete：规定是否启用表单的自动完成功能，有以下值：on/off

• novalidate：如果使用该属性，则提交表单时不进行html5自带的验证。

‘label’标签

表单中用于显示表单字段的标签，可以让用户知道该行表单元素的作用，它属于“行级元素”。和‘<span>’标签不一样，它配合后面学习的其它表单元素可以实现一些作用上的关联。所以，标准的表单编写都需要在表单元素前加上一对‘<label>’标签，内容需写上标签后表单元素的作用。

<form>
    <label>账号：</label><br>
    <label>密码：</label><br>
</form>

呈现效果如下：

账号：
密码：

‘textarea’标签

‘<textarea>’标签是一个可以输入多行文本的标签对，它同样是一个“行内块级标签”。

textarea 标签常用属性

• cols：设置行数

• rows：设置列数

• placeholder：设置占位符

代码示例

<form>
    <textarea rows="5" cols="30" placeholder="请输入您的个性签名"></textarea>
</form>

呈现效果：

‘select’标签

通过‘<select>’标签可以创建单选和多选的下拉菜单。可以通过“size”属性设置该标签在一个选项菜单中可见的选项个数，当它的值设为“1”时，将显示为默认的‘<select>’下拉菜单的样式，‘<option>’是它必须的子菜单，否则将不能提供任何可选项，而‘<option>’标签通常需要具有一个“value”属性，以便于在做数据操作时能准确地通过该属性值取到对应标签的内容。

‘select’标签常用属性

• autofocus： 规定在页面加载后文本区域自动获得焦点。

• disabled：规定禁用该下拉列表。

• multiple：规定可以选择多个选项。

• name：规定下拉列表的名称。

• required：规定文本域是必填的。

代码示例

<form>
    <label>请选择您喜欢的城市：</label>
    <select required="required" multiple="multiple">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">杭州</option>
        <option value="4">成都</option>
    </select>
</form>

‘selected’属性

如果想要默认选中某一项，则为‘option’标签添加‘selected’属性即可。

‘select’分组

分组下拉菜单，将‘optgroup’标签嵌套在‘select’标签中，并为其指定‘label’属性设置组标题，再将‘option’标签嵌套在‘optgroup’标签中即可，如下所示：

<form>
    <label>中午吃什么呢：</label>
    <select>
        <optgroup label="西餐">
            <option value="1">牛排</option>
            <option value="2">披萨</option>
        </optgroup>
        <optgroup label="中餐">
            <option value="3">麻婆豆腐</option>
            <option value="4">青椒肉丝</option>
            <option value="5">蚂蚁上树</option>
        </optgroup>
        <optgroup label="快餐">
            <option value="6">阿米巴巴</option>
            <option value="7">大米先生</option>
            <option value="8">顺旺基</option>
        </optgroup>
    </select>
</form>

提示：size 属性可以指定显示的列表个数，当显示个数小于实际菜单项时以滚动显示呈现；

‘dataList’标签

‘<datalist>’需要配合一个属性为“list”的‘<input>’标签使用，通过将list的属性值设置为‘<datalist>’标签的“ID”属性的值来实现关联，实现出一个既可输入，又可选择的下拉菜单。当然，IE浏览器不支持该元素。

代码示例：

<form>
    <input type="text" list="citys" placeholder="请输入或选择您喜欢的城市" size="30">
    <datalist id="citys">
        <option value="北京"></option>
        <option value="上海"></option>
        <option value="成都"></option>
        <option value="杭州"></option>
        <option value="三亚"></option>
    </datalist>
</form>

‘button’标签

‘button’标签对和其它表单元素一样，同是属于“行内块元素”。

‘button’标签常用属性

• type：指定按钮类型，其值包括：button（普通按钮）/submit（提交按钮）/reset（重置按钮）

代码示例

<form>
    <button type="button">普通按钮</button>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
</form>

效果呈现

‘output’ 标签

• ‘for’ 属性关联‘input’的‘id’属性值，如果有多个则以空格隔开；

• 为‘form’标签添加‘oninput’属性，根据公式拼接出输出内容；

• 如果需要转换为数字，则使用‘parseInt()’进行转换；

代码示例：

<form oninput="result.value = parseInt(rangeVal.value)">
    <label>0</label>
    <input type="range" min="0" max="10" step="2" id="rangeVal">
    <label>10</label>
    <br>
    <label>您选择的值是：</label>
    <output name="result" for="rangeVal"></output>
</form>

‘input’标签

‘input’标签是一个没有内容的标签，按照布局类型它属于“行内块级元素”，它是通过设置属性及属性值来决定它的显示类型的

‘input’标签常用属性

• type：指定input类型

• autocomplete：设置是否自动完成，其值为：on/off

• autofocus：规定输入字段在页面加载时是否获得焦点，不适用于type= ‘hidden’

• checked：默认选择，对type值为‘checkbox’及‘radio’有效

• disabled：禁用

• size：设置输入字段的宽度

• maxlength：设置输入字段的最大长度

• width：设置宽度，（适用于 type=‘image’）

• height：设置高度，（适用于 type=‘image’）

• step：设置输入字段合法数字间隔

• required：表示输入字段为必需

• readonly：表示只读

• placeholder：设置输入框的占位符

• pattern：规定输入字段的值的模式或格式。例如 pattern=‘[0-9]’表示输入值必须是 0 与 9 之间的数字。

• multiple：如果使用该属性，则允许一个以上的值，适用于‘select’及‘datalist’

• min：设置输入字段的最小值

• max：这是输入字段的最大值

• list：引用包含输入字段的预定义选项的 datalist 。

• value：设置input的值

‘type’属性值

• text：普通输入框

• password：密码输入框

• radio：单选宽

• checkbox：多选框

• file：文件

• button：普通按钮

• submit：提交按钮

• reset：重置按钮

• image：图片按钮

• hidden：隐藏域

• email：邮箱输入框

• url：资源地址

• search：搜索框

• number：数值输入控件

• tel：电话号码

• range：数值选择范围控件

• date：日期选择控件

• month：月份选择控件

• week：周选择控件

• time：时间选择控件

• datetime：日期时间选择控件

• datetime-local：本地日期时间选择控件

• color：颜色选择控件

对表单元素编组

对于一些复杂的表单，有时需要将一些元素组织在一起，为此可以使用‘fieldset’元素。在每一个‘fieldset’元素中添加一个‘legend’元素即可添加表单相关说明，‘legend’元素必须是fieldset元素的第一个子元素，用法类似于‘details’元素与‘summary’元素的关系。

代码示例：

<form>
    <fieldset>
        <legend>Enter Your Info</legend>
        <label>账号：</label><input type="text" name=""><br><br>
        <label>密码：</label><input type="passowrd" name=""><br><br>
    </fieldset>
    <fieldset>
        <legend>Enter Your Hobby</legend>
        <label>#1：</label><label>账号：</label><input type="text" name=""><br><br>
        <label>#2：</label><label>账号：</label><input type="text" name=""><br><br>
        <label>#3：</label><label>账号：</label><input type="text" name=""><br><br>
    </fieldset>
</form>

显示效果：