--email.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用email</title>
<link href="email.css" rel="stylesheet" type="text/css">
</head>
<body>
<form id="frmTmp">
<fieldset>
<legend>请输入合法的邮件地址:</legend>
<input name="txtEmail" type="email"
class="inputtxt" multiple="true">
<input name="frmSubmit" type="submit"
class="inputbtn" value="提交">
</fieldset>
</form>
</body>
</html>
emial.css
@charset "utf-8";
/* CSS Document */
body {
font-size:12px
}
.inputbtn {
border:solid 1px #ccc;
background-color:#eee;
line-height:18px;
font-size:12px
}
.inputtxt {
border:solid 1px #ccc;
padding:3px;
line-height:18px;
font-size:12px;
width:160px
}
fieldset{
padding:10px;
width:280px;
float:left
}
/* 实例4增加样式 */
#spnColor{
width:150px;
float:left
}
#spnPrev{
width:100px;
height:70px;
border:solid 1px #ccc;
float:right
}
#pColor{
font-weight:bold;
clear:both;
text-align:center
}
p{
clear:both;
padding:0px;
margin:8px;
}
.p_center{
text-align:center
}
.p_color{
color:#666
}
--url .html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用url类型</title>
<link href="url.css" rel="stylesheet" type="text/css">
</head>
<body>
<form id="frmTmp">
<fieldset>
<legend>请输入网址:</legend>
<input name="txtUrl" type="url"
class="inputtxt" />
<input name="frmSubmit" type="submit"
class="inputbtn" value="提交" />
</fieldset>
</form>
</body>
</html>
--born.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用number类型</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<form id="frmTmp">
<fieldset>
<legend>输入您的出生时间:</legend>
<input name="txtYear" type="number"
class="inputtxt" min="1960" max="1990"
step="1" value="1990" />年
<input name="txtMonth" type="number"
class="inputtxt" min="1" max="12"
step="1" value="4"/>月
<input name="txtDay" type="number"
class="inputtxt" min="1" max="31"
step="1" value="23"/>日
<input name="frmSubmit" type="submit"
class="inputbtn" value="提交" />
</fieldset>
</form>
</body>
</html>
--time.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择日期</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<form id="frmTmp">
<fieldset>
<legend>日期+时间类型:</legend>
<input name="txtDate_1" type="date"
class="inputtxt">
<input name="txtDate_2" type="time"
class="inputtxt">
</fieldset>
<fieldset>
<legend>月份+星期类型:</legend>
<input name="txtDate_3" type="month"
class="inputtxt">
<input name="txtDate_4" type="week"
class="inputtxt">
</fieldset>
<fieldset>
<legend>日期+时间型:</legend>
<input name="txtDate_5" type="datetime"
class="inputtxt">
<input name="txtDate_6" type="datetime-local"
class="inputtxt">
</fieldset>
</form>
</body>
</html>
--required.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用input元素</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<form id="frmTmp">
<fieldset>
<legend>属性required</legend>
姓名:
<input name="txtUserName" type="text"
class="inputtxt" required />
<input name="frmSubmit" type="submit"
class="inputbtn" value="提交" />
</fieldset>
</form>
</body>
</html>
--form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用placeholder属性</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<form action="123.asp" method="get" autocomplete="on">
姓:<input type="text" name="fname" /><br />
名: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
<p>请填写并提交此表单,然后重载页面,来查看自动完成功能是如何工作的。</p>
<p>请注意,表单的自动完成功能是打开的,而 E-mail 域是关闭的。</p>
</body>
</html>
--file.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<form action="demo_form.asp" method="get">
Select images: <br/>
<input type="file" name="img" multiple="multiple" /><br/>
<input type="submit" />
</form>
<p>当您浏览文件时,请试着选择多个文件。</p>
</body>
</html>