菜鸟-创作你的创作

Html获取登陆用户名的示例代码

lichongyang

在 HTML 中，获取登录用户名的操作通常依赖于一个表单，用户输入其用户名后，提交表单。你可以使用 JavaScript 来获取输入框中的用户名。下面是一个简单的示例，演示如何创建一个登录表单并获取用户输入的用户名。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取登录用户名</title>
    <script>
        // 提交表单并获取用户名
        function getUsername() {
            // 获取用户名输入框的值
            var username = document.getElementById('username').value;
            
            // 显示输入的用户名
            alert('用户名是: ' + username);
        }
    </script>
</head>
<body>
    <h2>登录表单</h2>
    <form onsubmit="event.preventDefault(); getUsername();">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required><br><br>

        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required><br><br>

        <button type="submit">登录</button>
    </form>
</body>
</html>

解释：

  1. 表单结构：
    • 创建了一个简单的登录表单，包含用户名（<input type="text" id="username">）和密码（<input type="password" id="password">）字段。
    • 用户点击 “登录” 按钮时，表单将被提交。
  2. 获取用户名：
    • 在 JavaScript 中，document.getElementById('username').value 获取了用户名输入框的值。
    • 使用 alert() 显示获取到的用户名。
  3. 阻止表单默认提交行为：
    • 使用 onsubmit="event.preventDefault(); getUsername();" 来阻止表单的默认提交行为，而是调用 getUsername() 函数来处理用户输入的用户名。

示例解释：

进一步改进：

退出移动版