利用html5表单标签实现如下智能表单

利用html5表单标签实现如下智能表单

html:

<div id="box">
<form action="" method="post">
	<!--fieldset 作用：组合表单中的相关元素-->
	<fieldset>
		<legend>表单属性</legend>
	<p>
		email: <br />
		<input type="email" name="email" id="email" class="myinput" />
	</p>
	<p>
		url: <br />
		<input type="url" name="url" id="url" class="myinput"/>
	</p>
	<p>
		number: <br />
		<input type="number" name="" id="" class="myinput" />
	</p>
	<p>
		tel: <br />
		<input type="tel" name="" id="" class="myinput" />
	</p>
	<p>
		search: <br />
		<input type="search" name="" id="" class="myinput" />
	</p>
	<p>
		range: <br />
		<input type="range" name="" id="" class="myinput" />
	</p>
	<p>
		color: <br />
		<input type="color" name="" id="" class="myinput" />
	</p>
	<p>
		time: <br />
		<input type="time" name="" id="" class="myinput" />
	</p>
	<p>
		date: <br />
		<input type="date" name="" id="" class="myinput" />
	</p>
	<p>
		month: <br />
		<input type="month" name="" id="" class="myinput" />
	</p>
	<p>
		week: <br />
		<input type="week" name="" id="" class="myinput" />
	</p>
	<input type="submit" value="提交" class="input"/>
</fieldset>
</form>
</div>

css:

<style type="text/css">
	#box{
		width: 790px;
		height: 700px;
		margin: 0 auto;
	}
	.myinput{
		width: 790px;
		height: 23px;
		line-height: 23px;
		margin-top: 5px;
	}
	.input{
		width: 790px;
		height: 23px;
		line-height: 23px;
	}
</style>