HTML表单

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>