当前位置：首页 > article >正文

【HTML】之form表单元素详解

article 2024/10/26 23:40:05

HTML表单是网页与用户交互的关键组成部分，它允许用户输入数据并将数据提交到服务器进行处理。本文将全面详细地介绍HTML表单的各个方面，从基础元素到高级用法，并提供丰富的代码示例和中文注释，帮助你彻底掌握表单的使用。

1. 表单的基本结构

表单由 <form> 元素定义，所有表单元素都必须放在 <form> 标签内。<form> 元素有两个关键属性：

action：指定表单数据提交的目标URL。例如 process_form.php 或 submit.aspx。如果没有指定，表单数据将提交到当前页面。
method：指定提交数据的方式，常用的有 GET 和 POST 两种：
- GET: 将表单数据附加在URL后面，以 ? 分隔，例如 form.php?name=john&age=30。GET请求对数据长度有限制，且数据暴露在URL中，安全性较低，适合用于简单的查询。
- POST: 将表单数据放在HTTP请求体中，不会显示在URL中，安全性更高，适合用于提交敏感数据或大文件上传。

<form action="process_form.php" method="POST">
  <!--  表单元素放在这里 -->
</form>

注释: 上面的代码创建了一个表单，当用户提交表单时，数据将通过 POST 方法发送到 process_form.php 文件进行处理。

2. 常用表单元素

2.1 <label> 标签

<label> 标签用于为表单元素定义标签（标题）。将 <label> 与表单元素关联起来，可以提高用户体验。点击 <label> 会自动将焦点移动到关联的表单元素上。关联方法有两种：

使用 for 属性：<label> 的 for 属性值应该与关联表单元素的 id 属性值相同。
将表单元素嵌套在 <label> 标签内:

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

<label>密码: <input type="password" name="password"></label>

2.2 输入框 <input>

<input> 元素是最常用的表单元素，它根据 type 属性的不同，呈现各种类型的输入控件。name 属性是必须的，用于标识表单数据字段的名称，服务器端可以通过 name 属性获取对应的值。

text: 单行文本输入框。
password: 密码输入框，输入的字符会被遮蔽。
email: 用于输入邮箱地址，浏览器会进行简单的邮箱格式验证。
number: 用于输入数字，可以设置 min、max 和 step 属性来限制输入范围和步长。
date: 用于选择日期。
time: 用于选择时间。
datetime-local: 用于选择日期和时间。
month: 用于选择月份和年份。
week: 用于选择周数和年份。
range: 用于选择一个范围内的值，通常以滑块的形式展现。需要配合 min、max 和 step 属性使用。
color: 用于选择颜色。
search: 用于输入搜索关键词，外观通常是一个带有搜索图标的文本框。
tel: 用于输入电话号码。
url: 用于输入网址，浏览器会进行简单的网址格式验证。
radio: 单选按钮，同一组单选按钮的 name 属性必须相同，这样用户只能选择其中一个选项。value 属性指定选中该选项时提交的值。
checkbox: 复选框，可以多选。value 属性指定选中该选项时提交的值。
file: 用于上传文件。
hidden: 隐藏字段，用于存储一些不需要用户输入的数据，例如用户ID。
submit: 提交按钮，用于提交表单数据。value 属性设置按钮上的文本。
image: 图像按钮，可以作为提交按钮使用。需要指定 src 属性来设置图像路径。
reset: 重置按钮，用于重置表单数据到初始值。value 属性设置按钮上的文本。
button: 普通按钮，需要通过 JavaScript 来定义其功能。

<label for="username">用户名:</label> <input type="text" id="username" name="username" placeholder="请输入用户名">
<label for="password">密码:</label> <input type="password" id="password" name="password">
<input type="submit" value="提交">

2.3 下拉列表 <select> 和 <option>

<select> 元素用于创建下拉列表，<option> 元素定义列表中的选项。multiple 属性可以让 <select> 支持多选。

<label for="city">城市:</label>
<select id="city" name="city">
  <option value="beijing">北京</option>
  <option value="shanghai" selected>上海</option> <!--- selected 属性设置默认选中项 -->
  <option value="guangzhou">广州</option>
</select>

2.4 文本域 <textarea>

<textarea> 元素用于多行文本输入。rows 和 cols 属性分别设置行数和列数。

<label for="message">留言:</label> <textarea id="message" name="message" rows="5" cols="30"></textarea>

2.5 <button> 元素

<button> 元素可以创建更灵活的按钮，它比 <input type="submit"> 更强大，因为可以在 <button> 标签内添加内容，例如图像和文本格式。

<button type="submit">提交</button>

2.6 <fieldset> 和 <legend>

<fieldset> 元素用于将相关的表单元素分组，<legend> 元素为 <fieldset> 定义标题。

<fieldset>
  <legend>个人信息</legend>
  <label for="name">姓名:</label> <input type="text" id="name" name="name"><br>
  <label for="email">邮箱:</label> <input type="email" id="email" name="email">
</fieldset>

3. 表单属性

除了 action 和 method 属性外，<form> 元素还有其他一些常用的属性：

enctype：指定表单数据的编码方式，常用的有 application/x-www-form-urlencoded (默认值) 和 multipart/form-data (用于文件上传)。
target：指定提交表单后在哪里显示结果，例如 _blank 在新窗口中打开。
novalidate：禁用客户端表单验证。
accept、autocomplete、autofocus、disabled、form、list、maxlength、minlength、multiple、name、pattern、placeholder、readonly、required、size、step、value 等，具体含义请参考上一版本内容。

4. 表单验证

HTML5 提供了丰富的表单验证功能，例如：

required 属性：指定字段为必填字段。
pattern 属性：使用正则表达式验证输入格式。
min 和 max 属性：设置数字输入的范围。
minlength 和 maxlength 属性：设置文本输入的长度限制。
此外，还可以使用 JavaScript 进行更复杂的表单验证。

5.案例

代码：

<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>HTML-表单</title>
</head>

<body>
     <div align="center"">
          <!-- value: 表单项提交的值 -->
     <form action="" method=" post">
          姓名: <input type="text" name="name"> <br><br>
          密码: <input type="password" name="password"> <br><br>
          性别: <input type="radio" name="gender" value="1"> 男
          <label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
          爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
          <label><input type="checkbox" name="hobby" value="game"> game </label>
          <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
          图像: <input type="file" name="image"> <br><br>
          生日: <input type="date" name="birthday"> <br><br>
          时间: <input type="time" name="time"> <br><br>
          日期时间: <input type="datetime-local" name="datetime"> <br><br>
          邮箱: <input type="email" name="email"> <br><br>
          年龄: <input type="number" name="age"> <br><br>
          学历: <select name="degree">
               <option value="">----------- 请选择 -----------</option>
               <option value="1">大专</option>
               <option value="2">本科</option>
               <option value="3">硕士</option>
               <option value="4">博士</option>
          </select> <br><br>
          描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br>
          <input type="hidden" name="id" value="1">

          <!-- 表单常见按钮 -->
          <input type="button" value="按钮">
          <input type="reset" value="重置">
          <input type="submit" value="提交">
          <br>
          </form>
     </div>

</body>

</html>

运行：