html5中新表单标签的使用

html5表单标签

html5中新增了很多表单属性，例如：date、number、color等等.
使用效果如下：

head部分

<script src="lib/jquery/jquery-3.4.1.min.js"></script>
	<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
	<!-- IE低版本浏览器兼容HTML5 -->
	<!--if lte ie 8>
	    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
	<![endif]-->
	<style>
	.wrap {
		margin: 50px auto;
		width: 700px;
		height: auto;
		padding: 10px;
		border: 1px solid #eee;
	}
</style>

body部分

<div class="wrap">
		<form action="post" class="form-horizontal">
			<div class="form-group">
				<label for="inp1" class="col-md-2 control-label">姓名：</label>
				<div class="col-md-10">
					<input type="text" class="form-control" id="inp1">
				</div>
			</div>
			<div class="form-group">
				<label for="inp2" class="col-md-2 control-label">邮箱：</label>
				<div class="col-md-10">
					<input type="email" class="form-control" id="inp2">
				</div>
			</div>
			<div class="form-group">
				<label for="inp3" class="col-md-2 control-label">年龄：</label>
				<div class="col-md-10">
					<input type="number" class="form-control" id="inp3">
				</div>
			</div>
			<div class="form-group">
				<label for="inp4" class="col-md-2 control-label">颜色：</label>
				<div class="col-md-10">
					<input type="color" class="form-control" id="inp4">
				</div>
			</div>
			<div class="form-group">
				<label for="inp5" class="col-md-2 control-label">日期：</label>
				<div class="col-md-10">
					<input type="date" class="form-control" id="inp5">
				</div>
			</div>
			<div class="form-group">
				<label for="inp7" class="col-md-2 control-label">月份：</label>
				<div class="col-md-10">
					<input type="month" class="form-control" id="inp7">
				</div>
			</div>
			<div class="form-group">
				<label for="inp8" class="col-md-2 control-label">星期：</label>
				<div class="col-md-10">
					<input type="week" class="form-control" id="inp8">
				</div>
			</div>
			<div class="form-group">
				<label for="inp9" class="col-md-2 control-label">数据列表标签：</label>
				<div class="col-md-10">
					<input type="text" class="form-control" id="inp1" list = "car">
					<datalist id="car">
						<option>1</option>
						<option>2</option>
						<option>3</option>
					</datalist>
				</div>
			</div>
			<div class="form-group">
				<label for="inp10" class="col-md-2 control-label"></label>
				<div class="col-md-8">
					<input type="submit" class="form-control btn btn-primary" id="inp10" value="提交">
				</div>
				<div class="col-md-2"></div>
			</div>
		</form>
	</div>

有一个datalist效果很好：

<input type="text" list = "car">
<datalist id="car">
	<option>1</option>
	<option>2</option>
	<option>3</option>
</datalist>

效果如下：