HTML 表单 | 菜鸟教程

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。
以下实例创建了一个表单，包含两个输入框：
以下实例创建了一个表单，包含一个普通输入框和一个密码输入框：
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等。
我们可以使用 <form> 标签来创建表单:
多数情况下被用到的表单标签是输入标签 <input>。
文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。
密码字段通过标签 <input type="password"> 来定义:
注意：密码字段字符不会明文显示，而是以星号 * 或圆点 . 替代。
<input type="radio"> 标签定义了表单的单选框选项:
<input type="checkbox"> 定义了复选框。
<input type="submit"> 定义了提交按钮。
当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。
action 属性会对接收到的用户输入数据进行相关的处理:
假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 html_form_action.php 文件，该页面将显示出输入的结果。
以上实例中有一个 method 属性，它用于定义表单数据的提交方式，可以是以下值：
post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。
单选按钮(Radio buttons) 本例演示如何在 HTML 中创建单选按钮。
复选框(Checkboxes) 本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。
简单的下拉列表 本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
预选下拉列表 本例演示如何创建一个简单的带有预选值的下拉列表。
文本域(Textarea) 本例演示如何创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。
创建按钮 本例演示如何创建按钮。你可以对按钮上的文字进行自定义。
带边框的表单 本例演示如何在数据周围绘制一个带标题的框。
带有输入框和确认按钮的表单 本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。
带有复选框的表单 此表单包含两个复选框和一个确认按钮。
带有单选按钮的表单 此表单包含两个单选框和一个确认按钮。
从表单发送电子邮件 此例演示如何从表单发送电子邮件。
404***[email protected]
<input type="reset">定义重置按钮
<input type="reset" name="button" id="button" value="重置">
点击之后会将重置按钮所在的表单中填写的内容重新设置为默认值。
404***[email protected]
zha***[email protected]
表单中的单选按钮可以设置以下几个属性：value、name、checked
注意：同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“country”，这样同一组的单选按钮才可以起到单选的作用。
zha***[email protected]