<!DOCTYPE html>
<html>
<head>
<title>name</title>
</head>
<body>
<form action="#" method="get">
<p>姓名：<input type="text" name="UserName" placeholder="請輸入姓名" autofocus autocomplete required /></p>
<p>密碼：<input type="password" name="Pwd" accesskey="s" /></p>
<p>性別：<input type="radio" name="sex" />男<input type="radio" name="sex" />女</p>
<p>愛好：
<input type="checkbox" name="hobby" />足球
<input type="checkbox" name="hobby" />籃球
<input type="checkbox" name="hobby" />乒乓球
<input type="checkbox" name="hobby" />橄欖球
</p>
<p><input type="file" name="InputFile" multiple></p>
<p>
<!-- HTML5中的新屬性 -->
郵件：<input type="email" name="email" /><br />
電話：<input type="tel" name="tel"><br /><br />
網址：<input type="url" name="url"><br /><br />
數字：<input type="number" name="number" /><br />
搜索：<input type="search" name="search" /><br />
拖動：<input type="range" name="range" /><br />
時間：<input type="time" name="time" /><br />
日期：<input type="date" name="date" /><br />
時期：<input type="datetime" name="datetime" /><br />
月份：<input type="month" name="month" /><br />
星期：<input type="week" name="week" /><br />
</p>
<p><input type="submit" name="" /></p>
</form>
</body>
</html>
階段總結：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>學生檔案</title>
</head>
<body>
<form action="#" name="StuInfo">
<fieldset>
<legend>學生檔案</legend>
<p>姓名：<input type="text" name="UserName" placeholder="請輸入學生名字" autofocus /></p>
<p>手機：<input type="tel" name="tel" /></p>
<p>郵箱：<input type="email" name="email"></p>
<p>
學院：
<select>
<option selected="selected">信工院</option>
<option>化工院</option>
<option>新聞院</option>
<option>機械院</option>
</select>
</p>
<p>
就業：
<input type="text" list="career" />
<datalist id="career">
<option>PHP</option>
<option>JAVA</option>
<option>JAVASCRIPT</option>
<option>Linux</option>
</datalist>
</p>
<p>出生日期：<input type="date" name="date" /></p>
<p>成績：<input type="number" name="chengji" /></p>
<p>畢業時間：<input type="datetime" name="biyeshijian" /></p>
<input type="submit" name="submit" />
</fieldset>
</form>
</body>
</html>
label標籤：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Label標籤</title>
</head>
<body>
<h3>label標籤的使用</h3>
<!-- 未使用label標籤時，點擊“輸入賬號”，沒有反應，需要鼠標點擊輸入框才能開始輸入內容 -->
輸入賬號：<input type="text" /><br />
<!-- 用來label直接進行包裹之後，點擊“輸入賬號”，就可以輸入內容 -->
<label>輸入賬號：<input type="text" /></label><br />
<!-- 如果label裏面有多個標籤，可以通過for id的格式來進行,下例就是定位到輸入密碼 -->
<label for="password">
輸入賬號：<input type="text" id="UserName" />
輸入密碼：<input type="password" id="password" />
</label>
</body>
</html>
媒體標籤：
audio標籤：
video標籤：注意三個屬性，autoplay，controls，loop；
embed標籤：媒體播放標籤；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多媒體標籤</title>
</head>
<body>
<iframe height=498 width=510 src='http://player.youku.com/embed/XNDA4MTExMDY3Mg==' frameborder=0 'allowfullscreen'></iframe>
<br /><br /><br /><br />
<embed src='http://player.youku.com/player.php/sid/XNDA4MTExMDY3Mg==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>
<br /><br /><br /><br />
http://player.youku.com/player.php/sid/XNDA4MTExMDY3Mg==/v.swf
</body>
</html>