HTML5編寫登錄頁面代碼 HTML5作為一種新的Web語言，已經得到了廣泛的應用和發展。在Web開發中，登錄頁面是必不可少的一個應用場景。下面我們來看一下如何使用HTML5編寫一個簡單的登錄頁面。 首先，我們需要在HTML文檔中定義一個表單元素。表單是HTML中用于收集用戶信息的一種元素，可以通過表單實現登錄、注冊等功能。代碼如下所示：

<form id="login-form" action="login.php" method="post">
<p>
<label for="username">用戶名：</label>
<input type="text" id="username" name="username">
</p>
<p>
<label for="password">密碼：</label>
<input type="password" id="password" name="password">
</p>
<p>
<input type="submit" value="登錄">
</p>
</form>

上述代碼中，我們定義了一個id為“login-form”的表單元素，它的action屬性指向了login.php頁面，method屬性為post，即我們通過POST方法提交表單。表單中包含了兩個輸入框，分別用于輸入用戶名和密碼，以及一個提交按鈕。 為了讓用戶在輸入框中輸入信息時更加方便，我們可以使用HTML5提供的一些新的表單元素屬性。例如，我們可以使用placeholder屬性來為輸入框提供默認提示信息，如下所示：

<p>
<label for="username">用戶名：</label>
<input type="text" id="username" name="username" placeholder="請輸入用戶名">
</p>

另外，我們還可以使用required屬性來指定某個輸入框為必填項，如果用戶沒有輸入，則提交表單時會進行提示。代碼如下所示：

<p>
<label for="username">用戶名：</label>
<input type="text" id="username" name="username" placeholder="請輸入用戶名" required>
</p>

最后，我們可以在CSS樣式中為表單元素進行美化，以達到更好的用戶體驗。例如，我們可以使用CSS中的box-shadow屬性為輸入框添加投影效果，代碼如下所示：

input[type="text"], input[type="password"] {
border: 1px solid #ccc;
padding: 5px;
box-shadow: 0px 0px 5px #ccc;
}

通過上述代碼，我們使用HTML5簡單地編寫了一個登錄頁面，提供了一些新的表單元素屬性，并在CSS中進行了基本的美化。這樣的代碼可以幫助我們實現更加簡潔、美觀、易用的登錄頁面。