IT评测·应用市场-qidao123.com技术社区

标题: HTML 表单和输入标签详解 [打印本页]
作者: 渣渣兔    时间: 2025-1-24 14:38
标题: HTML 表单和输入标签详解
HTML 表单是网页与用户交互的重要工具，它允许用户输入数据并将其提交到服务器。表单在网页中的应用非常广泛，比方登录、注册、搜索、评论等功能都离不开表单。本文将详细先容 HTML 表单及其相干标签的利用方法，帮助你全面把握表单的设计与实现。
表单的根本结构

HTML 表单利用 <form> 标签订义，表单中可以包含各种输入元素，比方文本框、密码框、单选按钮、复选框、下拉列表等。表单的根本结构如下：
  1. <form action="/submit" method="post">
  2.   <!-- 表单内容 -->
  3. </form>
复制代码

表单常用标签

1. <form>：定义表单

<form> 标签用于创建表单，全部表单位素都需要放在 <form> 标签内。
  1. <form action="/submit" method="post">
  2.   <!-- 表单内容 -->
  3. </form>
复制代码
2. <input>：定义输入域

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


  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>
复制代码


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 提供了一些内置的表单验证功能，比方：

  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, 表单, 输入标签, 前端开辟, 网页交互

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



欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/) Powered by Discuz! X3.4