章
目
录
HTML表单是文档的一部分，包含诸如文本字段、密码字段、复选框、单选按钮、提交按钮、菜单等控件。
HTML表单允许用户输入数据，这些数据将被发送到服务器进行处理，例如姓名、电子邮件地址、密码、电话号码等。
为什么使用HTML表单
如果您想从网站访问者那里收集一些数据，就需要HTML表单。
例如：如果用户想在互联网上购买一些物品，他/她必须填写表单，如送货地址和信用卡/借记卡详细信息，以便物品可以送到指定地址。
HTML表单语法
<form action="server url" method="get|post">
//输入控件，例如文本字段、文本区域、单选按钮和按钮。
</form>
HTML表单标签
让我们看一下HTML表单标签的列表。
| 标签 | 描述 |
|---|---|
| <form> | 定义一个HTML表单，用于输入用户信息。 |
| <input> | 定义一个输入控件。 |
| <textarea> | 定义一个多行输入控件。 |
| <label> | 为输入元素定义标签。 |
| <fieldset> | 将相关元素分组在一个表单内。 |
| <legend> | 为 <fieldset> 元素定义标题。 |
| <select> | 定义一个下拉列表。 |
| <optgroup> | 定义下拉列表中相关选项的分组。 |
| <option> | 定义下拉列表中的选项。 |
| <button> | 定义一个可点击的按钮。 |
HTML 5表单标签
让我们看一下HTML 5表单标签的列表。
| 标签 | 描述 |
|---|---|
| <datalist> | 指定输入控件的预定义选项列表。 |
| <keygen> | 为表单定义密钥对生成器字段。 |
| <output> | 定义计算结果。 |
HTML <form>元素
HTML <form>元素提供了一个文档部分，用于从用户那里接收输入。它提供了各种交互控件，用于向Web服务器提交信息，如文本字段、文本区域、密码字段等。
注意：<form>元素本身不会创建表单，但它是包含所有所需表单元素的容器，如<input>、<label>等。
语法：
<form>
//Form elements
</form>
HTML <input>元素
HTML <input>元素是基本的表单元素。它用于创建表单字段，以接收用户输入。我们可以应用不同的输入字段来收集用户的不同信息。以下是显示简单文本输入的示例。
<body>
<form>
Enter your name <br>
<input type="text" name="username">
</form>
</body>
HTML文本字段控件
<input>标签的type=”text”属性创建文本字段控件，也称为单行文本字段控件。name属性是可选的，但对于服务器端组件（如JSP、ASP、PHP等），它是必需的。
<form>
First Name: <input type="text" name="firstname"/> <br/>
Last Name: <input type="text" name="lastname"/> <br/>
</form>
注意：如果省略’name’属性，文本字段输入将不会被提交到服务器。
HTML表单中的<textarea>标签
HTML中的<textarea>标签用于在表单中插入多行文本。<textarea>的大小可以通过”rows”或”cols”属性或通过CSS进行指定。
示例：
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form>
Enter your address:<br>
<textarea rows="2" cols="20"></textarea>
</form>
</body>
</html>
表单中<label>标签
在表单中使用<label>标签被认为是更好的做法，因为它使代码对解析器、浏览器和用户更友好。
如果单击<label>标签，它将聚焦在文本控件上。要实现这一点，您需要在<label>标签中使用一个与<input>标签的id属性相同的for属性。
注意：在表单中使用<label>标签是个好习惯，尽管它是可选的，但如果使用它，那么在轻触或单击<label>标签时将提供焦点。在触摸屏上特别有价值。
<form>
<label for="firstname">First Name: </label> <br/>
<input type="text" id="firstname" name="firstname"/> <br/>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname" name="lastname"/> <br/>
</form>
HTML密码password 字段控件
在password 密码字段控件中，用户无法看到密码，因为密码是隐藏的。
<form>
<label for="password">Password: </label>
<input type="password" id="password" name="password"/> <br/>
</form>
HTML 5电子邮件字段控件
HTML 5中新增的电子邮件字段控件会验证文本是否为正确的电子邮件地址。在此字段中，必须使用@和.。
<form>
<label for="email">Email: </label>
<input type="email" id="email" name="email"/> <br/>
</form>
注意：如果未输入正确的电子邮件地址，将显示错误消息，类似于：
单选按钮控件
单选按钮用于从多个选项中选择一个选项。它通常用于选择性别、测验问题等。
如果您为所有单选按钮使用相同的名称，那么一次只能选择一个单选按钮。
使用单选按钮来表示多个选项时，每次只能选择一个选项。
<form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender" value="male"/>Male
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
</form>
复选框控件
复选框控件用于从提供的复选框中选择多个选项。
<form>
Hobby:<br>
<input type="checkbox" id="cricket" name="cricket" value="cricket"/>
<label for="cricket">Cricket</label> <br>
<input type="checkbox" id="football" name="football" value="football"/>
<label for="football">Football</label> <br>
<input type="checkbox" id="hockey" name="hockey" value="hockey"/>
<label for="hockey">Hockey</label>
</form>
注意：复选框与单选按钮类似，不同之处在于复选框可以同时选择多个选项，而单选按钮一次只能选择一个选项。
提交按钮控件
HTML中的<input type=”submit>用于在网页上添加一个提交按钮。当用户单击提交按钮时，表单将提交到服务器。
语法：
<input type="submit" value="submit">
- type=”submit”指定它是一个提交按钮
- value属性可以是网页上按钮上写的任何内容
- name属性在这里可以省略。
示例：
<form>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</form>
HTML中的<fieldset>元素
HTML中的<fieldset>元素用于对表单的相关信息进行分组。这个元素通常与<legend>元素一起使用，<legend>元素为分组的元素提供标题。
示例：
<form>
<fieldset>
<legend>User Information:</legend>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</fieldset>
</form>
HTML表单示例
以下是一个简单的注册表单示例：
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<h2>Registration form</h2>
<form>
<fieldset>
<legend>User personal information</legend>
<label>Enter your full name</label><br>
<input type="text" name="name"><br>
<label>Enter your email</label><br>
<input type="email" name="email"><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br>
<label>confirm your password</label><br>
<input type="password" name="pass"><br>
<br><label>Enter your gender</label><br>
<input type="radio" id="gender" name="gender" value="male"/>Male <br>
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
<input type="radio" id="gender" name="gender" value="others"/>others <br/>
<br>Enter your Address:<br>
<textarea></textarea><br>
<input type="submit" value="sign-up">
</fieldset>
</form>
</body>
</html>
支持的浏览器
| Element | Chrome | IE | Firefox | Opera | Safari |
| <form> | Yes | Yes | Yes | Yes | Yes |
