【HTML】之form表单元素详解

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中,安全性更高,适合用于提交敏感数据或大文件上传。

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

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

2. 常用表单元素

2.1 <label> 标签

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

  1. 使用 for 属性:<label> 的 for 属性值应该与关联表单元素的 id 属性值相同。

  2. 将表单元素嵌套在 <label> 标签内:

html 复制代码
<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 来定义其功能。

html 复制代码
<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> 支持多选。

html 复制代码
<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 属性分别设置行数和列数。

html 复制代码
<label for="message">留言:</label> <textarea id="message" name="message" rows="5" cols="30"></textarea>
2.5 <button> 元素

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

html 复制代码
<button type="submit">提交</button>
2.6 <fieldset> 和 <legend>

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

html 复制代码
<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.案例

代码:

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

运行:

6. 总结

本文详细介绍了 HTML 表单的各个方面,包括基本结构、常用元素、表单属性和表单验证。通过学习本文,你应该能够熟练地创建和使用 HTML 表单,并实现各种用户交互功能。

学习网站推荐:面向开发者的 Web 技术 | MDN

相关推荐
丰锋ff7 分钟前
考研英一学习笔记
笔记·学习·考研
小墨宝8 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
hnlucky22 分钟前
redis 数据类型新手练习系列——Hash类型
数据库·redis·学习·哈希算法
HED23 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿27 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子28 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
Invinciblenuonuo31 分钟前
FreeRTOS学习笔记【10】-----任务上下文切换
笔记·学习
好奇龙猫32 分钟前
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(11): てあります。
学习
志存高远6640 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui