HTML基础：8个常见表单元素的详解

云桃桃前端

已于 2024-04-06 19:00:59 修改

阅读量3k

点赞数 18

分类专栏： HTML 基础入门文章标签： html 前端 javascript

于 2024-03-26 22:19:00 首次发布

本文链接：https://blog.csdn.net/u013179804/article/details/137059845

版权

HTML 基础入门专栏收录该内容

28 篇文章

订阅专栏

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端程序媛。

后台回复“前端工具”可免费获取开发工具，持续更新。

今天来说说 HTML 表单。它是用于收集用户输入信息的元素集合。例如文本框、单选按钮、复选框、下拉列表等。

用户经常填写的表单有：用户注册表单，登录表单，搜索表单，订阅表单，联系表单，调查问卷表单，评论表单等，这些基本都是通过表单实现的。比如，下图，淘宝登录，就是一个表单。

表单在网页开发中承担着收集用户数据、实现用户互动、提供个性化服务、保障数据安全等重要作用，是构建交互式和功能丰富的网页不可或缺的组成部分。

那我们一起来看看吧。

元素语法

1、<input>：用于接受用户输入的文本、密码、日期等。

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

<label> 元素为输入框提供了标签文本 "用户名："，通过 for 属性与相应的输入框关联，此标签通常和表单元素一同使用。
<input> 元素创建了一个文本框，用户可以在其中输入文本。type="text" 表示文本框类型为文本输入，id 属性用于关联 <label> 元素，name 属性指定了输入框的名称，required 属性表示该输入框为必填项。

而通过设置 type="password" 属性来指定输入类型为密码框，你输入的内容是不可见的，比如，如下代码。

<label for="password">密码：</label> <input type="password" id="password" name="password" required />

2、<textarea>：用于接受多行文本输入。

<label for="comments">评论：</label><br />
<textarea id="comments" name="comments" rows="4" cols="50"></textarea>

<label> 元素为文本域提供了标签文本 "评论："。
<textarea> 元素创建了一个文本域，用户可以在其中输入多行文本。rows 和 cols 属性指定了文本域的行数和列数。

3、<select>：用于创建下拉列表框。

<label for="country">国家：</label>
<select id="country" name="country">
  <option value="china">中国</option>
  <option value="usa">美国</option>
  <option value="uk">英国</option>
  <option value="japan">日本</option>
</select>

<label> 元素为下拉列表框提供了标签文本 "国家："。
<select> 元素创建了一个下拉列表框，用户可以从预定义的选项中选择一个。name 属性指定了下拉列表框的名称，选项通过 <option> 元素定义，value 属性指定了每个选项的值，显示的文本在 <option> 元素之间。

4、<button>：用于创建按钮。

<button type="button" onclick="alert('Hello!')">点击我</button>

<button> 元素创建了一个按钮，文本内容为 "点击我"。
type="button" 属性指定了按钮的类型为普通按钮，不会触发表单提交。
onclick 属性指定了按钮点击时执行的 JavaScript 代码，这里是弹出一个提示框显示 "Hello!"。

5、<checkbox>：用于创建复选框。

<input type="checkbox" id="coding" name="interests" value="coding" /> <label for="coding">编程</label>

<input> 元素创建了一个复选框，type="checkbox" 表示复选框类型，id 属性用于关联标签文本，name 属性指定了复选框的名称，value 属性指定了复选框选中时提交的值。
<label> 元素为复选框提供了标签文本 "编程"，通过 for 属性与相应的复选框关联。

6、<radio>：用于创建单选按钮。

<input type="radio" id="male" name="gender" value="male" />
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female" />
<label for="female">女</label>

<input> 元素创建了两个单选按钮，type="radio" 表示单选按钮类型，id 属性用于关联标签文本，name 属性指定了单选按钮所属的组，value 属性指定了单选按钮选中时提交的值。
<label> 元素为单选按钮提供了标签文本 "男" 和 "女"，通过 for 属性与相应的单选按钮关联。

综合应用

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单示例</title>
  </head>
  <body>
    <h2>用户调查问卷</h2>

    <form action="/xxx" method="post">
      <label for="username">用户名：</label>
      <input type="text" id="username" name="username" required /><br /><br />

      <label for="email">邮箱：</label>
      <input type="email" id="email" name="email" required /><br /><br />

      <label for="password">密码：</label>
      <input type="password" id="password" name="password" required /><br /><br />

      <label for="confirm_password">确认密码：</label>
      <input type="password" id="confirm_password" name="confirm_password" required /><br /><br />

      <label for="gender">性别：</label>
      <input type="radio" id="male" name="gender" value="male" />
      <label for="male">男</label>
      <input type="radio" id="female" name="gender" value="female" />
      <label for="female">女</label><br /><br />

      <label for="interests">兴趣：</label><br />
      <input type="checkbox" id="coding" name="interests" value="coding" />
      <label for="coding">编程</label><br />
      <input type="checkbox" id="reading" name="interests" value="reading" />
      <label for="reading">阅读</label><br />
      <input type="checkbox" id="music" name="interests" value="music" />
      <label for="music">音乐</label><br /><br />

      <label for="comments">评论：</label><br />
      <textarea id="comments" name="comments" rows="4" cols="50"></textarea><br /><br />

      <label for="country">国家：</label>
      <select id="country" name="country">
        <option value="china">中国</option>
        <option value="usa">美国</option>
        <option value="uk">英国</option>
        <option value="japan">日本</option>
      </select>
      <br />

      <input type="submit" value="提交" />
    </form>
  </body>
</html>

代码效果如图：