今天學了H5新增的表單屬性，知道如何用新增的那些屬性（如form、placeholder）製作一個建議的登陸介面。

首先，在form中用input寫一個文字框。關鍵程式碼如下：

<form method="post">
	使用者名稱：<input type="text" name="name" ><br/></br>
	
	</form>

網頁效果如下：

再用同樣的方法，寫一個密碼的文字框。

密碼:<input type="password" name="name" ></br>

（注：type設定為“password”，在文字框輸入資料的時候會自動隱藏，變成到這不可見的密碼）

效果如下：

然後再新增兩個按鈕，分別為“登入”“忘記密碼”，關鍵程式碼如下：

<input type="submit" value="登入" formaction="regist"/>
	<input type="submit" value="忘記祕密" formaction="login"/>

（注，input type需要設定為submit，而formation屬性則是用於動態地提交表單給URL）

到這裡登入介面大致就完成了，但是和一般的登陸介面比較一下還是缺少點東西。可以通過autofocus使第一個文字框自動獲得焦點。即在input中寫入一個autofocus即可。此外，一般的登陸介面文字框都有提示語，因此可以用placeholder為文字框加入提示語。

使用者名稱：<input type="text" name="name" placeholder="請輸入使用者名稱" list="names" autofocus><br/></br>
	密碼:<input type="password" name="name" placeholder="請輸入密碼"></br></br>

效果如下：

除此之外，一般的登陸介面在登入介面的時候，如果是常登入使用者，在輸入使用者名稱的時候會自動出現登入過的使用者。這個功能可以通過list出現。關鍵程式碼如下：

使用者名稱：<input type="text" name="name" placeholder="請輸入使用者名稱" list="names" autofocus><br/></br>
	密碼:<input type="password" name="name" placeholder="請輸入密碼"></br></br>
	<input type="submit" value="登入" formaction="regist"/>
	<input type="submit" value="忘記祕密" formaction="login"/>


	</form>
	<datalist id="names">
		<option value="yongshengdadi">yongshengdadi</option>
		<option value="mingzi">mingzi</option>
		<option value="zhanghao">zhanghao</option>
 

測試效果如下：

以上就是簡易登入介面的製作方法。如果大家有更好的優化建議，歡迎大家留言評論呀。