input 的 type 决定了它的交互形态:text 普通文本、password 密码、number 数字、email 邮箱、date 日期、range 滑块、color 取色、file 文件上传、checkbox 复选、radio 单选。email、url、number 等类型自带基础格式校验,submit 时浏览器会先拦一道,配合 required、pattern、minlength 等属性可以不写 JS 就完成常见验证。
并不是所有输入都该用 input:多行文本用 textarea,下拉选择用 select,按钮优先用 button 标签(语义和可样式性都更好)。移动端上 type 的选择直接影响弹出的键盘:email 出 @ 键、number 出数字键盘、tel 出电话拨号盘,对用户体验影响很大。每种类型记得配 label,否则无 accessibility 不达标。
<style> form.f label { display: block; font-size: 13px; margin-top: 8px; } form.f input { display: block; margin-top: 3px; padding: 5px 8px; border: 1px solid #4a9eff; border-radius: 5px; } </style> <form class="f" action="#" method="post"> <label>邮箱(自带格式校验) <input type="email" required placeholder="name@example.com"> </label> <label>生日 <input type="date"> </label> <label>满意度 <input type="range" min="0" max="10" value="7"> </label> <label>记住我 <input type="checkbox"> </label> <input type="submit" value="提交"> </form>