html 5 表单新特性

最新推荐文章于 2024-09-13 11:02:21 发布

zhangying--

最新推荐文章于 2024-09-13 11:02:21 发布

阅读量461

点赞数

分类专栏： html5 文章标签： html5 form

本文链接：https://blog.csdn.net/u012337009/article/details/45271061

版权

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

用h5 新表单特性写了一个form表单。支持性来说。chrom 支持的最好。datalist可以完全显示出来。firefox能展示出一半。ie11 就不行了。表单校验的属性很棒。很方便。原生的validate就很好用。

如果要写自己的校验样式。要先禁用浏览器默认的校验行为。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Form</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
	<header>html 5 表单实例 </header>
	<div id='container'>
	    <form id='register'>
			<p>
				<label for='runnerName'>name：</label>
				<input type='text' name='runnerName' id='runnerName' placeholder="填写姓名" required/>	  	
			</p>
			<p>
				<label for='phone'>tel:</label>
				<input type='tel' name='phone' id='phone' placeholder='(xxx)xxx-xxx-xxx' />
			</p>
			<p>
				<label for='addressemail'>addressemail:</label>
				<input type='email' name='addressemail' id='addressemail' placeholder='123@sina.cn' />				
			</p>
			<p>
				<label for='dob'>dob:</label>
				<input name='dob' id='dob' type='date' />
			</p>

			<fieldset>
				<legend>T-shirt Size</legend>
				<p><input type='radio' name='size' id='s' />
				<label for='s'>s</label></p>
				<p><input type='radio' name='size' id='m'/>
				<label for='m'>m</label></p>
				<p><input type="radio" name='size' id='l'>
				<label for='l'>l</label></p>
			</fieldset>
			
			<p>	
				<label for='style'> T-shirt style</label>
				<input name='style' id='style' type='text' list='stylelist' title='由下拉列表选取衣服风格' >	
				<datalist id='stylelist'>
					<option value='white' label='1st Year'>
					<option value='Gray' label='2st~4st Year'>
					<option value='Navy' label='5st Year'>
				</datalist>
			</p>

			<fieldset>
				<legend>Exception:</legend>
				<p><label for='confidence'>Confidence:</label>
				<input type='range' name='level' id='confidence' οnchange="confidenceDisplay.value=(value+'%')" value='0' max='100' min='0' step='10'></p>
				<output id='confidenceDisplay'></output>
			</fieldset>
			<p>
				<input type='submit' value='submit'/>
			</p>
	    </form>
    </div>
    <script>
    		function invalidHandler(evt){
    			var label=evt.target.parentElement.getElementsByTagName('label')[0];
    			var validity=evt.target.validity;
    			alert(evt.target);
    			alert(evt.srcElement);
    			console.log(validity.valueMissing);
    			if(validity.valueMissing){
    				evt.target.setCustomValidity('error');
    				//alert('error');
    			}else{
    				evt.target.setCustomValidity('');    				
    			}
    			console.log(evt.target);
    		
    			label.style.color='red';
    			evt.stopPropagation();//阻止事件冒泡
    			//evt.preventDefault();
    		}
    		window.οnlοad=function(){
    			var register=document.getElementById('register');
    			register.addEventListener('invalid',invalidHandler,true);
    			
    		}
    </script>
</body>
</html>