更新

source/_posts/浅尝-html-5-input-新属性.md

@@ -1,9 +1,12 @@
 ---
 title: 浅尝 HTML 5 input 新属性
-tags: []
 id: '276'
 categories:
-  - - 分享
+ - 分享
+tags:
+ - HTML5
+ - input
+ - 属性
 date: 2018-02-07 18:16:11
 ---
 
@@ -13,7 +16,7 @@ date: 2018-02-07 18:16:11
 
 required属性规定必需在提交表单之前填写输入字段。
 
-```
+``` 
 
 <!-- 此输入框为必填-->
 <input type="text" required>
@@ -25,7 +28,7 @@ required属性规定必需在提交表单之前填写输入字段。
 
 属性引用 datalist 元素，其中包含 input 元素的预定义选项。
 
-```
+``` 
 
 <input list="city">
 <datalist id="city">
@@ -43,7 +46,7 @@ required属性规定必需在提交表单之前填写输入字段。
 
 属性规定 input 元素中允许的最大字符数。
 
-```
+``` 
 
  <!-- 只允许输入3个字符 -->
 <input type="text" name="usrname" maxlength="3">
@@ -53,7 +56,7 @@ required属性规定必需在提交表单之前填写输入字段。
 
 属性规定 input 元素的最大和最小值。
 
-```
+``` 
 
 <!-- 最大值为10 -->
 <input type="number" max="10" required>
@@ -67,7 +70,7 @@ required属性规定必需在提交表单之前填写输入字段。
 
 可接受多个值的文件上传字段
 
-```
+``` 
 
 <!-- 按住Ctrl，可选择上传多个文件 -->
 <input type="file" multiple required>
@@ -79,7 +82,7 @@ required属性规定必需在提交表单之前填写输入字段。
 
 pattern 属性规定用于验证 input 元素的值的正则表达式。
 
-```
+``` 
 
 <!-- 用pattern属性限制只能输入字母 -->
 <input type="text" pattern="^[a-zA-Z]+$" title="只能输入字母" required>
@@ -91,7 +94,7 @@ pattern 属性规定用于验证 input 元素的值的正则表达式。
 
 step 属性规定 input 元素的合法数字间隔。
 
-```
+``` 
 
 <!-- 只能输入能被5整除的数字 -->
 <input type="number" step="5" required>
@@ -103,7 +106,7 @@ step 属性规定 input 元素的合法数字间隔。
 
 input按钮用图片展示
 
-```
+``` 
 
 <!-- src的值可以是图片链接或者base64 -->
 <input type="image" src="data:image/png;base64">
@@ -113,7 +116,7 @@ input按钮用图片展示
 
 placeholder 属性规定可描述输入 input 字段预期值的简短的提示信息 。
 
-```
+``` 
 
 <!-- 带有 placeholder 文本的输入字段 -->
 <input type="text" placeholder="请输入你的文本">
@@ -141,7 +144,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示
 
 ### color 拾色器
 
-```
+``` 
 
 <!-- 拾色器 -->
 <input type="color">
@@ -149,7 +152,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示
 
 ### date 日期控件
 
-```
+``` 
 
 <!-- 日期控件 -->
 <input type="date">
@@ -157,7 +160,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示
 
 ### month 年月控件
 
-```
+``` 
 
 <!-- 定义 month 和 year 控件（不带时区） -->
 <input type="month">
@@ -165,7 +168,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示
 
 ### time 时间控件
 
-```
+``` 
 
 <!-- 定义用于输入时间的控件（不带时区） -->
 <input type="time">
@@ -173,7 +176,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示
 
 ### week 周控件
 
-```
+``` 
 
 <!-- 定义 week 和 year 控件（不带时区） -->
 <input type="week">
@@ -181,7 +184,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示
 
 ### datetime-local 带时间的日期控件
 
-```
+``` 
 
 <!-- date 和 time 控件（不带时区） -->
 <input type="datetime-local">
@@ -189,7 +192,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示
 
 ### email 定义用于 e-mail 地址的字段（当提交表单时会自动对 email 字段的值进行验证）
 
-```
+``` 
 
 <!-- 输入的必须是邮箱格式 -->
 <input type="email" required>
@@ -199,7 +202,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示
 
 ### number 数字
 
-```
+``` 
 
 <!-- 输入的必须是数字 -->
 <input type="number">
@@ -207,7 +210,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示
 
 ### password 密码
 
-```
+``` 
 
 <!-- 输入密码控件 -->
 <input type="password">
@@ -215,7 +218,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示
 
 ### range 范围取值
 
-```
+``` 
 
 <!-- 选择1到10的范围 -->
 <input type="range" min="1" max="10">
@@ -223,7 +226,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示
 
 ### tel 电话
 
-```
+``` 
 
 <!-- 输入的值必须是电话号码 -->
 <input type="tel">
@@ -231,7 +234,7 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示
 
 ### url 链接
 
-```
+``` 
 
 <!-- 输入的值必须是链接 -->
 <input type="url" required>
@@ -239,4 +242,4 @@ placeholder 属性规定可描述输入 input 字段预期值的简短的提示
 
  
 
-# [页面demo](https://demo.dengtongyu.com/pages/input/)
+# [页面demo](https://demo.dengtongyu.com/pages/input/)