2020-02-14(H5新增表单及属性选择器)

更多的type类型

-image （非H5，5%）

<input type="image" src="图片地址" alt="代替图片的文字" />

• email 邮箱验证

 <input type="email" />

提交的时候自动做邮箱验证

• 必须有 @ 这个符号
• 必须要输入@后面的内容，例如 qq.com

tel 电话

 <input type="tel" />

移动端点击，弹出的键盘 只显示数字
因为世界各地对于 电话号码的格式 非常的不统一，所以并没有验证

search 搜索

 <input type="search" />

有个可以删除内容的 x

-url 网站地址 （不常用）

 <input type="url" />

• 验证网址输入是否正确，但不检测是否真实存在
• 需要带有http 或 https

color 颜色 （不常用）

<input type="color" />

可以在页面中设置 选取颜色表单（案列：换肤）

range 数值选取器 （不常用）

 <input type="range" min="0" max="100"  step="10"  value="0"/>

• min 最小值，默认 0
• max 最大值，默认 100
• step 移动一次的数值，默认 1
• value 停止滑块时候的值，默认 0
• 滑块初始位置居中

number 数字（不常用）

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

• min最小值
• max 最大值
• step 控制每次点击，数值的加减量，默认为 1

日期时间表单（不常用）

• datetime-local 显示完整 - 年 月 日 时 分

<input type="datetime-local" />

• date 显示 - 年 月 日

<input type="date">

• month 显示 - 年 月

 <input type="month" />

• week 显示 - 年 周

 <input type="week" />

• time 显示 - 时 分

 <input type="time" />

更多功能的菜单

• datalist 定义可能出现的值，和list配合使用（不常用）

 <input list="browsers" type=”text”>
 <datalist id="browsers">
     <option>Firefox</option>
     <option>Chrome</option>
     <option>Opera</option>
 </datalist>

将 datalist 的 id 绑定给 input 的 list
option 或 option的value值，为可能出现的列表项

progress 进度条（不常用）

<progress max="100" value="10"></progress>

• max 最大值，默认 1
• value 设置当前进度位置

更多表单设置

• placeholder - 提示信息，不会成为value内容

<input type="text" placeholder="请输入密码" />

• autocomplete - 是否记录用户输入过的内容（不常用）

 <input type="text" name="one"  autocomplete="off" />

	- on 开启
	- off 关闭          
	注意：要添加 name（结合提交表单使用）

contenteditable 定义内容是否可编辑 （不常用）

<p contenteditable="true">这是内容</p>

• true 允许编辑

• false 不允许编辑

• pattern 添加正则验证

<input type="tel" pattern="^1[3456]\d{9}$" placeholder="请输入一个手机号" />

• ^ 开头 1
• [3456] 允许是 3 4 5 6 中的任意值
• \d 匹配数字
• {9}$ 匹配9个数字结尾

formaction 新增提交地址，不依靠 form上面的 action

<input type="submit" formaction="https://www.baidu.com" />

• formnovalidate 取消验证

<input type="submit" formaction="https://www.baidu.com"  formnovalidate>

required 必填项

  <input type="text" required>

autofocus 自动获取光标

  <input type="text" autofocus>

readonly 只读

<input type="text" value="开课吧" readonly>

disabled 禁用

 <input type="submit" disabled>

表单伪类

• :enabled 可用表单

 input:enabled{
   background: pink;
}

• :disbaled禁用表单

 input:disabled{
   background: #666;
}

placeholder 伪类

  input::-webkit-input-placeholder{
		color: #000;
	}（谷歌）
	input::-moz-placeholder{
    		color: red;
	}（火狐）
	input:-ms-input-placeholder{
    		color: #000;
	} （ie）

注意：使用的时候一定要注意，以上的兼容方案，每个写法都不一样

属性选择器

• 选择器[属性]

 div[kkb]{}

标签带有 kkb这个属性的都会被选中，并添加 {}内样式

选择器[属性=“属性值”]

div[kkb="hello"]{}

标签带有 kkb="hello"这个属性的都会被选中，并添加 {}内样式

选择器[属性~=“属性值”]

           div[kkb~="hello"]{}
		<div kkb="hello world"></div>

标签带有 kkb=“hello”，其中hello是词列表中的一个

选择器[属性~=“属性值”]
div[kkb^=“hello”]{}

标签带有 kkb=“hello”，其中以 hello开头

选择器[属性$=“hello”]

 div[kkb$="hello"]{}

标签带有 kkb=“hello”，其中以 hello结尾

选择器[属性=“属性值”]*

div[kkb*="hello"]{}
 <div kkb="wohellorld"></div>

标签带有 kkb=“hello”，其中包含 hello
选择器[属性|=“属性值”]

 div[kkb|="hello"]{}
 <div kkb="hello-word"></div>

标签带有 kkb=“hello”，其中以 hello-开头