HTML＜input＞元素详解

HTML <input> 元素详解

<input> 是 HTML 表单中最核心的元素，用于创建各种交互式控件来接收用户输入。

---

一、基本语法

<input type="输入类型" name="字段名" value="默认值">

---

二、主要输入类型

1. 文本输入

<!-- 普通文本输入 -->
<input type="text" name="username" placeholder="请输入用户名">

<!-- 密码输入 -->
<input type="password" name="password" placeholder="请输入密码">

<!-- 多行文本 -->
<textarea name="bio" rows="4" cols="50"></textarea>

2. 选择输入

<!-- 单选按钮 -->
<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label>
<input type="radio" name="gender" value="female" id="female" checked>
<label for="female">女</label>

<!-- 复选框 -->
<input type="checkbox" name="hobby" value="reading" id="reading">
<label for="reading">阅读</label>
<input type="checkbox" name="hobby" value="sports" id="sports" checked>
<label for="sports">运动</label>

<!-- 下拉选择 -->
<select name="country">
  <option value="">--请选择--</option>
  <option value="cn">中国</option>
  <option value="us" selected>美国</option>
</select>

3. 特殊输入类型

<!-- 数字输入 -->
<input type="number" name="age" min="18" max="99">

<!-- 日期选择 -->
<input type="date" name="birthday">

<!-- 颜色选择 -->
<input type="color" name="favcolor">

<!-- 文件上传 -->
<input type="file" name="avatar" accept="image/*">

<!-- 隐藏字段 -->
<input type="hidden" name="userid" value="12345">

---

三、重要属性

属性	描述	示例
name	表单字段名称（必填）	name="username"
value	默认值	value="默认文本"
placeholder	输入提示	placeholder="请输入..."
required	必填字段	required
readonly	只读	readonly
disabled	禁用	disabled
maxlength	最大字符数	maxlength="20"
min/max	数值范围	min="0" max="100"
step	数值步长	step="5"
pattern	正则验证	pattern="[A-Za-z]{3}"
autocomplete	自动完成	autocomplete="off"
autofocus	自动聚焦	autofocus

---

四、表单验证示例

<form>
  <!-- 必填文本字段 -->
  <input type="text" name="fullname" required placeholder="请输入全名">
  
  <!-- 邮箱验证 -->
  <input type="email" name="email" required placeholder="请输入有效邮箱">
  
  <!-- 密码强度验证 -->
  <input type="password" name="password" required minlength="8" 
         pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" 
         title="必须包含大小写字母和数字">
  
  <!-- 自定义错误提示 -->
  <input type="text" name="zipcode" pattern="\d{5}" 
         oninvalid="this.setCustomValidity('请输入5位邮编')"
         oninput="this.setCustomValidity('')">
  
  <button type="submit">提交</button>
</form>

---

五、现代输入类型 (HTML5)

<!-- 搜索框 -->
<input type="search" name="q">

<!-- 电话号码 -->
<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

<!-- URL输入 -->
<input type="url" name="website">

<!-- 范围滑块 -->
<input type="range" name="volume" min="0" max="100" step="5">

<!-- 日期时间 -->
<input type="datetime-local" name="meeting">

---

六、最佳实践

1. 始终使用<label>：提高可访问性

   <label for="username">用户名：</label>
   <input type="text" id="username" name="username">
   

2. 合理分组：使用<fieldset>和<legend>

   <fieldset>
     <legend>个人信息</legend>
     <!-- 表单字段 -->
   </fieldset>
   

3. 移动端优化：

   <!-- 调出数字键盘 -->
   <input type="tel" inputmode="numeric">
   
   <!-- 调出适合邮箱的键盘 -->
   <input type="email" inputmode="email">
   

4. 安全考虑：

   <!-- 防止自动填充 -->
   <input type="password" name="password" autocomplete="new-password">
   
   <!-- 防止XSS -->
   <input type="text" value="<?php echo htmlspecialchars($value); ?>">
   

5. 样式一致性：

   input, select, textarea {
     box-sizing: border-box;
     width: 100%;
     padding: 8px;
     margin: 5px 0;
   }