HTML 實現郵箱登錄框下拉選擇域名功能

需求背景

網頁登錄頁面常見郵箱輸入框，為方便用戶輸入，可提供常用郵箱域名下拉選擇，用戶只需輸入用戶名即可。

完整 HTML 代碼

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>郵箱登錄</title>
</head>
<body>
    <input type="text" style="width:150px" placeholder="用戶名"><br><br>
    <select style="width:150px">
        <option selected>--請選擇域名--</option>
        <option>@163.com</option>
        <option>@126.com</option>
        <option>@sina.com</option>
        <option>@sohu.com</option>
    </select><br><br>
    <input type="password" style="width:100px" placeholder="密碼">
    <input type="button" value="登陸" style="width:50px"><br>
</body>
</html>

代碼說明

• 第一個 <input> 用於輸入郵箱用戶名。
• <select> 下拉框提供常見郵箱域名，用戶選擇後可拼接完整郵箱地址。
• 第二個 <input type="password"> 用於輸入密碼（原代碼為 text，建議改為 password 類型）。
• 按鈕觸發登錄邏輯，需配合 JavaScript 處理表單提交。

此結構簡單實用，適合快速構建登錄頁面原型。