前端入门：从写个登录页开始

很多人第一次听说“前端”，是在想做个网站的时候。其实前端没那么玄乎，它就是你打开网页时看到的一切——按钮、文字、图片、动画，都是前端的活儿。

一个真实的场景

比如你想做个登录页面，输入账号密码点登录。这事儿看起来简单，但背后前端得处理不少细节。先写个基本结构：

<form id="loginForm">
  <div>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>
  </div>
  <div>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
  </div>
  <button type="submit">登录</button>
</form>

这个表单能收集数据，但用户输错了也不会提醒，点登录后页面还整个刷新。体验不好，这时候就得加点 JavaScript。

让页面动起来

用几行 JS 阻止默认提交，做点简单验证：

document.getElementById('loginForm').addEventListener('submit', function(e) {
  e.preventDefault();
  
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;

  if (!username || !password) {
    alert('请填写完整信息');
    return;
  }

  // 实际项目这里会发请求到服务器
  console.log('正在登录：', username);
});

现在页面不会乱刷新了，出错也有提示。虽然离上线还差得远，但这已经是正经的前端交互逻辑了。

别忘了样式

光功能跑通还不够，页面得看着顺眼。加点 CSS 让输入框对齐，按钮有点颜色：

input, button {
  display: block;
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  box-sizing: border-box;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

这些代码加完，一个像模像样的登录页就出来了。你可能会说，这不就是写网页吗？没错，前端最开始就是这么回事。

现在的前端开发工具多了，框架也复杂，但核心还是这三样：HTML 写结构，CSS 调样子，JavaScript 控制行为。搞懂这三块，再学 React、Vue 之类的工具才不会迷路。

很多人卡在第一步，总想着等“准备好了”再动手。其实不如现在就打开编辑器，照着改两行代码，看看浏览器怎么变。前端这东西，动手比看书快得多。