HTML原生表单组件的使用

原生表单组件主要包含：文本输入框、单行文本框、e-mail 输入框、密码输入框、搜索框、电话号码输入框、URL 输入框、多行文本框、下拉组件、可勾选组件、按钮。

一、文本输入框（input）：

HTML 文本框只是个纯文本输入控件。这就意味着你不能用它来进行富文本编辑（如加粗、斜体等）。所谓的富文本编辑器其实都是自定义的组件。

所有文本域的通用规范：

• 它们可以被标记为 readonly (用户不能修改输入值)甚至是 disabled (输入值永远不会与表单数据的其余部分一起发送)。
• 它们可以有一个 placeholder; 这是文本输入框中出现的文本，用来简略描述输入框的目的。
• 它们都受 size (输入框的物理尺寸) 和 length (文本框可以输入的最大字符数)约束。
• 如果浏览器支持的话，可以进行拼写检查。

1、单行文本框

单行文本框是用 type 属性值为 text 的<input>元素创建的（若未提供 type 属性值，text 为默认属性）。此外，如果你指定给 type 属性的值不被浏览器支持（比如 type="date"），也会使用 text 作为它的值。 

例：

<input type="text" id="text" name="text" value="I'm a text">

单行文本框只有一个真正的约束：如果你输入带有换行符的文本，浏览器会在发送数据之前删除这些换行符。

2、e-mail输入框

该类型的输入框设置 type 值为 email。

<input type="email" id="email" name="email" multiple>

 给输入框添加了验证约束：用户必须得输入一个有效的 e-mail 地址；其他任何输入都会导致输入框报错。通过设置 multiple 属性，也可以让用户输入多个 e-mail 地址(多个 e-mail 地址之间用逗号隔开)。

3、密码输入框

密码类型的输入框设置 type 值为 password。

<input type="password" id="pwd" name="pwd">

4、搜索框

该类型的输入框设置 type 值为 search。

<input type="search" id="search" name="search">

5、电话号码输入框

该类型的输入框设置 type 值为 tel。

<input type="tel" id="tel" name="tel">

6、url输入框

该类型的输入框设置 type 值为 url。

<input type="url" id="url" name="url">

注：注：它为字段添加了特殊的验证约束，如果输入值是个不符合格式的 url，浏览器就会报告错误。符合 url 格式并不意味着它引用了一个实际存在的位置。

7、多行文本框

使用 <textarea>元素。

<textarea cols="每行中的字符数" rows="显示的行数"></textarea>

注：textarea 和常规的单行文本字段之间的主要区别是，允许用户输入包含硬换行符(即按回车)的文本。可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。另外在大多数浏览器中，文本区域在右下角有一个拖放操作，允许用户调整它的大小。这种调整能力可以通过使用 CSS 设置文本区域的 resize 值为 none 来关闭。