对于HTML5表单新增元素的小练习


	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>表单新增元素</title>
	<style>
	*{ padding:0; margin:0; list-style:none;}
	body{ background:#CFF; }
	ul{ width:60%; height:30rem; margin:5rem auto;background: #FF80BF; font-size:1.1rem; color:#FFF;}
	ul li{ width:90%; margin:1.5rem auto; }
	ul li label{ width:30%; float:left; }
	ul li input{ width:30%; margin-left:1%; }
	ul li span{ width:30%; margin-left:1%;}
	</style>
	</head>

	<body>
	<form>
	<ul>
	<li>
	<label for="title">Title</label>
	<input type="text" required="required" placeholder="Mister">
	</li>
	<li>
	<label for="name">Name</label>
	<input type="text" required="required" placeholder="Name">
	</li>
	<li>
	<label for="phone number">Phone number</label>
	<input type="text" required="required" placeholder="+123456">
	</li>
	<li>
	<label for="email address">Email adress</label>
	<input type="email" name="email" placeholder="[email protected]" required="required">
	</li>
	<li>
	<label for="your websit">Your websit</label>
	<input type="url" name="websit" required="required" placeholder="www.baidu.com">
	</li>
	<li>
	<label for="nr">Nr.of items to order</label>
	<input type="number" value="0">
	<span>(0-10)</span>
	</li>
	<li>
	<label for="length">Length</label>
	<input type="range" value="0">
	<span>1m(in 10cm increments)</span>
	</li>
	<li>
	<label for="date">Delivery date</label>
	<input type="date">
	<span>(minimun 16 December 2)</span>
	</li>
	<li>
	<label for="time">Time of delivery</label>
	<input type="time">
	<span>(in 30 min incremnts)</span>
	</li>
	<li>
	<label for="color">Color of the item</label>
	<input type="color" value="#0099ff">
	<span>(default blue)</span>
	</li>
	</ul>
	</form>
	</body>
	</html>

对于HTML5表单新增元素的小练习

猜你喜欢