表单 input 常用参数

1.类型参数

基础类型

类型	语法	作用	特点
text	`<input type="text">`	普通文本输入	明文显示，适配用户名、昵称等
password	`<input type="password">`	密码输入	输入内容隐藏（圆点 / 星号）
number	`<input type="number">`	数字输入	仅允许输入数字，移动端弹出数字键盘
email	`<input type="email">`	邮箱输入	自带邮箱格式校验（需结合表单提交）
tel	`<input type="tel">`	电话号码	移动端弹出数字键盘，适配手机号 / 座机
search	`<input type="search">`	搜索框	外观接近 text，部分浏览器会显示 “清除按钮”

 <!--基础类型展示-->       
 <input type="text" >
 <input type="password">
 <input type="number">
 <input type="email">
 <input type="tel">
 <input type="search">

选择类（无需手动输入，点选即可）

这类用于从固定选项中选择，替代手动输入，减少错误。

类型	语法	作用	特点
radio	`<input type="radio" name="gender" value="male">`	单选按钮	同 name 的 radio 互斥（只能选一个）
checkbox	`<input type="checkbox" name="hobby" value="read">`	复选框	同 name 的 checkbox 可多选
range	`<input type="range" min="0" max="100">`	滑块选择	可视化选择数值（如音量、评分）

<form>
  <!-- 单选：性别（同name互斥） -->
  <div>
    性别：
    <input type="radio" name="gender" id="male" value="male">
    <label for="male">男</label>
    <input type="radio" name="gender" id="female" value="female">
    <label for="female">女</label>
  </div>

  <!-- 复选：爱好（可多选） -->
  <div>
    爱好：
    <input type="checkbox" name="hobby" id="read" value="read">
    <label for="read">阅读</label>
    <input type="checkbox" name="hobby" id="sport" value="sport">
    <label for="sport">运动</label>
  </div>

  <!-- 滑块：评分 -->
  <div>
    评分：<input type="range" min="0" max="10" name="score">
  </div>
</form>

日期 / 时间类（适配时间选择场景）

这类专门用于选择日期、时间，浏览器会提供原生的日期选择器（无需自己写弹窗）。

类型	语法	作用
date	`<input type="date">`	选择年月日
time	`<input type="time">`	选择时分
datetime-local	`<input type="datetime-local">`	选择年月日 + 时分

功能按钮类（触发表单操作）

这类不是输入框，而是表单的操作按钮，需和<form>配合使用。

类型	语法	作用
submit	`<input type="submit" value="提交">`	提交表单数据到后台
reset	`<input type="reset" value="重置">`	清空表单所有输入内容
button	`<input type="button" value="普通按钮">`	无默认行为，需配合 JS 实现自定义功能

<form>
  <!-- 输入项 -->
  <div>用户名：<input type="text" name="username"></div>
  <!-- 操作按钮 -->
  <input type="submit" value="提交">
  <input type="reset" value="清空">
  <input type="button" value="自定义按钮" onclick="alert('点击了按钮')">
</form>

补充：多行文本框

<!-- 基础多行文本框结构 -->
<textarea 
  id="textarea-id"    <!-- 唯一标识，和label联动 -->
  name="textarea-name"<!-- 后台接收数据的标识 -->
  rows=""            <!-- 可视行数（控制高度） -->
  cols=""           <!-- 可视列数（控制宽度） -->
  placeholder="提示文字..." <!-- 输入前的提示 -->
  required            <!-- 必填项（可选参数） -->
  >
  <!-- 这里可以写默认文字（可选），用户输入会覆盖 -->
</textarea>
<!--示例-->
<div>
  <label for="study-destination">学习动机(至少50字)：</label><br>
  <textarea 
    id="study-destination" 
    name="study-destination" 
    rows="3" 
    cols="28" 
    minlength="50" 
    maxlength="500">
  </textarea>
</div>

2.长度 / 范围参数

maxlength / minlength

限制最多 / 少能输入多少个字符
只能用于：用户名、密码、文本、手机号等文字

<!--最多只能输 10 个字，多了输不进去-->
maxlength="10"<!--少于 8 位提交会报错-->
minlength="8"

`min` / `max`

只给数字输入框用，限制数值大小，不是字符个数
只能用于：数字、年龄、价格、日期、时间等数值类型

<!--只能填数字 1~10-->
<input type="number" min="1" max="10">

3.必填与提示

required

必填项，不填点提交，浏览器自动弹窗提示不能为空

placeholder="xxx"

输入框灰色提示文字，输入内容后自动消失

4.关联与标识

id

给输入框唯一编号，label 的 for 要对应 id

<label for="u_name">用户名</label> 绑定 <input id="u_name">

name

后端接收数据用的名字，提交表单时传给后台的字段名

<label for="u_name">姓名:</label>
<input type="text" id="u_name" name="u_name" > 
<!-- <label> 是表单文字标签，专门用来描述输入框是干嘛的，是给用户看的文字说明。
for="u_name"  标签“姓名：”绑定 id 是 u_name 的输入框
id="u_name"   该输入框是"u_name"唯一的输入框
name="u_name" 如果提交表单，输入框中值的名字叫 u_name。
    比如：输入"张三"，提交表单时为 u_name="张三"
-->

5.格式正则校验

pattern=”正则表达式”

自定义规则，比如手机号、身份证必须符合格式才能提交
例：

pattern="^1[3-9]\d{9}$" 限制必须是国内的 11 位手机号

pattern="^[A-Za-z0-9!@#$%^&*_]{8,20}$"要求密码为8-20 位字母 + 数字（支持部分特殊符号）