HTML <input>标签介绍教程

作者: 字符空间 发布时间: 2025-12-11 阅读: 6

一、<input>标签概述

<input>标签是HTML中最重要和最常用的表单元素，用于创建各种类型的输入控件。它是一个空元素（自闭合标签），具有多种type属性值来定义不同的输入类型。

标签名称功能描述块级/行内闭合方式
<input>创建表单输入控件行内块元素自闭合标签

二、基本语法结构

<input type="text" name="fieldname" value="初始值">

三、type属性详解（输入类型）

1. 文本类输入

type值描述示例浏览器效果
text单行文本输入框<input type="text">常规文本框
password密码输入框（内容掩码）<input type="password">显示为圆点或星号
email电子邮件地址输入<input type="email">支持格式验证
tel电话号码输入<input type="tel">移动端弹出数字键盘
urlURL地址输入<input type="url">支持URL格式验证
search搜索框<input type="search">可能有清除按钮

2. 数字和日期类

type值描述示例特殊属性
number数字输入框<input type="number">min, max, step
range滑块控件<input type="range">min, max, step, value
date日期选择器<input type="date">min, max
time时间选择器<input type="time">min, max, step
datetime-local本地日期时间选择器<input type="datetime-local">min, max
month月份选择器<input type="month">min, max
week周选择器<input type="week">min, max

3. 选择类输入

type值描述示例特点
checkbox复选框（多选）<input type="checkbox">可同时选择多个
radio单选框（单选）<input type="radio">同一name只能选一个
color颜色选择器<input type="color">弹出颜色选择对话框
file文件选择器<input type="file">accept, multiple

4. 按钮类输入

type值描述示例用途
submit提交按钮<input type="submit">提交表单数据
reset重置按钮<input type="reset">重置表单数据
button普通按钮<input type="button">自定义功能（需JS）
image图像提交按钮<input type="image" src="...">图像作为提交按钮

5. 其他类型

type值描述示例说明
hidden隐藏字段<input type="hidden">用户不可见，传递数据

四、核心属性详解

1. 通用属性

属性描述适用type示例
name控件名称，用于表单提交除submit/reset外的所有name="username"
value控件的初始值text/password/email等value="默认值"
id唯一标识符所有id="user-input"
classCSS类名所有class="form-control"
placeholder提示文本（占位符）text/password/email/tel等placeholder="请输入..."
disabled禁用控件所有disabled
readonly只读（可选中但不可编辑）text/password/email等readonly
required必填字段text/password/email等required
autofocus页面加载时自动聚焦所有autofocus
autocomplete自动完成功能text/password/email等autocomplete="off"

2. 特定类型属性

属性描述适用type示例
maxlength最大字符数text/password/email等maxlength="50"
minlength最小字符数text/password/email等minlength="6"
size可视宽度（字符数）text/password/search等size="20"
checked默认选中checkbox/radiochecked
multiple允许多个值email/filemultiple
accept可接受的文件类型fileaccept=".jpg,.png"
step数字间隔number/range/date等step="0.5"
min最小值number/range/date等min="0"
max最大值number/range/date等max="100"
pattern正则表达式验证text/password/email等pattern="[A-Za-z]{3}"

五、各种type的详细示例

示例1：文本类输入综合示例

<form>
    <label for="username">用户名：</label><br>
    <input type="text" id="username" name="username" 
           placeholder="请输入用户名" 
           maxlength="20" 
           required><br><br>
    
    <label for="email">邮箱：</label><br>
    <input type="email" id="email" name="email" 
           placeholder="example@domain.com" 
           required><br><br>
    
    <label for="password">密码：</label><br>
    <input type="password" id="password" name="password" 
           minlength="6" 
           placeholder="至少6位字符" 
           required><br><br>
    
    <label for="search">搜索：</label><br>
    <input type="search" id="search" name="search" 
           placeholder="输入关键词..."><br><br>
    
    <label for="website">个人网站：</label><br>
    <input type="url" id="website" name="website" 
           placeholder="https://example.com"><br><br>
    
    <label for="phone">手机号：</label><br>
    <input type="tel" id="phone" name="phone" 
           pattern="[0-9]{11}" 
           placeholder="11位手机号码"><br><br>
</form>

示例2：数字和范围类输入

<form>
    <label for="quantity">购买数量（1-10）：</label><br>
    <input type="number" id="quantity" name="quantity" 
           min="1" max="10" step="1" value="1"><br><br>
    
    <label for="price">单价（0.5的倍数）：</label><br>
    <input type="number" id="price" name="price" 
           min="0" step="0.5" value="0"><br><br>
    
    <label for="volume">音量控制：</label>
    <input type="range" id="volume" name="volume" 
           min="0" max="100" step="10" value="50">
    <span id="volume-value">50</span><br><br>
    
    <label for="age">年龄：</label><br>
    <input type="number" id="age" name="age" 
           min="0" max="150" value="18"><br><br>
</form>

示例3：日期和时间类输入

