HTML登錄界面的制作是Web開發中的一個基礎部分,下面是一個簡單的登錄界面的代碼示例:
<!DOCTYPE html> <html> <head> <title>登錄</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-color: #f2f2f2; } h1 { text-align: center; color: #4CAF50; } .login-box { width: 300px; margin: 50px auto; background-color: #fff; padding: 20px; } input[type="text"], input[type="password"] { width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type="submit"] { width: 100%; background-color: #4CAF50; color: #fff; padding: 10px; border: none; border-radius: 4px; cursor: pointer; } </style> </head> <body> <h1>登錄</h1> <div class="login-box"> <form action=""> <label>用戶名</label> <input type="text" name="username" required> <label>密碼</label> <input type="password" name="password" required> <input type="submit" value="登錄"> </form> </div> </body> </html>
以上代碼中,頁面使用了HTML5的DOCTYPE聲明,指定了頁面的編碼和視口等基本設置,并設置了一些基本的樣式,包括背景色、標題、輸入框等等。其中,用戶名和密碼的輸入框設置了“required”屬性,表示該項為必填項。登錄按鈕使用了submit類型的按鈕,并設置了一個action屬性,用于提交表單至后臺進行驗證。