HTML表单知识点总结

一、使用表单标签

网站使用 HTML 表单可与用户进行交互，表单元素是允许用户在表单中输入内容，比如：文本框、文本域、单选框、复选框、下拉列表、按钮等等，表单可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

表单使用表单标签<form>来定义：

二、文本框

当用户要在表单中键入字母、数字等内容时，就会用到文本输入框，文本框也可以转化为密码输入框。输入域通过 <input> 标签完成，该标签规定了用户可以在其中输入数据的输入字段。输入字段可通过多种方式改变，取决于 type 属性。

三、表单里的属性

常见的 input 属性：

1、type 属性：

2、name 属性：

规定 input 元素的名称，对提交到服务器后的表单数据进行标识。 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

3、checked 属性： 规定此 input 元素首次加载时应当被选中，布尔属性，不需要值。 与 <input type="checkbox">或 <input type="radio"> 配合使用。

4、placeholder 属性

placeholder 属性的属性值会显示在表单控件中，为填写表单的人提供输入提示。一旦用户输入文本，占位文本即消失。

四、文本域

文本域是一个多行的文本输入控件，当用户需要在表单中输入大段文字时，需要用到文本输入域。文本域通过 <textarea> 标签完成。

<textarea cols="50" rows="10" id="txt">在这里输入内容...</textarea>

五、下拉列表框

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、也可以多选。下拉列表框通过 <select> 标签 和 <option> 标签完成。

<select id="like" name="cars"> <option value="奥迪">奥迪</option> </select>

六、Email 输入和 URL 输入

type 属性为 email 和 url 的 <input> 元素其实就是一个文本输入元素，只不过在一些浏览器上会显示一个方便输入 email 或 url 的定制键盘。

<input type="email" name="user_email">

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

七、search 搜索域

type 属性为 search 的 <input> 元素用于搜索域，比如站点搜索或 Google 搜索。 search 域显示为常规的文本域，在搜索框中输入内容时，文本后会自动出现一个小 ×，用于清除输入的内容。

<input type="search" placeholder="搜索">