HTML表单

一、HTML <form> 标签

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框、复选框等等。

HTML 表单用于收集不同类型的用户输入。

1、HTML <form> 标签

<form> 标签用于创建供用户输入的 HTML 表单。

2、HTML 表单常用属性有：action、method、name

2.1HTML <form> action 属性

action 属性规定当提交表单时，向何处发送表单数据。

<form action="URL">

URL 可能的值：

• 绝对 URL - 指向另一个网站（比如 action="https://www.woaixuexi.cn/hello.html"）

• 相对 URL - 指向网站内的一个文件（比如 action="hello.html"）

2.2HTML <form> method 属性

method属性方法规定如何发送表单数据（表单数据会被发送到在 action 属性中规定的页面中）。

method 属性值有：get（默认）或 post。

<form method="get|post">

关于 get 和 post 的区别：

get：以查询字符串形式提交，在地址栏中能看到，长度有限制，不安全。

post：以表单数据组形式提交，在地址栏中看不到，长度无限制，安全。

提示：

• 当您使用 get 时，表单数据将在页面地址中显示。
• 如果表单正在更新数据或使用敏感信息（如密码），请使用 post。post 提供更好的安全性，因为提交的数据在页面地址中不可见。

2.3HTML <form> name 属性

name表单名称

页面中可能会存在很多表单，每个表单识别是通过表单名称去识别的

name="myform"

二、表单输入元素

多数情况下被用到的表单标签是输入标签<input>。

输入类型是由类型属性type定义的。

大多数经常被用到的输入类型有​文本框（text）​、​密码字段（password）​、​单选按钮（radio）​、​复选框（checkbox）​、​提交按钮（submit）​。

1、HTML 表单文本框

文本框通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本框。 

实例：

2、HTML 表单密码字段

密码字段通过标签 <input type="password"> 来定义。

实例：

提示：密码字段字符不会明文显示，而是以星号或圆点替代。

3、HTML 单选按钮

单选按钮<input type="radio"> 标签定义了表单单选框选项。

实例：

4、HTML 表单复选框

复选框<input type="checkbox"> 定义了表单复选框。用户需要从若干给定的选择中选取一个或若干个选项。

实例：

5、HTML 表单提交按钮

提交按钮<input type="submit"> 定义了提交按钮。

实例：

假如您在上面的文本框内键入几个字母，然后点击提交按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出您输入的结果。

 三、HTML特殊表单元素

1、HTML 下拉列表

<select> 标签定义了下拉选项列表。

<select> 元素中的 <option> 标签定义了列表中的可用选项。

实例：创建带有3个选项的下拉列表。

2、HTML 文本域

<textarea> 标签定义文本域（一个多行的输入控件）。

我们可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小。

cols 属性规定了文本区域内可见的宽度，rows 属性规定了文本区域内可见的高度（以行数计）。

实例：

四、HTML其他表单元素

1、HTML <label> 标签

<label> 标签定义了 <input> 元素的标签，一般为输入标题。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

实例：带有两个输入字段和相关标记的 HTML 表单。

注意：

• <label> 标签不会向用户呈现任何特殊效果，但当您选择该标签时，浏览器就会自动将焦点转移到和标签相关的表单控件上。

2、HTML <button> 标签

<button> 标签定义一个按钮。

在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。

<button> type 属性值有：

• submit：该按钮是提交按钮（除了 IE 浏览器，该值是其他浏览器的默认值）。
• button：该按钮是可点击的按钮（IE 浏览器的默认值）。
• reset：该按钮是重置按钮（清除表单数据）。

实例：创建一个按钮。

注意：

• 请始终为 <button> 元素规定 type 属性。
• 不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。

3、HTML <fieldset> 和 <legend> 标签

<fieldset> 标签定义了一组相关的表单元素，并使用外框包含起来。

<legend> 标签定义了 <fieldset> 元素的标题。

实例：组合表单中的相关元素。