新增表单元素和表单属性

1、表单元素

- 包含访问协议的完整路径的输入域，在提交表单时，自动验证url域的值

```html

<input type="url" placeholder="请输入地址" name="userURL">

```

- 包含e-mail地址的输入域，在提交表单时，自动验证email域的值

```html

<input type="email" placeholder="请输入邮箱地址" name="usermail">

```

- 用于搜索关键字的文本输入域，多用于手机客户端

```

<input type="search">

```

- 用于输入电话号码的文本输入域，服务于触屏网页开发，在电脑网页中无效，在触屏网页中点击输入域，显示虚拟电话键盘（0-9、*、#）

```html

<input type="tel">

```

- 用于包含数值的输入域

```html

<input type="number" max="10" min="0" value="2" step="2">

max属性：最大值

min属性：最小值

step属性：步长，合法的数字间隔，默认步长为1

```

> 注意：当用户输入的数值不在指定范围内，会弹出相关提示，并阻止表单提交

- 用于生成一个数字滑动条。与number类型比区别在于外观样式不同、默认值不同。range类型的min值默认为0，max属性默认值为100

```html

<input type="range" max="10" min="0" value="2">

```

- 用于生成一个颜色选择器，值为十六进制色值

```html

<input type="color">

<input type="color" value="#ffff00">

value:必须是十六进制，不能简写

```

### 时间日期选择器

#### 1、date日期

- 作用：选择一个日期（年月日）

- 代码示例

```html

<input type="date">

```

#### 2、time时间

- 作用：选择小时分钟

- 代码示例

```html

<input type="time">

```

#### 3、datetime-local本地时间

- 作用：选择一个日期和时间 (年月日时分)

- 代码示例

```html

<input type="datetime-local">

```

#### 4、month月份

- 从日期选择器中选择一个月份，包含年、月

```html

<input type="month">

```

#### 5、week周

- 从一个日期选择器中选择周，包含年、周（全年的第几周）

```html

<input type="week">

```

### 2）表单属性

- min、max、step属性

最小值、最大值、合法的数字间隔

用于包含数字的input类型，规定数值范围，如:input的number类型等

```html

<input type="number" step="2" min="4" max="10">

```

- placeholder属性

设置文本域的提示信息，当用户开始输入内容，提示信息会消失

- autocomplete属性

设置表单是否启用自动完成功能，可以加在form标签、input标签中

- autocomplete="on" 启用自动完成功能

- autocomplete="off" 不采用自动完成功能

> 在input标签中name属性是必要的

```html

<form action="#">

<div>

<input type="text" name="username" autocomplete="on">

<input type="text" name="username2" autocomplete="off">

</div>

<div><input type="submit" value="提交"></div>

</form>

```

- autofocus属性

页面加载时自动获取焦点；一个页面中只能有一个表单元素具有这个属性

```html

<input type="text" name="username2" autofocus>

```

- required属性

提交表单时元素不能为空

> 要让属性生效，不能添加value值

```html

<input type="text" required>

```

- pattern属性

验证输入内容——正则表达式

```html

<input type="text" pattern="[0-9]{3}">

0-9的三位数字

```

- multiple属性

```html

- multiple属性

可以选择多个值，用于长传域file类型和email类型的文本输入域

```html

<input type="file" multiple>

按ctrl键多选