今天我們來學(xué)習(xí)如何使用HTML5創(chuàng)建一個簡單的登錄界面。以下是我們所需的HTML代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登錄頁面</title> <link rel="stylesheet" href="style.css"> </head> <body> <form> <label for="username">用戶名:</label> <input type="text" id="username" name="username"> <label for="password">密碼:</label> <input type="password" id="password" name="password"> <input type="submit" value="登錄"> </form> </body> </html>
我們使用了HTML5的表單標(biāo)記<form>，以及用戶名和密碼輸入框的標(biāo)簽<input>。我們?yōu)槊總€輸入框添加了一個id和name屬性，以方便后端處理表單數(shù)據(jù)。通過<label>標(biāo)簽，我們可以為每個輸入框添加文字說明。
為了美化界面，我們添加了外部樣式表，具體內(nèi)容見下：
form {
width: 300px;
margin: 0 auto;
}
label, input {
display: block;
margin-top: 10px;
}
input[type=submit] {
margin-top: 20px;
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}在樣式表中，我們設(shè)置了表單的寬度、外邊距以及各元素的排列方式。最后我們?yōu)榈卿洶粹o添加了樣式，以讓它具有點擊效果。
這就是一個簡單的HTML5登錄界面的全部代碼。無需編寫JavaScript代碼，這段HTML代碼就可以直接應(yīng)用于您的網(wǎng)站上。