从0开始学前端 第三十三课：表单与输入事件

第三十三课：表单与输入事件

学习目标

在本课中，你将学习：

1. 常见的HTML表单元素和它们的用途。
2. 如何获取和设置表单输入的值。
3. 如何处理表单相关的事件，如submit、change和input。

学习内容

1. 表单元素

HTML表单元素用于收集用户输入，常见的表单元素包括<input>、<textarea>、<button>、<select>等。

代码示例:

<form id="myForm">
  <input type="text" id="name" name="name">
  <input type="email" id="email" name="email">
  <input type="submit" value="提交">
</form>

2. 获取和设置输入值

可以使用JavaScript来获取或设置用户在表单元素中输入的值。

代码示例:

// 获取输入值
var nameInput = document.getElementById('name');
var userName = nameInput.value;

// 设置输入值
nameInput.value = '张三';

3. 处理表单事件

• submit: 当表单被提交时触发。
• change: 当表单中的元素值发生变化时触发。
• input: 当<input>、<textarea>元素的值正在发生变化时触发。

代码示例:

// 处理表单提交事件
var form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  console.log('表单提交了！');
});

// 处理输入值变化事件
var emailInput = document.getElementById('email');
emailInput.addEventListener('change', function() {
  console.log('邮箱地址改变为：' + emailInput.value);
});

// 处理实时输入事件
nameInput.addEventListener('input', function() {
  console.log('姓名输入中：' + nameInput.value);
});

课后练习

1. 创建一个包含姓名、电子邮件和提交按钮的表单。使用JavaScript编写事件处理程序，当表单提交时，防止其默认行为，并在控制台输出输入的姓名和电子邮件。
2. 对于同一表单，添加一个新的密码输入字段，并为它添加input事件监听器，以便在用户输入密码时，验证密码长度是否超过8个字符。如果不足，显示一个提示信息。

练习解析:

练习1:

<form id="myForm">
  <input type="text" id="name" name="name" placeholder="姓名">
  <input type="email" id="email" name="email" placeholder="电子邮件">
  <input type="submit" value="提交">
</form>

<script>
  document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 防止表单默认提交行为
    var name = document.getElementById('name').value;
    var email = document.getElementById('email').value;
    console.log('姓名：' + name + ', 电子邮件：' + email);
  });
</script>

练习2:

<form id="myForm">
  <!-- 其他输入元素 -->
  <input type="password" id="password" name="password" placeholder="密码">
</form>
<div id="passwordHint"></div>

<script>
  document.getElementById('password').addEventListener('input', function(event) {
    var passwordValue = event.target.value;
    var hint = '';
    if (passwordValue.length < 8) {
      hint = '密码长度必须大于8个字符';
    }
    document.getElementById('passwordHint').textContent = hint;
  });
</script>

通过这些练习，你将能够了解如何处理用户输入和表单事件，这是创建交互式网页应用时不可或缺的技能。

---

章节目录
第三十四课：动态内容与渲染性能