JavaScript的表单、控件

🧑‍🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

✨ 前言

表单是 web 开发中不可或缺的一部分，用于收集用户输入。本文将深入探讨 HTML 表单元素，涵盖常见元素、属性、事件和验证等主题，并提供大量代码示例，帮助你构建更强大的表单。

✨ 正文

一、简介

表单元素是 HTML 中用于收集用户输入的重要元素。它们可以用于创建各种各样的表单，例如登录表单、注册表单、调查问卷等等。

常见表单元素

<input>：用于输入文本、密码、数字、日期、时间等。
<textarea>：用于输入多行文本。
<select>：用于选择一个选项。
<option>：用于定义 <select> 元素中的选项。
<checkbox>：用于选择多个选项之一。
<radio>：用于选择一组选项中的一个。
<button>：用于提交表单或执行其他操作。

表单元素属性

name：用于指定表单元素的名称。
id：用于指定表单元素的唯一标识符。
value：用于指定表单元素的值。
type：用于指定表单元素的类型。
required：用于指定表单元素是否必填。
disabled：用于指定表单元素是否可用。

表单事件

submit：当用户提交表单时触发。
reset：当用户重置表单时触发。
change：当用户更改表单元素的值时触发。
focus：当用户获得表单元素的焦点时触发。
blur：当用户失去表单元素的焦点时触发。

代码示例

<form action="/action_page.php"><input type="text" name="name" placeholder="Your name"><input type="email" name="email" placeholder="Your email"><input type="submit" value="Submit">
</form>

二、表单验证

表单验证用于确保用户输入的数据有效。可以使用 JavaScript 来实现表单验证。

代码示例

function validateForm() {var name = document.getElementById("name").value;var email = document.getElementById("email").value;if (name === "" || email === "") {alert("Please fill in all required fields");return false;}if (!validateEmail(email)) {alert("Please enter a valid email address");return false;}return true;
}function validateEmail(email) {var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;return re.test(email);
}