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);
}

更多信息

  • HTML Forms: <form>: The Form element - HTML: HyperText Markup Language | MDN
  • JavaScript Form Validation: <移除了无效网址>

总结

表单元素是 HTML 中非常重要的元素,可以用于收集用户输入。本文介绍了常见的表单元素、表单元素属性、表单事件和表单验证。

✨ 结语

        表单元素是 web 开发的基础,掌握它们对于创建各种类型的表单至关重要。本文提供的知识和示例可以帮助你快速上手,并提升表单开发技能。

希望本文对你有所帮助!

以下是一些额外的建议:

  • 阅读 HTML 和 JavaScript 文档,以了解更多关于表单元素的信息。
  • 练习使用不同的表单元素创建各种类型的表单。
  • 尝试使用 JavaScript 来验证表单输入。
  • 在实际项目中使用表单元素。

祝你学习愉快!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/669980.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vscode 突然连接不上服务器了(2024年版本 自动更新从1.85-1.86)

vscode日志 ll192.168.103.5s password:]0;C:\WINDOWS\System32\cmd.exe [17:09:16.886] Got some output, clearing connection timeout [17:09:16.887] Showing password prompt [17:09:19.688] Got password response [17:09:19.688] "install" wrote data to te…

AE2023 After Effects 2023

After Effects 2023是一款非常强大的视频编辑软件&#xff0c;提供了许多新功能和改进&#xff0c;使得视频编辑和合成更加高效和灵活。以下是一些After Effects 2023的特色功能&#xff1a; 新合成预设列表&#xff1a;After Effects 2023彻底修改了预设列表&#xff0c;使其…

算法——二分查找算法

1. 二分算法是什么&#xff1f; 简单来说&#xff0c;"二分"指的是将查找的区间一分为二&#xff0c;通过比较目标值与中间元素的大小关系&#xff0c;确定目标值可能在哪一半区间内&#xff0c;从而缩小查找范围。这个过程不断重复&#xff0c;每次都将当前区间二分…

Kafka零拷贝技术与传统数据复制次数比较

读Kafka技术书遇到困惑: "对比传统的数据复制和“零拷贝技术”这两种方案。假设有10个消费者&#xff0c;传统复制方式的数据复制次数是41040次&#xff0c;而“零拷贝技术”只需110 11次&#xff08;一次表示从磁盘复制到页面缓存&#xff0c;另外10次表示10个消费者各自…

黑马头条 Kafka

我是南城余&#xff01;阿里云开发者平台专家博士证书获得者&#xff01; 欢迎关注我的博客&#xff01;一同成长&#xff01; 一名从事运维开发的worker&#xff0c;记录分享学习。 专注于AI&#xff0c;运维开发&#xff0c;windows Linux 系统领域的分享&#xff01; 知…

4.0 Zookeeper Java 客户端搭建

本教程使用的 IDE 为 IntelliJ IDEA&#xff0c;创建一个 maven 工程&#xff0c;命名为 zookeeper-demo&#xff0c;并且引入如下依赖&#xff0c;可以自行在maven中央仓库选择合适的版本&#xff0c;介绍原生 API 和 Curator 两种方式。 IntelliJ IDEA 相关介绍&#xff1a;…

macOS Sonoma 14系统安装包

macOS Sonoma 14是苹果公司最新推出的操作系统&#xff0c;为Mac用户带来了全新的使用体验。Sonoma是苹果继Catalina之后的又一重要更新&#xff0c;它在改善系统性能、增加新功能、优化用户界面等方面做出了显著贡献。 macOS Sonoma 14系统有许多令人兴奋的新功能和改进&…

【DDD】学习笔记-数据模型与对象模型

在建立数据设计模型时&#xff0c;我们需要注意表设计与类设计之间的差别&#xff0c;这事实上是数据模型与对象模型之间的差别。 数据模型与对象模型 我们首先来分析在设计时对冗余的考虑。前面在讲解数据分析模型时就提及&#xff0c;在确定数据项模型时&#xff0c;需要遵…

Sentinel(理论版)

Sentinel 1.什么是Sentinel Sentinel 是一个开源的流量控制组件&#xff0c;它主要用于在分布式系统中实现稳定性与可靠性&#xff0c;如流量控制、熔断降级、系统负载保护等功能。简单来说&#xff0c;Sentinel 就像是一个交通警察&#xff0c;它可以根据系统的实时流量&…

