2 HTML元素大全-表单( 三 ) _生活百科

文章插图
<datalist>数据集合<datalist>数据集合元素，包含了一组<option>元素，提供给文本类<input>（list属性）使用，作为可选值的数据集。

文本、数字输入的候选值，包括text、number、email、url、tel、search等。
range的刻度。

<datalist id="optfruit"><option value="https://www.huyubaike.com/biancheng/香蕉">香蕉</option><option value="https://www.huyubaike.com/biancheng/火龙果">火龙果</option><option value="https://www.huyubaike.com/biancheng/绿色蔬菜">冬瓜</option><option value="https://www.huyubaike.com/biancheng/男瓜"><option value="https://www.huyubaike.com/biancheng/其他"></datalist><input type="search" list="optfruit">

文章插图
03、<textarea>多行文本<textarea> 可以输入多行文本，支持换行、空格，行内元素。
属性描述值name表单提交数据的keyrows文本行数，同css样式的高度整数cols文本列数，同css样式的宽度整数

<textarea> 还可以使用 <input> 中的一些常见属性，如autocomplete、autofocus、disabled、placeholder、readonly ，和 required、maxlength等。可使用css样式属性resize设置输入框的大小调整方式。

<p><label for="txtsumary">个人简介：</label><textarea name="txtsumary" rows="3" cols="50" style="resize: vertical;" required>多行文本内容，支持空格、换行</textarea></p>

文章插图
04、<label>辅助表单聚焦<label>是一个文本标签，最主要的使命是辅助表单元素聚焦，点击<label>会让其for关联的元素得到焦点，for属性值所指的元素id就是她的服务客户。因此<label>是表单控件的最佳搭档，点击label=等于点击对应元素。<label>是一个双标签，里可以嵌套其他行内元素，如文字、图片、表单元素。
属性描述for关联的元素idform<form>的id ，可以将<label>放到form外面了，这就很自由了！

<p><label for="uname"><span>Name:</span><input id="uname" type="text" name="uname"><span title="required">*</span></label></p><div><label for="username">Name: <span title="required">*</span></label><input id="username" type="text" name="username"></div><label><input type="checkbox" />阅读并同意条款<img src="https://www.huyubaike.com/res/head-48.gif" width="24px"></label>

文章插图

还有一种简写的方式：用 label 元素把 input 元素包裹起来，以减少for- id 的使用。

05、<button>按钮<button> 是HTML5的新元素，行内元素，作用和input-button的功能基本相同。不同的是他是双标签，内部可以自由定义内容，也可以使用伪元素，实现更丰富的按钮效果，所以按钮用他就对了。
属性描述值type按钮的类型button：普通按钮；submit：表单提交按钮；reset：表单重置按钮；valuebutton 的初始值，参数的形式随表单提交

<button type="button">普通按钮</button><button type="submit">提交submit</button><button type="reset" style="width:80px;"><img src="https://www.huyubaike.com/res/sk (13).png"><br/>重置</button>