246 lines
4.3 KiB
Markdown
246 lines
4.3 KiB
Markdown
---
|
|
title: 浅尝 HTML 5 input 新属性
|
|
id: '276'
|
|
categories:
|
|
- 分享
|
|
tags:
|
|
- HTML5
|
|
- input
|
|
- 属性
|
|
date: 2018-02-07 18:16:11
|
|
---
|
|
|
|
在HTML 5中，input增加了许多新的特性，本篇文章整理了一些新增的，并且谷歌浏览器也已经支持的属性。 这些新增的属性，很大程度的丰富了表单控件，很多原来需要js去验证的表单，现在只要一个属性就可以了，大大提高了生产效率。 #color::-webkit-input-placeholder { /\* WebKit, Blink, Edge \*/ color:#f00; } #color::-moz-placeholder { /\* Mozilla Firefox 19+ \*/ color:#f00; } #color:-ms-input-placeholder { /\* Internet Explorer 10-11 \*/ color:#f00; } dl input { border: 1px solid #ccc; }
|
|
|
|
## required 属性
|
|
|
|
required属性规定必需在提交表单之前填写输入字段。
|
|
|
|
```
|
|
|
|
<!-- 此输入框为必填-->
|
|
<input type="text" required>
|
|
```
|
|
|
|
|
|
|
|
## list 属性
|
|
|
|
属性引用 datalist 元素，其中包含 input 元素的预定义选项。
|
|
|
|
```
|
|
|
|
<input list="city">
|
|
<datalist id="city">
|
|
<option value="北京">
|
|
<option value="上海">
|
|
<option value="广州">
|
|
<option value="深圳">
|
|
<option value="杭州">
|
|
</datalist>
|
|
```
|
|
|
|
|
|
|
|
## maxlength 属性
|
|
|
|
属性规定 input 元素中允许的最大字符数。
|
|
|
|
```
|
|
|
|
<!-- 只允许输入3个字符 -->
|
|
<input type="text" name="usrname" maxlength="3">
|
|
```
|
|
|
|
## max min 属性
|
|
|
|
属性规定 input 元素的最大和最小值。
|
|
|
|
```
|
|
|
|
<!-- 最大值为10 -->
|
|
<input type="number" max="10" required>
|
|
<!-- 最小值为10 -->
|
|
<input type="number" min="10" required>
|
|
<!-- 1到10之间的数字 -->
|
|
<input type="number" min="1" max="10" required>
|
|
```
|
|
|
|
## multiple 属性
|
|
|
|
可接受多个值的文件上传字段
|
|
|
|
```
|
|
|
|
<!-- 按住Ctrl，可选择上传多个文件 -->
|
|
<input type="file" multiple required>
|
|
```
|
|
|
|
|
|
|
|
## pattern 属性
|
|
|
|
pattern 属性规定用于验证 input 元素的值的正则表达式。
|
|
|
|
```
|
|
|
|
<!-- 用pattern属性限制只能输入字母 -->
|
|
<input type="text" pattern="^[a-zA-Z]+$" title="只能输入字母" required>
|
|
```
|
|
|
|
|
|
|
|
## step 属性
|
|
|
|
step 属性规定 input 元素的合法数字间隔。
|
|
|
|
```
|
|
|
|
<!-- 只能输入能被5整除的数字 -->
|
|
<input type="number" step="5" required>
|
|
```
|
|
|
|
|
|
|
|
## src alt 属性规定
|
|
|
|
input按钮用图片展示
|
|
|
|
```
|
|
|
|
<!-- src的值可以是图片链接或者base64 -->
|
|
<input type="image" src="data:image/png;base64">
|
|
```
|
|
|
|
## placeholder 属性
|
|
|
|
placeholder 属性规定可描述输入 input 字段预期值的简短的提示信息 。
|
|
|
|
```
|
|
|
|
<!-- 带有 placeholder 文本的输入字段 -->
|
|
<input type="text" placeholder="请输入你的文本">
|
|
|
|
<!-- placeholder 文本也可以指定颜色 -->
|
|
<style type="text/css">
|
|
#color::-webkit-input-placeholder { /* WebKit, Blink, Edge */
|
|
color:#f00;
|
|
}
|
|
#color::-moz-placeholder { /* Mozilla Firefox 19+ */
|
|
color:#f00;
|
|
}
|
|
#color:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
|
color:#f00;
|
|
}
|
|
</style>
|
|
<input id="color" type="text" placeholder="请输入你的文本">
|
|
```
|
|
|
|
|
|
|
|
## type 属性
|
|
|
|
在HTML5中，type有了更多丰富的控件类型让我们使用
|
|
|
|
### color 拾色器
|
|
|
|
```
|
|
|
|
<!-- 拾色器 -->
|
|
<input type="color">
|
|
```
|
|
|
|
### date 日期控件
|
|
|
|
```
|
|
|
|
<!-- 日期控件 -->
|
|
<input type="date">
|
|
```
|
|
|
|
### month 年月控件
|
|
|
|
```
|
|
|
|
<!-- 定义 month 和 year 控件（不带时区） -->
|
|
<input type="month">
|
|
```
|
|
|
|
### time 时间控件
|
|
|
|
```
|
|
|
|
<!-- 定义用于输入时间的控件（不带时区） -->
|
|
<input type="time">
|
|
```
|
|
|
|
### week 周控件
|
|
|
|
```
|
|
|
|
<!-- 定义 week 和 year 控件（不带时区） -->
|
|
<input type="week">
|
|
```
|
|
|
|
### datetime-local 带时间的日期控件
|
|
|
|
```
|
|
|
|
<!-- date 和 time 控件（不带时区） -->
|
|
<input type="datetime-local">
|
|
```
|
|
|
|
### email 定义用于 e-mail 地址的字段（当提交表单时会自动对 email 字段的值进行验证）
|
|
|
|
```
|
|
|
|
<!-- 输入的必须是邮箱格式 -->
|
|
<input type="email" required>
|
|
```
|
|
|
|
|
|
|
|
### number 数字
|
|
|
|
```
|
|
|
|
<!-- 输入的必须是数字 -->
|
|
<input type="number">
|
|
```
|
|
|
|
### password 密码
|
|
|
|
```
|
|
|
|
<!-- 输入密码控件 -->
|
|
<input type="password">
|
|
```
|
|
|
|
### range 范围取值
|
|
|
|
```
|
|
|
|
<!-- 选择1到10的范围 -->
|
|
<input type="range" min="1" max="10">
|
|
```
|
|
|
|
### tel 电话
|
|
|
|
```
|
|
|
|
<!-- 输入的值必须是电话号码 -->
|
|
<input type="tel">
|
|
```
|
|
|
|
### url 链接
|
|
|
|
```
|
|
|
|
<!-- 输入的值必须是链接 -->
|
|
<input type="url" required>
|
|
```
|
|
|
|
|
|
|
|
# [页面demo](https://demo.dengtongyu.com/input/)
|