编程笔记 html5cssjs 092 JavaScript 表单控件

编程笔记 html5&css&js 092 JavaScript 表单控件

  • 一、常见的表单控件
  • 二、JavaScript在表单控件中的应用:
  • 三、获取单选按钮和复选框的值
    • 获取单选按钮的值:
    • 获取复选框的值:
  • 四、应用示例
  • 小结

表单控件是HTML中的核心元素,用于在网页上创建交互式数据输入区域。这些控件可以收集用户输入的数据,并通过JavaScript进行操作和处理。

以下是常见的表单控件及其在JavaScript编程中的应用概述以及一个综合应用示例:

一、常见的表单控件

  1. 文本输入框(<input type="text">:用于接收单行文本输入。
  2. 密码输入框(<input type="password">:与文本输入框类似,但会隐藏用户输入的字符以保护隐私。
  3. 复选框(<input type="checkbox">:允许用户选择多项可选项。
  4. 单选按钮(<input type="radio">:在一个组内只能选择一项可选项。
  5. 下拉菜单/选择框(<select>:包含多个<option>标签,提供有限的预设选项供用户选择。
  6. 提交按钮(<button type="submit"><input type="submit">:用于将表单数据发送到服务器。
  7. 重置按钮(<button type="reset"><input type="reset">:清除表单内的所有用户输入内容。
  8. 文件上传(<input type="file">:允许用户从本地设备选择并上传文件。

二、JavaScript在表单控件中的应用:

  • 事件监听:JavaScript可以为表单控件绑定各种事件,如changefocusblursubmit等,以便在特定时刻执行代码逻辑。

    document.getElementById('myCheckbox').addEventListener('change', function() {// 当复选框状态改变时执行某些动作if (this.checked) {// 复选框被选中时...} else {// 复选框未被选中时...}
    });
    
  • 获取和设置值:通过JavaScript操作表单控件的value属性来获取或修改用户输入的内容。

    var textInput = document.getElementById('myText');
    console.log(textInput.value); // 获取文本框的当前值
    textInput.value = '新的文本'; // 设置文本框的新值
    
  • 验证输入:在提交前使用JavaScript对表单数据进行客户端验证,确保数据符合预期格式或条件。

    document.querySelector('form').addEventListener('submit', function(event) {var emailInput = document.getElementById('email');if (!validateEmail(emailInput.value)) {alert('请输入有效的电子邮件地址');event.preventDefault(); // 阻止表单提交}
    });function validateEmail(email) {// 这里实现电子邮件格式的验证逻辑
    }
    
  • 动态更新:基于其他控件的选择或输入,JavaScript可以动态地显示或隐藏部分表单元素,或者更改其可用性。

    var toggleInput = document.getElementById('toggleOption');
    var hiddenInput = document.getElementById('hiddenField');toggleInput.addEventListener('change', function() {hiddenInput.style.display = this.checked ? 'block' : 'none';
    });
    

三、获取单选按钮和复选框的值

在JavaScript中,获取单选按钮(Radio Button)和复选框(Checkbox)的值通常涉及访问这些元素并读取其value属性。以下是具体的实现方式:

获取单选按钮的值:

假设你有一组单选按钮,它们具有相同的name属性来表示是一个分组的选项:

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

在JavaScript中,你可以通过循环遍历同名的所有单选按钮,并检查哪些是被选中的:

var radios = document.getElementsByName('gender');
for (var i = 0; i < radios.length; i++) {if (radios[i].checked) {var selectedValue = radios[i].value;console.log("Selected gender: ", selectedValue); // 输出选中的单选按钮值break; // 找到一个选中的就跳出循环}
}

获取复选框的值:

对于复选框,用户可以勾选多个选项,因此你需要单独处理每个复选框的状态:

<input type="checkbox" id="cb1" name="vehicle" value="Bike">
<label for="cb1">自行车</label>
<input type="checkbox" id="cb2" name="vehicle" value="Car">
<label for="cb2">汽车</label>
<input type="checkbox" id="cb3" name="vehicle" value="Truck">
<label for="cb3">卡车</label>

要获取所有被选中的复选框的值,你可以这样操作:

var checkboxes = document.getElementsByName('vehicle');
var checkedValues = [];for (var i = 0; i < checkboxes.length; i++) {if (checkboxes[i].checked) {checkedValues.push(checkboxes[i].value);}
}console.log("Checked vehicles: ", checkedValues); // 输出选中的复选框值列表

这里,checkedValues数组将包含所有已勾选的复选框对应的值。如果只需要知道是否至少有一个复选框被勾选,你可以省略创建数组的部分,直接进行判断即可。

四、应用示例

假设有一个简单的联系表格,它有姓名、电子邮件和同意条款复选框,我们用JavaScript来确保只有当用户勾选了同意条款后才能提交表单。

<form id="contactForm"><label for="name">姓名:</label><input type="text" id="name" name="name" required><label for="email">电子邮件:</label><input type="email" id="email" name="email" required><label for="terms">我已阅读并同意<a href="#">条款和条件</a></label><input type="checkbox" id="terms" name="terms" required><button type="submit">提交</button>
</form><script>const form = document.getElementById('contactForm');const termsBox = document.getElementById('terms');form.addEventListener('submit', function(event) {if (!termsBox.checked) {alert('请先同意我们的条款和条件');event.preventDefault(); // 如果条款未同意,则阻止表单提交}});
</script>

这个示例展示了如何通过JavaScript监听表单提交事件,并根据复选框的状态决定是否允许表单提交。在实际项目中,还可以结合Vue.js或其他前端框架进一步简化数据绑定和表单验证的工作。

小结

JavaScript表单处理在Web开发中具有至关重要的意义,它主要体现在以下几个方面:

  1. 实时验证

    • JavaScript可以在用户输入数据时进行实时的前端验证。这可以显著改善用户体验,因为它能够在用户提交表单之前即时反馈信息,提示用户正确填写内容或修正错误,避免因无效或格式不正确的数据导致的后端请求失败。
  2. 减少服务器负担

    • 通过前端验证,可以过滤掉明显不符合规则的数据,减轻服务器端的压力,降低无效请求的数量,提高服务器资源的利用率和整体应用性能。
  3. 动态交互

    • JavaScript可以让表单变得更加动态和智能,比如根据用户的选择动态加载或隐藏其他表单字段,或者自动填充一些依赖于其它输入值的信息。
  4. 异步操作支持

    • 使用Ajax技术结合JavaScript表单处理,开发者可以实现无刷新页面更新,即用户提交表单时不重新加载整个网页,而是仅将表单数据发送到服务器并接收服务器返回的结果,然后通过JavaScript对页面进行局部更新。
  5. 提升用户体验

    • 可以使用JavaScript来增强表单元素的功能,如添加更复杂的输入辅助工具(日期选择器、文件上传进度条等),以及自定义的UI/UX效果,使表单更具吸引力和易用性。
  6. 定制化处理

    • 开发者可以根据业务需求编写特定的JavaScript逻辑来控制表单行为,例如预处理数据、调用外部API验证、实现复杂条件下的表单流程控制等。

总结来说,JavaScript表单处理是现代Web应用程序的重要组成部分,它极大地增强了用户与网页表单之间的互动性,确保了数据质量,并实现了高效、流畅且个性化的交互体验。

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

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

相关文章

力扣刷题:383.赎金信

题目&#xff1a; 给你两个字符串&#xff1a;ransomNote 和 magazine &#xff0c;判断 ransomNote 能不能由 magazine 里面的字符构成。 如果可以&#xff0c;返回 true &#xff1b;否则返回 false 。 magazine 中的每个字符只能在 ransomNote 中使用一次。 示例 1&…

mac电脑监控软件哪个好

在Mac电脑使用日益普及的今天&#xff0c;企业对于Mac终端的安全管理需求也日益增长。Mac电脑监控软件作为一种有效的管理工具&#xff0c;能够帮助企业提高数据安全性和员工工作效率。 在众多Mac电脑监控软件中&#xff0c;域智盾软件以其卓越的功能和性能脱颖而出&#xff0c…

3D工业相机及品牌集合

3D相机可以获取物理世界的空间信息&#xff0c;即立体三维的物理信息&#xff0c;不仅可以拍摄到场景的二维图像&#xff0c;而且能获取物体之间的位置关系&#xff0c;再经过进一步深化处理&#xff0c;还能完成三维建模等应用。 3D相机三种方案 1、结构光 通常采用特定波长…

CentOS Nmap 用法

Nmap是一款开源的网络扫描工具&#xff0c;被广泛应用于网络管理、安全审计和漏洞扫描等领域。它支持多种扫描模式&#xff0c;包括TCP、UDP、SYN和ACK等&#xff0c;可以对目标主机进行端口扫描、操作系统检测、服务和版本识别、漏洞扫描等操作。 此外&#xff0c;Nmap还提供…

R语言数学建模(一)—— 基础知识

R语言数学建模&#xff08;一&#xff09;—— 基础知识 文章目录 R语言数学建模&#xff08;一&#xff09;—— 基础知识前言一、建模软件1.1 软件建模的基础1.2 模型的分类1.3 不同类型模型间的联系1.4 一些术语1.5 建模如何适应数据分析过程 二、Tidyverse基础2.1 tidyvers…

面试数据库篇(mysql)- 02定位慢查询和分析

定位慢查询 聚合查询多表查询表数据量过大查询深度分页查询表象:页面加载过慢、接口压测响应时间过长(超过1s) 方案一:开源工具 调试工具:Arthas 运维工具:Prometheus 、Skywalking 方案二:MySQL自带慢日志 慢查询日志记录了所有执行时间超过指定参数(long_query_tim…

实现前后端分离架构:优势与劣势

目录 引言 什么是前后端分离架构&#xff1f; 如何实现前后端分离架构&#xff1f; 1. 设计接口 2. 前端开发 3. 后端开发 4. 数据库设计 5. 接口对接与测试 6. 部署与维护 前后端分离架构的优势 前后端分离架构的劣势 结论 引言 在现代Web开发中&#xff0c;前后端…

从零学算法371

371.给你两个整数 a 和 b &#xff0c;不使用 运算符 和 - ​​​​​​​&#xff0c;计算并返回两整数之和。 示例 1&#xff1a; 输入&#xff1a;a 1, b 2 输出&#xff1a;3 示例 2&#xff1a; 输入&#xff1a;a 2, b 3 输出&#xff1a;5 提示&#xff1a; -1000 …

网络安全之安全事件监测

随着人们对技术和智能互联网设备依赖程度的提高&#xff0c;网络安全的重要性也在不断提升。因此&#xff0c;我们需要不断加强网络安全意识和措施&#xff0c;确保网络环境的安全和稳定。 网络安全的重要性包含以下几点&#xff1a; 1、保护数据安全&#xff1a;数据是组织和…

【Web安全靶场】sqli-labs-master 1-20 BASIC-Injection

sqli-labs-master 1-20 BASIC-Injection 文章目录 sqli-labs-master 1-20 BASIC-Injection第一关-报错注入第二关-报错注入第三关-报错注入第四关-报错注入第五关-报错注入-双查询注入第六关-报错注入-双查询注入第七关-outfile写入webshell第八关-布尔盲注第九关-时间盲注第十…

【UE 材质】水晶材质

效果 步骤 1. 先在Quixel Bridge上下载冰纹理 2. 新建一个材质&#xff0c;这里命名为“M_Ice”并打开&#xff0c;添加如下纹理采样节点 继续添加如下节点 此时效果如下&#xff1a; 可以看到此时的材质颜色比较浅&#xff0c;如果希望颜色深一点可以继续添加如下节点 此时效…

React引入css的几种方式以及应用

1.直接引入css文件 import "./parent.css" 2.引入css模块&#xff0c;定义文件名[组件名.module.css]&#xff1b;该方式可避免类名的重复&#xff0c;每个组件都有独立的作用域&#xff0c;避免了全局污染&#xff0c;保证了类名的唯一性 import styles from &qu…

lv21 QT对话框3

1 内置对话框 标准对话框样式 内置对话框基类 QColorDialog, QErrorMessage QFileDialog QFontDialog QInputDialog QMessageBox QProgressDialogQDialog Class帮助文档 示例&#xff1a;各按钮激发对话框实现基类提供的各效果 第一步&#xff1a;实现组件布局&…

编程笔记 html5cssjs 090 JavaScript 文档对象模型

编程笔记 html5&css&js 090 JavaScript 文档对象模型 一、文档对象模型二、Javascript编程中文档对象的组成DOM 的主要组件&#xff1a;事件&#xff08;Events&#xff09;属性&#xff08;Properties&#xff09;方法&#xff08;Methods&#xff09; 三、编程应用四…

gprMax3.0随机介质建模

此处利用gprMax建立随机介质模型,采用matlab生成随机数组,保存为HDF5文件,此处为全代码,无需修改即可运行。在gprMax输入文件中使用#geometry_objects_read:读入自定义的随机模型 此文参考其他博主的自定义几何形状模块gprMax3.0建模时如何自定义目标的几何形状_#geomet…

為什麼使用海外動態代理IP進行網路爬蟲?

網路爬蟲作為獲取網路數據的重要工具&#xff0c;其重要性不言而喻。但隨著網站反爬策略的日益嚴格&#xff0c;爬蟲任務變得愈發困難&#xff0c;不過海外動態代理IP可以很好地解決這一問題。本文將詳細闡釋動態代理IP在爬蟲中的應用&#xff0c;以及如何使用動態代理IP提升爬…

深入理解ngx_http_proxy_connect_module模块(下)

目录 5. 源码分析5.1 模块的初始化代码5.2 请求入口点函数分析5.2.1 ngx_http_proxy_connect_post_read_handler5.2.2 ngx_http_proxy_connect_handler5.3 域名解析回调5.4 向上游服务器发起连接5.4.1 ngx_http_proxy_connect_process_connect5.4.2 ngx_http_proxy_connect_wri…

欧盟发布关于网络安全、通信网络弹性的综合风险评估报告:具有战略意义的十大网络安全风险场景

在欧盟委员会和欧盟网络安全局 ENISA 的支持下&#xff0c;欧盟成员国近日发布了一份报告&#xff0c;详细介绍了欧洲通信基础设施和网络的网络安全和弹性。 该报告概述了对欧盟具有战略意义的十种风险情景。 1、 擦除器/勒索软件攻击 2、 供应链攻击 3、 攻击托管服务、托…

HarmonyOS—使用数据模型和连接器

Serverless低代码开发平台是一个可视化的平台&#xff0c; 打通了HarmonyOS云侧与端侧能力&#xff0c;能够轻松实现HMS Core、AGC Serverless能力调用。其中&#xff0c;数据模型和连接器是两大主要元素。开发者在使用DevEco Studio的低代码功能进行开发时&#xff0c;可以使用…

Redis有哪些原子命令?

SET key value [NX|XX]&#xff1a;将键key设置为指定的字符串value&#xff0c;如果键不存在&#xff0c;则创建&#xff0c;如果键已经存在&#xff0c;则覆盖原有值。可选参数NX表示仅在键不存在时设置值&#xff0c;XX表示仅在键已存在时设置值。 GETSET key value&#x…