HTML5-新增表单类型和表单属性

r囧r小猫 2023-08-17 17:32 54阅读 0赞

### 文章目录 ###

*   *   *  新增表单类型
         *  新增表单属性

### 新增表单类型 ###

*  `number` 只允许输入数字（字母 e 除外）
    
     *  可以通过 `max` 和 `min` 属性设置输入范围
    
        <input type="number" name="" max="99" min="0" />
 *  `tel` 手机号码输入框
 *  `search` 搜索框
 *  `color` 用于选取颜色
 *  `date` 日期选择器（年月日）
 *  `month` 选择月份（年、月）
 *  `week` 周（年、第几周）
 *  `time` 时间（小时、分钟）
 *  `email` 用于校验邮箱格式
 *  `url` 网址形式的路径（例如：http://www.csdn.net）
 *  `range` 范围，显示为滑动条
    
     *  通过 `max` 和 `min` 设置限定，滑块位置默认居中
    
        <input type="range" name="" max="66" min="0" value="20">

### 新增表单属性 ###

*  `placeholder` 输入框中的提示文本（占位符）；属性值为一段提示文本
    
        <input placeholder="这是一段提示信息"/>
 *  `multiple` 可选择多个值（例如：上传多个文件）；属性值为 multiple
    
        <input type="file" name="myFiles" multiple="multiple" />
 *  `required` 设置为必填，当前所填项不能为空；属性值为 required
 *  `autofocus` 在页面加载时自动聚焦；属性值为 autofocus
 *  `autocomplete` 自动完成
    
     *  属性值为 `on`（开启）或 `off`（关闭） 设置该属性后，在表单提交后会自动记录用户输入的内容
     *  该属性在 `form` 标签中默认为 `on` ，在 `input` 标签中默认为 `off`
     *  使用该属性的 `input` 标签必须设置 `name` 属性
 *  `max` 设置输入字段的最大值，通常与 min 结合使用；属性值为 number（数值）或 date（日期）
    
        <input type="date" name="bday" max="2022-12-31" />
 *  `min` 设置输入字段的最小值