Add form
电子邮件：<input type="email" name="email"/> // 输入内容必须有@符号，@后面必须有内容
搜索框：<input type="search" name="search"/>
url：<input type="url" name="url"/> // 必须包含http: 或者https:
电话号码：<input type="tel" name="tel"/> // 目前只能在移动端查看验证效果
数字：<input type="number" name="num" step="5" min="5" max="50"/> // 只能输入数字 ，会有步长，默认步长为1
color： <input type="color" name="color"/>
range：<input type="range" name="range" min="0" max="10" step="2" value="10"/>
date：<input type="week" name="week"/>
week：<input type="week" name="week"/>
time：<input type="time" name="time"/> // date,week,time,datetime,datetime-local
1. Homemade color palette
效果图
实现方式
<div id="mycolor"></div>
R(红色):<input type="range" min="0" max="255" oninput="mychange()"/><br />
G(绿色):<input type="range" min="0" max="255" oninput="mychange()"/><br />
B(蓝色):<input type="range" min="0" max="255" oninput="mychange()"/><br />
<!--<input type="range" min="0" max="10" />-->
<p id="colorNUM"></p>
<script>
function mychange(){
var ranges = document.getElementsByTagName("input");
var arr = [];
for(var i = 0;i<ranges.length;i++){
var ran = ranges[i];
arr[i] = ran.value;
}
document.getElementById("mycolor").style.backgroundColor = "rgb("+ arr[0] +","+ arr[1] +","+ arr[2] +")"
document.getElementById("colorNUM").innerHTML = "rgb("+ arr[0] +","+ arr[1] +","+ arr[2] +")"
}
</script>
2. H5 drop-down box
/**
* 创建页面元素
* list属性----<datalist>元素的id
* 类似于模糊查询
*/
<datalist id="mylist">
<option>AB</option>
<option>AC</option>
<option>AD</option>
<option>BC</option>
</datalist>
<input type="text" list="mylist" id="inp"/>
Four, H5 dynamic progress bar
/**
* 正在进行下载：
* 于js一同使用可以用来显示当前下载的任务进度
* max:可以规定一共需要完成多少任务 默认为1
* value:规定已经完成了多少任务
*/
<progress value="0" max="100"></progress> // 进度条静态样式
<script>
function mychange(){
var progress = document.getElementsByTagName("progress")[0];
var value = progress.value;
if(value < 100){
value ++
}else{
value = 0
}
progress.value= value;
}
setInterval(mychange,100)
3. H5 form verification
<form action="" method="get">
// 验证必须填写内容，boolean text,search,url,psd....
<input type="text" required="required" maxlength="9" minlength = "3"/>
// pattern 省略 ^ $
<input type="tel" pattern="1[3578]\d{9}"/>
// 是否可以输入多个值，使用逗号隔开
<input type="email" multiple="multiple" name="ema"/>
<input type="image" width="100" height="20" src="img/fenlin.jpg" />
</form>
4. H5 form properties
// 占位符：起提示的作用
<input type="text" placeholder="请输入什么什么东西" />
// 属性规定在页面加载时，自动获取焦点，但是一个页面只会有一个起作用，先设置的起作用
<input type="text" autofocus="true" />
// 让元素可编辑,用的很少,有兼容性问题，可继承，只要在元素中就一定会继承
<div contenteditable="true">
divTXT divTXT divTXT
<span contenteditable="false">spanTXT spanTXT spanTXT</span>
</div>
~~~~~~~~~~~~~~~~~~~ END ~~~~~~~~~~~~~~~~~~~
