html <Label>标签包含checkbox可按文字就选中

最新推荐文章于 2025-09-30 16:26:11 发布
原创 最新推荐文章于 2025-09-30 16:26:11 发布 · 7.8k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html Label标签

本文探讨了网站登录界面中“记住我”功能的实现方式及其背后的原理。解释了如何通过复选框让用户选择是否保存登录状态，并介绍了这一功能对于用户体验的重要性。 
<label>
    <input type="checkbox"> Remember me

</label>

label标签使用，点击文字就能选中或取消选中复选框checkbox/单选框radio的两种方法
zcc的博客
12-08 6398
效果是点击文字就能选中复选框checkbox/单选框radio 或者是取消选择复选框checkbox/单选框radio。 一、单选框 第一种方法：文字必须是label标签内,checkbox的id和<label>标签内的for=""中的名字必须相同。 <div class="radio-inline"> <input type="radio" name="killOrder" id="killOrder1" value="1"/> <lab
HTML5点击文字label同时选中checkbox（在span 标签内设置什么属性能使复选框选中）
韦_恩的博客
02-23 1756
方法1 ： 将input和label放在同一个标签p中同时lable的for属性的值等于input的id属性值就可以实现点击label同时控制input 。 <input type="checkbox" id="c2"> <label for="c2">内容2</label> 方法2： abel联动checkbox时，若label包含在checkbox外层时label不需for属性，设置label的display属性为block时可以使整个div联动。
多选复选框实现与交互设计完整指南
weixin_42592399的博客
09-30 840
为了实现更具创意的设计表达，开发者通常会完全隐藏浏览器默认的复选框样式，并使用CSS伪元素重新绘制勾选标记、背景形状乃至完整图标。一旦原生控件被隐藏，即可通过::before绘制容器框，::after绘制勾选符号（✓）来构建全新视觉形态。left: 6px;top: 2px;我已阅读并接受服务条款</label>代码逻辑解析::before创建一个带圆角的方框作为背景容器。::after。
checkbox label
weixin_33850890的博客
01-08 301
//点击lable让他前边的checkbox选中 $("label").live("click",function(){ var li= $(this).parent().find("input"); if(li.attr("checked")) { $(this).parent().find("input").attr(...
html更改checkbox样式,html自定义checkbox样式
weixin_34366539的博客
07-15 2729
1.原理就是将浏览器原生checkbox隐藏，对label进行相关操作。因为label和checkbox时绑在一起的，所以点击label就会选中2.实现效果图片.png3.代码提供一种图片.png1.html代码原生的checkbox和对应的label，注意lable的for要与checkbox的id对应markcheckbox12.css代码1)将原生的checkbox隐藏input[type=...
本关任务：完成一个表单的创建任务。 这里标签要按照规定格式来写，因为有 <div> 标签，会自动换行，就不用 <br> 标签了。 属性的先后顺序为： type -- id -- class -- name -- value ，其他需要添加的属性最后写。 其他要求如下： • 用户名：添加类 .common ； • 昵称：添加类 .common ； • 性别： name 属性的值为 sex ，禁用保密； • 男： <label> 标签的 for 属性的值为 male ； • 女： <label> 标签的 for 属性的值为 female ； • 保密： <label> 标签的 for 属性的值为 other ； • 教育程度：添加类 .common ，默认选中本科； • 选项有： 高中，中专，大专，本科，硕士，博士，其他 ； • 婚姻状况： name 属性的值为 state ，默认选中未婚； • 未婚： <label> 标签的 for 属性的值为 single ； • 已婚： <label> 标签的 for 属性的值为 married ； • 保密： <label> 标签的 for 属性的值为 secret ； • 兴趣爱好： name 属性的值为 hobby ，默认选中看电影； • 踢足球： <label> 标签的 for 属性的值为 football ； • 打篮球： <label> 标签的 for 属性的值为 basketball ； • 看电影： <label> 标签的 for 属性的值为 film ； • 描述自己的特点：添加类 .common ，字符最大长度为 20 ； • 提交：添加空 <span></span> ，用来占位，添加类 .common ， value 值为 提交 。 要求：像“用户名、昵称”这些采用 <span> 标签包裹文本，而‘男、女’这些单选框和多相框采用 <label> 标签包裹文本。 效果如下： 下拉框：
最新发布
10-30
各类标签和属性需满足指定条件，包括类名、默认选中、禁用状态、`for` 关联等。 --- # 给出答案（答案为带注释的代码块） ```html <div> <span>用户名：</span> <input type="text" id="username" class=...
<h1>注册信息</h1> <form action="action_page.php" method="get"> <label>姓名：</label><input type="text" placeholder="请输入真实姓名"> <br></br> <label>密码：</label><input type="password" placeholder="请输入密码"> <br></br> <label>确认密码：</label><input type="password" placeholder="请输入确认密码"> <br></br> <label>性别：</label> <label><input type="radio" name="gender"> 男</label> <label><input type="radio" name="gender" checked> 女</label> <br></br> <label>居住城市：</label> <select> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>武汉</option> </select> <h2>教育经历</h2> <label>最高学历：</label> <select> <option>博士</option> <option>硕士</option> <option>本科</option> <option>大专</option> </select> <br></br> <label>学校名称：</label><input type="text"> <br></br> <label>所学专业：</label><input type="text"> <br></br> <label>在校时间：</label> <select> <option>2015</option> <option>2016</option> <option>2017</option> <option>2018</option> </select> <br></br> <select> <option>2019</option> <option>2020</option> <option>2021</option> <option>2022</option> </select> <br></br> <h2>工作经历</h2> <label>公司名称：</label><input type="text"> <br></br> <label>工作描述：</label> <br> <textarea></textarea> <br></br> <input type="checkbox"><label>已阅读并同意以下协议：</label> <ul> <li><a href="#">《用户服务协议》</a></li> <li><a href="#">《隐私政策》</a></li> </ul> <br></br> <button>免费注册</button> <button type="reset">重新填写</button> </form>
04-03
协议部分使用了复选框，但<label>放置在<input>之后，且没有使用for属性关联，用户点击文字时可能无法选中复选框。链接使用<a href="#">，但实际应指向具体的协议URL。 提交和重置按钮使用了<button>，但类型未明确...
<!DOCTYPE html><br/><html lang="zh"><br/><head><br/> <meta charset="UTF-8" /><br/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/><br/> <title>征婚网注册</title><br/> <style><br/> body {<br/> font-family: "Microsoft YaHei", sans-serif;<br/> background-color: #f5f5f5;<br/> display: flex;<br/> justify-content: center;<br/> align-items: center;<br/> height: 100vh;<br/> margin: 0;<br/> }<br/> .form-container {<br/> width: 400px;<br/> padding: 30px;<br/> background: white;<br/> border-radius: 10px;<br/> box-shadow: 0 4px 10px rgba(0,0,0,0.1);<br/> }<br/> h2 {<br/> text-align: center;<br/> color: #d63384;<br/> }<br/> .input-group {<br/> margin-bottom: 15px;<br/> }<br/> label {<br/> display: block;<br/> margin-bottom: 5px;<br/> font-weight: bold;<br/> }<br/> input[type="text"], input[type="tel"], select {<br/> width: 100%;<br/> padding: 8px;<br/> border: 1px solid #ccc;<br/> border-radius: 5px;<br/> }<br/> .checkbox-group {<br/> display: flex;<br/> flex-wrap: wrap;<br/> gap: 10px;<br/> }<br/> .checkbox-item {<br/> display: flex;<br/> align-items: center;<br/> }<br/> .checkbox-item input {<br/> margin-right: 5px;<br/> }<br/> .btn-group {<br/> display: flex;<br/> justify-content: space-between;<br/> margin-top: 20px;<br/> }<br/> button {<br/> padding: 10px 20px;<br/> border: none;<br/> border-radius: 5px;<br/> cursor: pointer;<br/> }<br/> .reset-btn {<br/> background: #6c757d;<br/> color: white;<br/> }<br/> .login-btn {<br/> background: #d63384;<br/> color: white;<br/> }<br/> </style><br/></head><br/><body><br/><div class="form-container"><br/> <h2>征婚网</h2><br/> <div class="input-group"><br/> <label>性别：</label><br/> <div><br/> <input type="radio" id="male" name="gender" value="男" checked /><br/> <label for="male">男</label><br/> <input type="radio" id="female" name="gender" value="女" /><br/> <label for="female">女</label><br/> </div><br/> </div><br/> <div class="input-group"><br/> <label>出生年月：</label><br/> <select style="width: 32%; display: inline-block;"><br/> <option>请选择年</option><br/> <!-- 年份循环 --><br/> <script><br/> const year = new Date().getFullYear();<br/> for (let i = year; i >= 1950; i--) {<br/> document.currentScript.previousElementSibling.innerHTML += `<option>${i}</option>`;<br/> }<br/> </script><br/> </select><br/> <select style="width: 30%; display: inline-block;"><br/> <option>请选择月</option><br/> <script><br/> for (let i = 1; i <= 12; i++) {<br/> document.currentScript.previousElementSibling.innerHTML += `<option>${i}</option>`;<br/> }<br/> </script><br/> </select><br/> <select style="width: 30%; display: inline-block;"><br/> <option>请选择日</option><br/> <script><br/> for (let i = 1; i <= 31; i++) {<br/> document.currentScript.previousElementSibling.innerHTML += `<option>${i}</option>`;<br/> }<br/> </script><br/> </select><br/> </div><br/> <div class="input-group"><br/> <label>所在地区：</label><br/> <input type="text" value="奋斗者之家" readonly /><br/> </div><br/> <div class="input-group"><br/> <label>婚姻状况：</label><br/> <div><br/> <input type="radio" id="single" name="status" value="单身" checked /><br/> <label for="single">单身</label><br/> <input type="radio" id="unmarried" name="status" value="未婚" /><br/> <label for="unmarried">未婚</label><br/> <input type="radio" id="divorced" name="status" value="离异" /><br/> <label for="divorced">离异</label><br/> </div><br/> </div><br/> <div class="input-group"><br/> <label>学历：</label><br/> <input type="text" value="小学" readonly /><br/> </div><br/> <div class="input-group"><br/> <label>月薪：</label><br/> <input type="text" value="1000~100000" readonly /><br/> </div><br/> <div class="input-group"><br/> <label>手机号：</label><br/> <input type="tel" placeholder="请输入手机号" /><br/> </div><br/> <div class="input-group"><br/> <label>昵称：</label><br/> <input type="text" placeholder="请输入昵称" /><br/> </div><br/> <div class="input-group"><br/> <label>喜欢的类型：</label><br/> <div class="checkbox-group"><br/> <div class="checkbox-item"><input type="checkbox" /> <label>爱打篮球</label></div><br/> <div class="checkbox-item"><input type="checkbox" /> <label>温柔</label></div><br/> <div class="checkbox-item"><input type="checkbox" /> <label>可爱</label></div><br/> <div class="checkbox-item"><input type="checkbox" /> <label>小鲜肉</label></div><br/> <div class="checkbox-item"><input type="checkbox" /> <label>御姐</label></div><br/> <div class="checkbox-item"><input type="checkbox" /> <label>萝莉</label></div><br/> </div><br/> </div><br/> <div class="input-group"><br/> <label>自我介绍：</label><br/> <textarea rows="3" style="width:100%; padding:8px; border:1px solid #ccc; border-radius:5px;" placeholder="请填写自我介绍"></textarea><br/> </div><br/> <div class="input-group"><br/> <div><input type="checkbox" checked /> 我承诺年满18岁、单身</div><br/> <div><input type="checkbox" checked /> 抱着严肃的态度</div><br/> <div><input type="checkbox" checked /> 真诚寻找另一半</div><br/> <div><input type="checkbox" /> 我同意注册条款和会员加入标准</div><br/> </div><br/> <div class="btn-group"><br/> <button class="reset-btn">RESET</button><br/> <button class="login-btn">登录</button><br/> </div><br/></div><br/></body><br/></html>
10-30
<label for="female">女</label> </div> </div> <!-- 日期选择器 --> <div class="input-group"> <label>出生年月：</label> <div> <select id="yearSelect" style="width: 32%; display: inline-block;">...
``` <form action="xxx.jsp" method="GET" name="性别;生日;所在地区;婚姻状况;学历;喜欢的类型;自我介绍;"> <table width="500"> <style> body{ display:grid; place-content: center; height: 100vh; margin: 0%; font-family: '黑体'; font-size: 100px; } </style> <tr> <td><b>性别</b></td> <td> <input type="radio" id="man" name="sex"/> <label for="man"><img src="images/man.jpg"> 男 </label> <input type="radio" id="women" name="sex"/> <label for="women"><img src="images/women.jpg"> 女 </label> </td> </tr> <tr> <td><b>生日</b></td> <td> <select name="year"> <option selected="selected">--请选择年--</option> <option>1990</option> <option>2000</option> <option>2010</option> </select> <select name="month"> <option selected="selected">--请选择月--</option> <option>1</option> <option>2</option> <option>3</option> </select> <select name="day"> <option selected="selected">--请选择日--</option> <option>11</option> <option>12</option> <option>13</option> </select> </td> </tr> <tr> <td><b>所在地区</b></td> <td> <input type="text" value="安徽" name="area"> </td> </tr> <tr> <td><b>婚姻状况</b></td> <td> <input type="radio" name="marital_status" id="spinsterhood"> <label for="spinsterhood"> 未婚 </label> <input type="radio" name="marital_status" id="married"> <label for="married"> 已婚 </label> <input type="radio" name="marital_status" id="divorce"> <label for="divorce"> 离婚 </label> <input type="radio" name="marital_status" id="secret"> <label for="secret">保密</label> </td> </tr> <tr> <td><b>学历</b></td> <td><input type="text" name="edu_bg"></td> </tr> <tr> <td><b>喜欢的类型</b></td> <td> <input type="checkbox" name="like_type" id="wumei"> <label for="wumei"> 妩媚的 </label> <input type="checkbox" name="like_type" id="keai"> <label for="keai"> 可爱的 </label> <input type="checkbox" name="like_type" id="xiaoxianrou"> <label for="xiaoxianrou"> 小鲜肉 </label> <input type="checkbox" name="like_type" id="laolarou"> <label for="laolarou"> 老腊肉 </label> <input type="checkbox" name="like_type" id="douxihuan"> <label for="douxihuan"> 都喜欢 </label> </td> </tr> <tr> <td><b>自我介绍</b></td> <td> <textarea cols="30" rows="10" name="self_introduction"></textarea> </td> </tr> <tr> <td> <input type="submit" value=" 免费注册 "> </td> </tr> </table> </form>```帮我修改一下
04-01
<label for="female"><img src="images/women.jpg" alt="女"> 女 </label> </td> </tr> <!-- 其他表格行保持不变但已修正参数 --> </table> </fieldset> <!-- 其他表单字段组 --> <input type="submit" ...
HTML常用标签-----例如＜p＞＜img＞＜li＞等
qq_56798763的博客
07-04 1183
1.HTML5头部结构 【DOCTYPE html】 声明文档类型为HTML5文件。 文档声明在HTML5文档必不可少，且必须放在文档的第一行。 【meta标签】 1.charset属性：单独使用，设置文档字符及编码格式。 写法：<meta charset="UTF-8"> 常见的中文编码格式： B-2312:国标码，简体中文 GBK：扩展的国标编码，简体中文 UTF-8:万国码 Unicode码，基本兼容各国语言文字 2.http-equiv属性：需配合c..
html中的label配合checkbox,redio用法
weixin_33935777的博客
05-15 382
&lt;input id="a1" type="checkbox" name="a" value="33023" /&gt; &lt;label for="a1"&gt;.NET Framework 2.0&lt;/label&gt;  &lt;input id="a2" type="checkbox" name=
label联动checkbox
weixin_30411997的博客
03-16 639
label联动checkbox时，若label包含在checkbox外层时label不需for属性，设置label的display属性为block时可以使整个div联动。 转载于:https://www.cnblogs.com/wujuntian/p/6560273.html...
html 复选框(checkbox)和单选框(radio)与文字水平(label)垂直居
第四维度
04-01 983
对 input与label同时设置CSS label input,label{ vertical-align:middle; }
使用label使checkbox、radio更加友好
royzhou1985
04-13 364
使用label标签可以将我们的文本与html元素关联,点击文本的时候实现checkbox与radio的选择 label for checkbox .NET Framework 2.0 其他.NET2.0文章 Compact Framework 2.0 取消选择 checkbox效果. label for radio .NET Framework 2.0 其他.NET...
HTML5中Checkbox标签的深入全面解析
软考鸭
09-10 8875
由于浏览器的默认样式可能会对Checkbox的外观产生较大影响，开发者经常需要自定义Checkbox的样式以符合设计需求。隐藏原始Checkbox使用CSS的或属性隐藏原始Checkbox，然后使用或其他元素来模拟Checkbox的外观。使用伪元素通过CSS的:before和:after伪元素，可以在自定义元素上添加勾选标记、边框等样式，模拟Checkbox的选中状态。JavaScript辅助结合JavaScript，可以监听Checkbox的change。
WPF实现HTML的Label For CheckBox功能
sdhongjun的专栏
07-13 454
HTML中的`label`控件通过将`for`属性值设置为`checkbox`的`id`，实现`label`点击与`checkbox`的选中属性关联，但WPF中的`Label`属性却没有实现此功能，不过我们可以通过如下方式实现此功能。
HTML Label标签使用
热门推荐
cyzfd_sunshine的博客
12-18 3万+
转载 from ：https://blog.youkuaiyun.com/gnail_oug/article/details/72852150 label标签介绍 label标签为input元素定义标注(标记)，它不会向用户呈现任何特殊效果，和span标签类似。但label标签和span标签最大的区别就是它为鼠标用户改进了可用性，可以关联特定的表单控件。 label标签和特定表单控件关联之后，如果用户在...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值