zong.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无标题文档</title>
</head>
<body>
<form action="Myform.php" id='Myform' method='post'>
邮箱:<input type="email" id='email' required="required" autofocus="autofocus" /><br/>
日期:<input type="date" id='date' /><br/>
时间:<input type="time" id='time' /><br/>
数字:<input type="number" id='number' /><br/>
月份:<input type="month" id='month' /><br/>
星期:<input type="week" id='week'/><br/>
range:<input type="range" id='range' /><br/>
search:<input type="search" id='search'/><br/>
颜色:<input type="color" id='color' /><br/>
<input type="text" name="auto" value="" list="movie"/>
<datalist id="movie">
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</datalist>
<input type="submit" value="提交"/>
</form>
url:<input type="url" id='url' required="required" name="url" form="Myform" /><br/>
用户名:<input type="text" required="required" placeholder="请输入用户名" form="Myform" pattern='\w{5}'/>
</body>
</html>
--select.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无标题文档</title>
</head>
<body>
<label>Select your preferred code editor:</label>
<input type="text" id="txt_ide" list="ide" />
<datalist id="ide">
<option value="Brackets" />
<option value="Coda" />
<option value="Dreamweaver" />
<option value="Espresso" />
<option value="jEdit" />
<option value="Komodo Edit" />
<option value="Notepad++" />
<option value="Sublime Text 2" />
<option value="Text Pad" />
</datalist>
</body>
</html>