<form>
    <label for="birthday">出生日期：</label><br>
    <input type="date" id="birthday" name="birthday" 
           min="1900-01-01" max="2023-12-31"><br><br>
    
    <label for="meeting-time">会议时间：</label><br>
    <input type="time" id="meeting-time" name="meeting-time" 
           min="09:00" max="18:00" step="1800"> <!-- 30分钟间隔 --><br><br>
    
    <label for="event-datetime">活动日期时间：</label><br>
    <input type="datetime-local" id="event-datetime" name="event-datetime"><br><br>
    
    <label for="appointment">预约周：</label><br>
    <input type="week" id="appointment" name="appointment"><br><br>
    
    <label for="report-month">报告月份：</label><br>
    <input type="month" id="report-month" name="report-month"><br><br>
</form>

示例4：选择类输入

<form>
    <!-- 复选框（多选）示例 -->
    <fieldset>
        <legend>兴趣爱好（可多选）：</legend>
        <input type="checkbox" id="hobby-reading" name="hobbies" value="reading" checked>
        <label for="hobby-reading">阅读</label><br>
        
        <input type="checkbox" id="hobby-music" name="hobbies" value="music">
        <label for="hobby-music">音乐</label><br>
        
        <input type="checkbox" id="hobby-sports" name="hobbies" value="sports">
        <label for="hobby-sports">运动</label><br>
        
        <input type="checkbox" id="hobby-travel" name="hobbies" value="travel">
        <label for="hobby-travel">旅游</label>
    </fieldset><br>
    
    <!-- 单选框（单选）示例 -->
    <fieldset>
        <legend>性别：</legend>
        <input type="radio" id="gender-male" name="gender" value="male" checked>
        <label for="gender-male">男</label><br>
        
        <input type="radio" id="gender-female" name="gender" value="female">
        <label for="gender-female">女</label><br>
        
        <input type="radio" id="gender-other" name="gender" value="other">
        <label for="gender-other">其他</label>
    </fieldset><br>
    
    <!-- 颜色选择器 -->
    <label for="favorite-color">喜欢的颜色：</label><br>
    <input type="color" id="favorite-color" name="favorite-color" value="#ff0000"><br><br>
    
    <!-- 文件上传 -->
    <label for="file-upload">上传文件：</label><br>
    <input type="file" id="file-upload" name="file-upload" 
           accept=".jpg,.jpeg,.png,.pdf" 
           multiple><br><br>
    
    <!-- 隐藏字段 -->
    <input type="hidden" id="user-id" name="user-id" value="12345">
</form>

示例5：按钮类输入

<form action="/submit" method="post">
    <label for="feedback">反馈意见：</label><br>
    <textarea id="feedback" name="feedback" rows="4"></textarea><br><br>
    
    <!-- 提交按钮 -->
    <input type="submit" value="提交反馈">
    
    <!-- 重置按钮 -->
    <input type="reset" value="重置表单">
    
    <!-- 普通按钮（需要JavaScript处理） -->
    <input type="button" value="点击测试" onclick="alert('按钮被点击了！')">
    
    <!-- 图像按钮 -->
    <input type="image" src="submit-btn.png" alt="提交" width="100" height="40">
</form>

六、数据列表（datalist）结合使用

示例6：输入建议列表

<form>
    <label for="browser">选择浏览器：</label><br>
    <input type="text" id="browser" name="browser" list="browsers">
    
    <datalist id="browsers">
        <option value="Chrome">
        <option value="Firefox">
        <option value="Safari">
        <option value="Edge">
        <option value="Opera">
    </datalist><br><br>
    
    <label for="car">选择汽车品牌：</label><br>
    <input type="text" id="car" name="car" list="cars" placeholder="输入或选择">
    
    <datalist id="cars">
        <option value="奔驰">
        <option value="宝马">
        <option value="奥迪">
        <option value="丰田">
        <option value="本田">
        <option value="特斯拉">
    </datalist>
</form>

七、HTML5验证特性示例

示例7：综合验证表单

<form>
    <label for="username-validate">用户名（3-20字符）：</label><br>
    <input type="text" id="username-validate" name="username" 
           minlength="3" maxlength="20" 
           pattern="[A-Za-z0-9_]+" 
           required 
           title="只能包含字母、数字和下划线"><br><br>
    
    <label for="email-validate">邮箱：</label><br>
    <input type="email" id="email-validate" name="email" 
           required 
           placeholder="name@example.com"><br><br>
    
    <label for="age-validate">年龄（18-99）：</label><br>
    <input type="number" id="age-validate" name="age" 
           min="18" max="99" 
           required><br><br>
    
    <label for="url-validate">个人网站：</label><br>
    <input type="url" id="url-validate" name="website" 
           placeholder="https://example.com"><br><br>
    
    <label for="password-validate">密码（至少8位）：</label><br>
    <input type="password" id="password-validate" name="password" 
           minlength="8" 
           required 
           pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" 
           title="必须包含大小写字母和数字"><br><br>
    
    <input type="submit" value="验证提交">
</form>

八、特殊属性应用

1. 文件上传属性

