label for input onClick发生了什么？

最新推荐文章于 2025-03-15 09:45:00 发布

wangweiren_get

最新推荐文章于 2025-03-15 09:45:00 发布

阅读量260

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 js

本文链接：https://blog.youkuaiyun.com/wangweiren_get/article/details/88937858

前端同时被 2 个专栏收录

65 篇文章

订阅专栏

15 篇文章

订阅专栏

本文探讨了在HTML中点击input标签的label时发生的事件。通过测试代码展示，当点击label元素时，如何触发与之关联的input元素的onClick事件。提供了一个CodePen链接供进一步研究。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

label for input onClick发生了什么？

- 测试代码如下

测试代码如下

html

<label for="ipt" id="label_ipt">上传</label>
<br />
<input type="file" id="ipt" />

window.onload = function () {
  function iptClick () {
    console.log("iptClick")
  }
  function iptClick2() {
    console.log("iptClick2")
  }
  ipt.onclick = iptClick;
  label_ipt.onclick = iptClick2;
}

点击label之后的打印为iptClick2, iptClick

codepen地址

thanks

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wangweiren_get

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

input结合label对checkbox进行美化以及checkbox对应选中操作

qq_42023860的博客

08-11

559

input结合label对checkbox进行样式美化

label的click()事件执行两次

前台技术

01-11

8616

如果你的结构是label内写input实现点击文字时候input也有相应。并且，把事件设置在了label上，那么就会执行两次了。 jq/js: $(document).ready(function () { $("input").click(function (){ alert(1); }); }); 把事件放在input上，点击文字也可以click事件执行。而且不会有重复的click事件发生。

参与评论您还未登录，请先登录后发表或查看评论

label标签，for属性与input的id属性相匹配

TrueLink的博客

09-29

405

【代码】lable标签，for属性与input的id属性相匹配。

label：for事件的绑定

wd1624348916的博客

09-10

471

首页 label{height:20px;width:20px; background-color:yellow;display:block;border: 1px red solid;border-radius:50%;float:left;margin-left:20px;} input{display:block;float:left;;}

解决IE lable for 指向的input没起作用的问题

今日最可爱YeahT

09-18

431

