HTML5表单基础概念

表单是什么？

表单就像一个网页上的调查问卷，可以让用户输入信息（如用户名、密码、选项等），然后将这些信息发送给网站服务器。

表单元素 <form>

表单容器，所有表单元素都应该放在这个标签内。

<form action=”/submit” method=”POST”>
  <!– 表单内容在这里 –>
</form>
  • action：表单提交的地址（后端处理程序的URL）
  • method：数据提交方式，常用GET（参数在URL中）和POST（参数在请求体中）

常用的HTML5表单元素

文本框 <input type=”text”>

用于输入单行文本，如用户名、搜索词等

密码框 <input type=”password”>

用于输入密码，输入内容显示为圆点/星号

电子邮件 <input type=”email”>

用于输入邮箱地址，会验证格式是否正确

数字输入 <input type=”number”>

只能输入数字，可以设置最小/最大值

日期选择器 <input type=”date”>

提供日期选择界面，不同浏览器显示不同

颜色选择器 <input type=”color”>

弹出颜色选择面板，让用户选择颜色

复选框 <input type=”checkbox”>

阅读协议
接收邮件

允许用户选择多个选项（多选）

单选按钮 <input type=”radio”>

男
女

同一组单选按钮只能选择一个（单选）

下拉菜单 <select>

创建下拉列表供用户选择

文本区域 <textarea>

用于输入多行文本，如评论、简介等

提交按钮 <input type=”submit”>

点击后提交整个表单数据

HTML5新增表单元素

数据列表 <datalist>

提供预定义选项列表，用户可在输入时选择

<input list=”browsers” placeholder=”选择浏览器”>
<datalist id=”browsers”>
  <option value=”Chrome”>
  <option value=”Firefox”>
  <option value=”Safari”>
</datalist>

进度条 <progress>

显示任务的完成进度

<progress value=”70″ max=”100″>70%</progress>

度量尺 <meter>

显示某个范围内的标量值（如磁盘使用量）

<meter value=”6″ min=”0″ max=”10″>6/10</meter>

输出元素 <output>

显示计算结果（通常与JavaScript配合）

<input type=”number” id=”num1″ value=”10″>
<input type=”number” id=”num2″ value=”20″>
<output name=”result” for=”num1 num2″>30</output>

表单常用属性详解

placeholder属性

在输入框为空时显示的提示文本

<input type=”text” placeholder=”请输入用户名”>

required属性

表示该输入框为必填项，提交时会验证

<input type=”email” required>

autofocus属性

页面加载时自动聚焦到该输入框

<input type=”text” autofocus>

disabled属性

禁用表单元素（显示为灰色，不可交互）

<input type=”text” value=”不可修改” disabled>

readonly属性

只读模式，用户不能修改但可以选中/复制内容

<input type=”text” value=”只读内容” readonly>

pattern属性

使用正则表达式验证输入格式是否正确

<input type=”text” pattern=”[A-Za-z]{3}” title=”三个英文字母”>

min/max/step属性

用于数字输入框（number/range）设置范围

<input type=”number” min=”0″ max=”100″ step=”10″>