如何从HTML获取输入值并提交？新手Web开发者求助登录功能实现

1. 登录页面代码 #

先写一个包含用户名、密码输入框和登录按钮的表单，通过JavaScript监听提交事件获取输入值：

<!-- login.html -->
<form id="loginForm">
  <div>
    <label>用户名：</label>
    <input type="text" id="usernameInput" required>
  </div>
  <div>
    <label>密码：</label>
    <input type="password" id="passwordInput" required>
  </div>
  <button type="submit">登录</button>
</form>

<script>
document.getElementById('loginForm').addEventListener('submit', function(e) {
  // 阻止表单默认提交行为
  e.preventDefault();
  
  // 获取输入框的值
  const username = document.getElementById('usernameInput').value;
  const password = document.getElementById('passwordInput').value;
  
  // 新手可以先做简单校验，比如确保输入不为空
  if (username && password) {
    // 把用户名存在本地临时存储，方便首页读取
    sessionStorage.setItem('currentUser', username);
    // 跳转到首页
    window.location.href = 'index.html';
  }
});
</script>

2. 首页代码 #

首页读取存储的用户名，显示欢迎语：

<!-- index.html -->
<div id="welcomeMsg"></div>

<script>
// 从本地存储获取用户名
const username = sessionStorage.getItem('currentUser');
if (username) {
  document.getElementById('welcomeMsg').textContent = `Hello ${username}，欢迎您！`;
} else {
  // 如果未登录，自动跳回登录页
  window.location.href = 'login.html';
}
</script>

关键说明 #

• 获取输入框值的核心是document.getElementById('元素ID').value，普通输入框、密码框都适用
• sessionStorage是临时存储，关闭浏览器后数据会消失；如果需要长期保存用户状态，可以换成localStorage
• 实际项目中要补充密码验证逻辑（比如和后端接口交互校验），以上是最基础的前端实现流程

内容的提问来源于stack exchange，提问作者ignacy