H5的新增表单怎么玩？

新增表单

	电子邮件：<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. 自制调色器

效果图

实现方式

	<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 下拉框

		/** 
		 *  创建页面元素
		 *		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"/>

四、H5 动态进度条

	/**
	 *	正在进行下载：
	 *		于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 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 表单属性

	// 占位符：起提示的作用
	<input type="text" placeholder="请输入什么什么东西" />
	// 属性规定在页面加载时，自动获取焦点，但是一个页面只会有一个起作用，先设置的起作用
	<input type="text" autofocus="true" />
	// 让元素可编辑,用的很少,有兼容性问题，可继承，只要在元素中就一定会继承
	<div contenteditable="true">
		divTXT divTXT divTXT 
		<span contenteditable="false">spanTXT spanTXT spanTXT</span>
	</div>

~~~~~~~~~~~~~~~~~~~ END ~~~~~~~~~~~~~~~~~~~