<form enctype="multipart/form-data">
    <label for="avatar">上传头像：</label><br>
    <input type="file" id="avatar" name="avatar" 
           accept="image/*" 
           capture="user"> <!-- 移动端调用摄像头 --><br><br>
    
    <label for="documents">上传文档（多文件）：</label><br>
    <input type="file" id="documents" name="documents[]" 
           multiple 
           accept=".pdf,.doc,.docx"><br><br>
    
    <label for="custom-file">自定义文件选择：</label><br>
    <input type="file" id="custom-file" name="custom-file" 
           accept=".jpg, .jpeg, .png, .gif" 
           title="选择图像文件">
</form>

2. 表单关联属性

<form id="form1">
    <label for="field1">字段1：</label>
    <input type="text" id="field1" name="field1" form="form1"><br><br>
</form>

<!-- 这个input不在form标签内，但通过form属性关联 -->
<label for="field2">字段2：</label>
<input type="text" id="field2" name="field2" form="form1"><br><br>

<input type="submit" form="form1" value="提交表单">

九、兼容性和浏览器支持

输入类型ChromeFirefoxSafariEdgeIE
text/password/submit等基本类型完全支持完全支持完全支持完全支持完全支持
email/url/tel完全支持完全支持完全支持完全支持IE10+
number/range完全支持完全支持完全支持完全支持IE10+
date/time/month/week完全支持完全支持完全支持完全支持不支持
color完全支持完全支持完全支持完全支持不支持
search完全支持完全支持完全支持完全支持IE10+

十、最佳实践和注意事项

1. 通用最佳实践

  • 始终使用label标签：为每个input提供关联的label，提高可访问性
  • 正确使用name属性：确保表单数据能被正确提交和处理
  • 合理使用placeholder：作为提示，但不能替代label
  • 移动端优化：使用合适的输入类型触发正确的虚拟键盘

2. 特定类型建议

输入类型建议避免
email/url/tel利用内置验证忽略服务器端验证
number/range设置min/max/step不设限制导致无效输入
checkbox/radio分组使用fieldset缺少视觉分组
file使用accept限制类型允许所有文件类型
password添加minlength要求使用弱密码

3. 可访问性指南

✅ 正确做法：
<label for="username">用户名：</label>
<input type="text" id="username" name="username" aria-label="用户名输入框">

❌ 错误做法：
用户名：<input type="text" name="username"> <!-- 缺少label和id -->

十一、实际应用案例

案例1：用户注册表单

<form action="/register" method="post">
    <label for="reg-username">用户名：</label><br>
    <input type="text" id="reg-username" name="username" 
           required minlength="3" maxlength="20" autofocus><br><br>
    
    <label for="reg-email">电子邮箱：</label><br>
    <input type="email" id="reg-email" name="email" required><br><br>
    
    <label for="reg-password">密码：</label><br>
    <input type="password" id="reg-password" name="password" 
           required minlength="8"><br><br>
    
    <label for="reg-confirm">确认密码：</label><br>
    <input type="password" id="reg-confirm" name="confirm_password" 
           required><br><br>
    
    <label for="reg-birthdate">出生日期：</label><br>
    <input type="date" id="reg-birthdate" name="birthdate"><br><br>
    
    <label>订阅通知：</label>
    <input type="checkbox" id="reg-newsletter" name="newsletter" checked>
    <label for="reg-newsletter">接收促销邮件</label><br><br>
    
    <input type="submit" value="注册">
    <input type="reset" value="重置">
</form>

案例2：产品搜索和筛选

<form action="/search" method="get">
    <label for="search-keyword">搜索产品：</label><br>
    <input type="search" id="search-keyword" name="q" 
           placeholder="输入产品名称或型号"><br><br>
    
    <label for="price-min">价格范围：</label><br>
    最低：<input type="number" id="price-min" name="price_min" min="0" step="100">
    最高：<input type="number" id="price-max" name="price_max" min="0" step="100"><br><br>
    
    <label for="category">产品类别：</label><br>
    <input type="text" id="category" name="category" list="categories">
    
    <datalist id="categories">
        <option value="电子产品">
        <option value="家居用品">
        <option value="服装鞋帽">
        <option value="图书音像">
        <option value="食品饮料">
    </datalist><br><br>
    
    <label for="sort-by">排序方式：</label><br>
    <input type="radio" id="sort-price" name="sort" value="price" checked>
    <label for="sort-price">价格</label>
    
    <input type="radio" id="sort-popular" name="sort" value="popular">
    <label for="sort-popular">销量</label>
    
    <input type="radio" id="sort-new" name="sort" value="new">
    <label for="sort-new">新品</label><br><br>
    
    <input type="submit" value="搜索">
    <input type="button" value="高级筛选" onclick="showAdvancedFilter()">
</form>

总结：<input>标签是HTML表单的核心，提供了丰富的输入类型和属性。正确使用各种type值可以创建用户友好的表单，提高数据输入的准确性和效率。同时，合理利用HTML5的新特性（如验证、数据列表等）可以大大提升用户体验。

❤️收藏 👍点赞

用户评论

发表评论

您还未登录，无法发表评论！
快来留下你的足迹吧~