当前位置：首页 > news >正文

html-input 系列

news 2025/7/14 13:16:19

一.input系列

1.1 文本类输入

• text（默认值）：单行文本输入框。
• password：密码输入框，输入内容会被掩码（如●）显示。
• textarea：多行文本输入（需单独使用标签，而非type属性）

<input type="text" value="请输入内容">
<textarea>请输入内容</textarea>
<input type="password" value="密码">

1.2 选择类输入

• radio：单选按钮，需配合name属性使用。
• checkbox：复选框。
• select：下拉选择框（需单独使用标签）。

    <div><input type="radio" value="name"> 男<input type="radio" value="name"> 女</div><input type="checkbox" name="sports" value="basketball"> 蓝球<input type="checkbox" name="sports" value="football"> 足球<input type="checkbox" name="sports" value="volleyball"> 排球<div><select name="fruit"><option value="apple">苹果</option><option value="banana">香蕉</option><option value="orange" selected>橙子</option> <!-- 默认选中 --></select></div>

1.3 数值与范围

• number：数字输入框，支持数值验证。
• range：滑动条，用于选择范围内的值。
• date / time / datetime-local：日期、时间或日期时间选择器。

 <!-- 1. number: 数字输入框 --><div><label for="age">年龄：</label><input type="number" id="age" name="age" min="1" max="120" step="1" placeholder="请输入年龄"><small>（1-120岁）</small></div><!-- 2. range: 滑动条 --><div><label for="volume">音量：</label><input type="range" id="volume" name="volume" min="0" max="100" step="5" value="50"><output id="volumeValue">50</output></div><!-- 3. date: 日期选择器 --><div><label for="birthday">出生日期：</label><input type="date" id="birthday" name="birthday"min="1900-01-01" max="2025-07-13"></div><!-- 4. time: 时间选择器 --><div><label for="appointment">预约时间：</label><input type="time" id="appointment" name="appointment"min="09:00" max="18:00" step="900"> <!-- 15分钟间隔 --></div><!-- 5. datetime-local: 日期时间选择器 --><div><label for="deadline">截止日期：</label><input type="datetime-local" id="deadline" name="deadline"value="2025-07-13T12:00"></div>

1.4 文件与按钮

• file：文件上传控件。
• button：普通按钮，需配合 JavaScript 使用。
• submit：提交表单的按钮。
• reset：重置表单的按钮。

  <!-- 文件上传 --><input type="file" name="file"><!-- 普通按钮 --><input type="button" value="点击我" onclick="alert('普通按钮被点击！')"><!-- 提交按钮 --><input type="submit" value="提交表单"><!-- 重置按钮 --><input type="reset" value="重置">

1.5 其他类型

• email：电子邮件地址输入框，支持格式验证。
• tel：电话号码输入框（无强制格式验证）。
• url：URL 输入框，支持格式验证。
• search：搜索框，外观可能略有不同（如带有清除按钮）。
• color：颜色选择器。
• hidden：隐藏字段，用于存储不显示的数据

<!-- 电子邮件验证 --><input type="email" placeholder="your@email.com"><!-- 电话号码输入 --><input type="tel" placeholder="手机号"><!-- URL 验证 --><input type="url" placeholder="https://example.com"><!-- 搜索框 --><input type="search" placeholder="搜索..."><!-- 颜色选择器 --><input type="color" value="#ff0000"><!-- 隐藏字段 (查看网页源码可见) --><input type="hidden" name="session_id" value="123456"><button type="submit">提交</button>