正文

轻松学会JS表单性别选择：三步轻松实现性别输出与存储

/0 浏览量
0331

在这个数字化时代，前端开发变得越来越重要，而JavaScript（简称JS）作为前端开发的核心技术之一，其重要性不言而喻。今天，我们就来聊聊如何使用JavaScript轻松实现表单性别的输出与存储。对于初学者来说，这将会是一个简单而又实用的学习案例。

第一步：创建HTML表单

首先，我们需要一个基本的HTML表单，用于让用户选择性别。这里是一个简单的例子：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>性别选择表单</title>
</head>
<body>

<form id="genderForm">
  <label for="male">男</label>
  <input type="radio" id="male" name="gender" value="male">
  
  <label for="female">女</label>
  <input type="radio" id="female" name="gender" value="female">
  
  <button type="button" onclick="saveGender()">提交</button>
</form>

<p>您选择的性别是：<span id="displayGender"></span></p>

<script src="gender.js"></script>
</body>
</html>

在上面的代码中，我们创建了一个包含两个单选按钮的表单，用户可以选择“男”或“女”。当用户点击“提交”按钮时，将会触发一个名为saveGender的JavaScript函数。

第二步：编写JavaScript函数

接下来，我们需要编写JavaScript函数来处理用户的性别选择。这里是一个名为gender.js的文件内容：

function saveGender() {
  // 获取用户选择的性别
  var gender = document.querySelector('input[name="gender"]:checked').value;
  
  // 输出用户选择的性别
  document.getElementById('displayGender').textContent = '您选择的性别是：' + gender;
  
  // 存储性别选择到本地存储
  localStorage.setItem('userGender', gender);
}

在上面的JavaScript代码中，我们首先通过document.querySelector方法获取用户选择的性别，然后将其显示在页面上。同时，我们使用localStorage.setItem方法将用户选择的性别存储到浏览器的本地存储中。

第三步：查看结果

现在，我们已经完成了整个流程。当你打开上面的HTML文件并在浏览器中运行时，你将看到一个简单的性别选择表单。选择一个性别并点击“提交”按钮后，你将看到选择的性别显示在页面下方，并且该性别信息已经被存储在浏览器的本地存储中。

总结

通过以上三个简单的步骤，我们就可以实现一个基本的性别选择表单，并能够将其输出和存储。这个过程不仅可以帮助你更好地理解JavaScript在处理表单数据方面的应用，还可以为你后续的学习打下坚实的基础。希望这篇文章能对你有所帮助！

-- 展开阅读全文 --