算法学习——LeetCode力扣链表篇1

算法学习——LeetCode力扣链表篇1 203. 移除链表元素 203. 移除链表元素 - 力扣&#xff08;LeetCode&#xff09; 描述 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 示例 示例 …

一个查看armv8系统寄存器-值-含义的方式

找到解压后的SysReg_xml_v86A-2019-12目录 wget https://developer.arm.com/-/media/developer/products/architecture/armv8-a-architecture/2019-12/SysReg_xml_v86A-2019-12.tar.gz wget https://developer.arm.com/-/media/developer/products/architecture/armv8-a-archi…

ChatGPT辅助编程,一次有益的尝试

如果大家想学习PCIe&#xff0c;搜索网上的信息&#xff0c;大概率会看到chinaaet上Felix的PCIe扫盲系列的博文 Felix-PCIe扫盲 每次看这个系列博文的时候&#xff0c;我都在想有没有什么方法可以把这个系列的博文都保存到一个pdf文件中&#xff0c;这样方便阅读。于是有了下…

蓝桥杯省赛无忧 课件99 裴蜀定理

前置算法 欧几里得算法 01 什么是裴蜀定理 02 裴蜀定理的数学证明 03 裴蜀定理扩展 04 例题 关联知识 EXGCD(扩展欧几里得算法)

SSRF漏洞给云服务元数据带来的安全威胁

文章目录 前言元数据服务威胁1.1 Metadata元数据1.2 RAM资源管理角色1.3 STS 临时凭据利用1.4 CF云环境利用框架1.5 元数据安全性增强 TerraformGoat2.1 永久性AccessKey2.2 SSRF靶场环境搭建2.3 腾讯云CVM配角色2.4 接管腾讯云控制台 SSRF组合拳案例3.1 上传图片功能SSRF3.2 文…

ubuntu22.04@laptop OpenCV Get Started: 001_reading_displaying_write_image

ubuntu22.04laptop OpenCV Get Started: 001_reading_displaying_write_image 1. 源由2. Read/Display/Write应用Demo2.1 C应用Demo2.2 Python应用Demo 3. 过程分析3.1 导入OpenCV库3.2 读取图像文件3.3 显示图像3.4 保存图像文件 4. 总结5. 参考资料 1. 源由 读、写、显示图像…

Android中设置Toast.setGravity()了后没有效果

当设置 toast.setGravity()后&#xff0c;弹窗依旧从原来的位置弹出&#xff0c;不按设置方向弹出 类似以下代码&#xff1a; var toast Toast.makeText(this, R.string.ture_toast, Toast.LENGTH_SHORT)toast.setGravity(Gravity.TOP, 0, 0)//设置toast的弹出方向为屏幕顶部…

蓝桥杯刷题day07——斐波那契与7

1、题目描述 斐波那契数列的递推公式为:FnFn-1Fn-2, 其中F1F21. 请问, 斐波那契数列的第 1 至 202202011200 项&#xff08;含&#xff09;中, 有多少项的个位 是 7 。 答案提交 这是一道结果填空的题, 你只需要算出结果后提交即可。本题的结果为一 个整数, 在提交答案时只填…

云计算运营模式介绍

目录 一、云计算运营模式概述 1.1 概述 二、云计算服务角色 2.1 角色划分 2.1.1 云服务提供商 2.1.2 云服务消费者 2.1.3 云服务代理商 2.1.4 云计算审计员 2.1.5 云服务承运商 三、云计算责任模型 3.1 云计算服务模式与责任关系图 3.2 云计算服务模式与责任关系解析…

刚刚晋升为管理者,还不会如何管理团队?你要重点关注这9个策略

管理团队需要明确团队目标、提前要求承诺、明确组织架构、团队高效协作、洞察员工、引入敏捷、执行可视化、及时反馈和复盘优化。 这样管理团队可以极大提高团队组织能力。团队组织能力强大的话&#xff0c;团队成员是可以实现自我管理的&#xff0c;会自我驱动去完成目标和执…

第01课:自动驾驶概述

文章目录 1、无人驾驶行业概述什么是无人驾驶智慧出行大趋势无人驾驶能解决什么问题行业趋势无人驾驶的发展历程探索阶段&#xff08;2004年以前&#xff09;发展阶段&#xff08;2004年-2016年&#xff09;成熟阶段&#xff08;2016年以后&#xff09; 2、无人驾驶技术路径无人…