输入元素

input是最灵活的表单输入元素，通过type属性实现多种输入类型。

文本输入类型

单行文本

HTML

<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="pwd" placeholder="密码">

特定格式文本

HTML

<input type="email" name="email" required>
<input type="url" name="website" placeholder="https://">
<input type="tel" name="phone" pattern="[0-9]{11}">
<input type="search" name="query" placeholder="搜索关键词">

数值输入类型

数字与范围

HTML

<input type="number" name="age" min="0" max="100" step="1">
<input type="range" name="volume" min="0" max="100" value="50">

属性	说明
`min`	最小值
`max`	最大值
`step`	步进值
`value`	默认值

日期时间类型

日期选择

HTML

<input type="date" name="birthday">
<input type="time" name="schedule">
<input type="datetime-local" name="meeting">
<input type="month" name="expiry">
<input type="week" name="week">

选择输入类型

单选框radio

HTML

<!-- 同name互斥 -->
<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label>

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

<!-- 默认选中 -->
<input type="radio" name="gender" value="other" checked>

复选框checkbox

HTML

<input type="checkbox" name="agree" value="yes" required>
<label>同意条款</label>

<!-- 默认选中 -->
<input type="checkbox" name="newsletter" checked>

其他输入类型

文件上传

HTML

<input type="file" name="avatar" accept="image/*">
<input type="file" name="docs" accept=".pdf,.doc" multiple>

属性	说明
`accept`	文件类型限制
`multiple`	允许多选

颜色选择

HTML

<input type="color" name="theme" value="#336699">

隐藏字段

HTML

<input type="hidden" name="token" value="abc123">
<input type="hidden" name="userId" value="1001">

隐藏字段不显示，但随表单提交，常用于传递后台数据。

核心属性

状态属性

HTML

<input type="text" required>     <!-- 必填 -->
<input type="text" disabled>     <!-- 禁用 -->
<input type="text" readonly>     <!-- 只读 -->
<input type="text" autofocus>    <!-- 自动聚焦 -->

属性	说明
`required`	必填验证
`disabled`	禁用（不提交）
`readonly`	只读（会提交）
`autofocus`	页面加载自动聚焦

文本限制属性

HTML

<input type="text" minlength="2" maxlength="20">
<input type="text" placeholder="提示文字">
<input type="text" pattern="[A-Za-z]{3}" title="3个字母">

自动完成

HTML

<input type="text" autocomplete="on">
<input type="password" autocomplete="off">

datalist输入建议

HTML

<input type="text" name="city" list="cityList">
<datalist id="cityList">
    <option value="北京">
    <option value="上海">
    <option value="广州">
    <option value="深圳">
</datalist>

datalist提供输入建议，用户可选择或自由输入。

type类型速查

type	用途	特点
`text`	通用文本	基础类型
`password`	密码	显示为圆点
`email`	邮箱	自动验证格式
`number`	数字	上下箭头
`date`	日期	日期选择器
`radio`	单选	同name互斥
`checkbox`	复选	可多选
`file`	文件	文件上传
`color`	颜色	颜色选择器
`hidden`	隐藏	不显示

要点总结

name必填：有name才能提交数据
type正确：根据数据选择合适类型
radio互斥：同name的单选框互斥
验证组合：required + pattern实现校验

📝 发现内容有误？点击此处直接编辑