<label for="positive"> <img id="positive_img" style="margin-top: 10px" height="150"src="/assets/common/img/positive_id_card_image.png"> </label> 解决方法： if (!!window.ActiveXObject || "ActiveXObject" in window) { var labelAr.

label标签的for属性要指向input的id属性一致

qq_36235046的博客

12-31

2102

html: <input class="a" id="one" type="text"></input> <div class="a" id="two">eeeeeeee</div> <label for="one">点我试试!!</label> ...

<label for="number1">操作数1：</label><input type="text" id="number1"><br><label for="number2">操作数2：</label><input type="text" id="number2"><br><label for="operator">运算符：</label><select id="operator"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option></select><br><button onclick="calculate()">计算</button><br><label for="result">计算结果：</label><span id="result"></span>把这段代码换成inpu类型

06-01

<label for="number1">操作数1：</label><input type="text" id="number1"> <label for="number2">操作数2：</label><input type="text" id="number2"> <label for="operator">运算符：</label> <input list...

<form target="ip" id="form28" name="form4" method="post" action="/cgi-bin/vgaic.cgi"> <input type="text" name="ip" id="ip" size="16" /> <label for="name1_submit"></label> <input type="submit" name="name1_submit" id="name1_submit" onclick="if(confirm('需重启才能生效，是否立即重启？')) {document.getElementById('form50').submit();} else {document.getElementById('form28').submit();}" value="设置" /> <label for="label50"></label> <input type="reset" name="name_abord16" id="label50" value="清除" /> </form> <form target="ip" id="form20" name="form5" method="post" action="/cgi-bin/vgaic.cgi"> <input type="text" name="netmask" id="netmask" size="16" /> <label for="name2_submit"></label> <input type="submit" name="name2_submit" id="name2_submit" onclick="if(confirm('需重启才能生效，是否立即重启？')) {document.getElementById('form50').submit();} else {document.getElementById('form20').submit();}" value="设置" /> <label for="label48"></label> <input type="reset" name="label2" id="label48" value="清除" /> </form>请将里面的onclick事件封装成一个函数

05-31

<label for="label50"></label> <input type="reset" name="name_abord16" id="label50" value="清除" /> <input type="text" name="netmask" id="netmask" size="16" /> <label for="name2_submit"></label>...

``` <form action=""> <div class="form-group"> <label for="name" class="form_label">单位名称：</label> <input type="text" class="information" name="name" id="name"> </div> <div class="form-group"> <label for="id" class="form_label">纳税人识别号：</label> <input type="text" class="information" name="id" id="id"> </div> <div class="form-group"> <label for="industry" class="form_label">行业：</label> <input type="text" class="information" name="industry" id="industry"> </div> <div class="form-group"> <label for="type" class="form_label">增值税种类：</label> <select class="select" name="type" id="type"> <option>小规模纳税人</option> <option>一般纳税人</option> </select> </div> <div class="form-group"> <label for="check" class="form_label">审核凭证：</label> <select class="select" name="check" id="check"> <option>审核</option> <option>不审核</option> </select> </div> <input type="submit" value="新增账套"> <input type="button" value="清空" id="clear"> <input type="button" value="返回" onclick="add_account.close()"> </form>```实现文字右对齐，文本框左对齐

03-15

在上述表单中，若需要将`<label>`的文字内容右对齐，并让对应的输入框（如 `<input>` 或 `<select>` 等）左对齐，可以借助 CSS 来实现布局调整。 ### 实现步骤 1. **设置 label 的样式** 使用 `text-align: ...

<form id="login-form"> <label for="username">用户名：</label> <input type="text" name="username" id="username"> <label for="password">密码：</label> <input type="password" name="password" id="password"> </form> <div id="error-message"></div> <button onclick="loginViaJson()">登录</button> 帮我把常规登录界面的样式写出来

06-09

<button onclick="loginViaJson()">登录 ``` CSS样式代码： ``` #login-form { width: 300px; margin: 0 auto; text-align: center; } label { display: inline-block; margin-bottom: 10px; font-weight...

label与input的结合方式

weixin_34025051的博客

01-29

3417

2019独角兽企业重金招聘Python工程师标准>>> ...

label与input属性关联解析

热门推荐

weixin_38098192的博客

11-08

3万+

当用户选择label标签时，浏览器会自动将焦点转移到个label相关的input上 1.通过为input设置属性id，在label标签中设置for=id使label文本与对应的inpu他结合起来。 <label for="name">Name:</label> <input id="name" type="text"/> 2.label标签包裹input..

在同时使用label和input标签下下label绑定click事件执行两次的问题

zqq_1119的博客

12-30

1489

结构为lable里嵌套了input标签，并且在lable下绑定了click事件，由此会引发click事件执行两次。

label标签的for属性

weixin_47282416的博客

02-15

2504

HTml+label标签的for属性

write a code for form input in js

09-11

在JavaScript中，创建表单输入元素通常使用HTML和JavaScript的结合。以下是一个简单的示例，展示如何使用JavaScript获取用户填写的表单数据： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>表单输入</title> </head> <body> <form id="myForm"> <label for="username">用户名：</label> <input type="text" id="username" name="username"><br> <label for="email">邮箱：</label> <input type="email" id="email" name="email"><br> <label for="password">密码：</label> <input type="password" id="password" name="password"><br> <button onclick="submitForm()">提交</button> </form> <script> function submitForm() { // 获取表单中的输入值 var username = document.getElementById("username").value; var email = document.getElementById("email").value; var password = document.getElementById("password").value; // 在这里处理表单数据，例如发送到服务器或显示在页面上 console.log('Username:', username); console.log('Email:', email); console.log('Password:', '****'); // 对密码进行安全处理，不直接显示 // 如果需要阻止默认行为（如跳转），添加这行代码 event.preventDefault(); } </script> </body> </html> ``` 这个例子中，当用户点击“提交”按钮时，`submitForm()` 函数会被调用，它会获取表单内三个输入字段的值，并打印出来。实际应用中，这些数据可能需要通过AJAX或其他方式传输到服务器。