HTML 表单和输入标签详解

HTML 表单是网页与用户交互的重要工具，它允许用户输入数据并将其提交到服务器。表单在网页中的应用非常广泛，比方登录、注册、搜索、评论等功能都离不开表单。本文将详细先容 HTML 表单及其相干标签的利用方法，帮助你全面把握表单的设计与实现。

---

表单的根本结构

HTML 表单利用 <form> 标签订义，表单中可以包含各种输入元素，比方文本框、密码框、单选按钮、复选框、下拉列表等。表单的根本结构如下：

1. <form action="/submit" method="post">
2.   <!-- 表单内容 -->
3. </form>

复制代码

• action：指定表单提交的目的地址（服务器端脚本的 URL）。
  
• method：指定表单提交的 HTTP 方法，常用的有 GET 和 POST。
  

---

表单常用标签

1. <form>：定义表单

<form> 标签用于创建表单，全部表单位素都需要放在 <form> 标签内。

1. <form action="/submit" method="post">
2.   <!-- 表单内容 -->
3. </form>

复制代码

2. <input>：定义输入域

<input> 是表单中最常用的标签，用于创建各种输入控件。通过 type 属性可以定义不同的输入类型。
常见的输入类型

• 文本输入：type="text"
  
• 密码输入：type="password"
  
• 单选按钮：type="radio"
  
• 复选框：type="checkbox"
  
• 提交按钮：type="submit"
  
• 重置按钮：type="reset"
  
• 文件上传：type="file"
  

1. <input type="text" name="username" placeholder="请输入用户名">
2. <input type="password" name="password" placeholder="请输入密码">
3. <input type="submit" value="提交">

复制代码

3. <textarea>：定义文本域

<textarea> 用于创建多行文本输入框，用户可以输入多行文本。

1. <textarea name="message" rows="5" cols="30">请输入内容...</textarea>

复制代码

• rows：定义文本域的行数。
  
• cols：定义文本域的列数。
  

4. <label>：定义输入标签

<label> 标签用于为表单位素添加标签，提升用户体验。通过 for 属性将标签与输入元素关联。

1. <label for="username">用户名：</label>
2. <input type="text" id="username" name="username">

复制代码

5. <fieldset> 和 <legend>：分组表单位素

<fieldset> 用于将一组相干的表单位素分组，并用边框包围。<legend> 用于定义分组的标题。

1. <fieldset>
2.   <legend>用户信息</legend>
3.   <label for="name">姓名：</label>
4.   <input type="text" id="name" name="name"><br><br>
5.   <label for="email">邮箱：</label>
6.   <input type="email" id="email" name="email">
7. </fieldset>

复制代码

6. <select> 和 <option>：定义下拉列表

<select> 用于创建下拉列表，<option> 用于定义列表中的选项。

1. <label for="country">选择国家：</label>
2. <select id="country" name="country">
3.   <option value="china">中国</option>
4.   <option value="usa">美国</option>
5.   <option value="japan">日本</option>
6. </select>

复制代码

利用 <optgroup> 分组选项

<optgroup> 用于将下拉列表中的选项分组。

1. <select>
2.   <optgroup label="亚洲">
3.     <option value="china">中国</option>
4.     <option value="japan">日本</option>
5.   </optgroup>
6.   <optgroup label="欧洲">
7.     <option value="france">法国</option>
8.     <option value="germany">德国</option>
9.   </optgroup>
10. </select>

复制代码

7. <button>：定义按钮

<button> 标签用于创建按钮，可以包含文本或图像。

1. <button type="submit">提交</button>
2. <button type="reset">重置</button>
3. <button type="button">普通按钮</button>

复制代码

8. <datalist>：定义输入选项列表

<datalist> 用于为输入框提供预定义的选项列表，用户可以从列表中选择或输入自定义内容。

1. <label for="browser">选择浏览器：</label>
2. <input list="browsers" id="browser" name="browser">
3. <datalist id="browsers">
4.   <option value="Chrome">
5.   <option value="Firefox">
6.   <option value="Safari">
7.   <option value="Edge">
8. </datalist>

复制代码

9. <keygen>：定义密钥对生成器字段

<keygen> 用于生成密钥对，通常用于表单的安全验证。不过，该标签在 HTML5 中已被废弃，不建议利用。

1. <keygen name="security">

复制代码

10. <output>：定义盘算结果

<output> 用于表现盘算结果，通常与 JavaScript 联合利用。

1. <form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2.   <input type="number" id="a" value="0"> +
3.   <input type="number" id="b" value="0"> =
4.   <output name="result" for="a b">0</output>
5. </form>

复制代码

---

表单的提交与验证

表单提交

表单提交时，浏览器会将用户输入的数据发送到服务器。可以通过 action 属性指定提交的目的地址，通过 method 属性指定提交方法（GET 或 POST）。

1. <form action="/submit" method="post">
2.   <label for="username">用户名：</label>
3.   <input type="text" id="username" name="username"><br><br>
4.   <label for="password">密码：</label>
5.   <input type="password" id="password" name="password"><br><br>
6.   <button type="submit">提交</button>
7. </form>

复制代码

表单验证

HTML5 提供了一些内置的表单验证功能，比方：

• 必填字段：利用 required 属性。
  
• 输入格式验证：利用 type 属性（如 email、number 等）。
  
• 最小/最大值：利用 min 和 max 属性。
  

1. <form>
2.   <label for="email">邮箱：</label>
3.   <input type="email" id="email" name="email" required><br><br>
4.   <label for="age">年龄：</label>
5.   <input type="number" id="age" name="age" min="1" max="100"><br><br>
6.   <button type="submit">提交</button>
7. </form>

复制代码

---

总结

HTML 表单是网页与用户交互的核心工具，把握表单及其相干标签的利用方法对于前端开辟至关重要。本文详细先容了 <form>、<input>、<textarea>、<label>、<fieldset>、<select> 等常用表单标签的利用方法，并通过示例代码帮助明白。无论是简单的登录表单还是复杂的数据提交表单，HTML 都为我们提供了强大的工具来实现。
假如你想了解更多关于 HTML 表单的知识，可以参考 菜鸟教程 上的详细教程。

---

相干链接：

• HTML 表单教程
  
• HTML 输入类型
  
• HTML5 新特性
  

标签： HTML, 表单, 输入标签, 前端开辟, 网页交互

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。