`
royzhou1985
  • 浏览: 253459 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

使用label使checkbox、radio更加友好

    博客分类:
  • HTML
阅读更多
使用label标签可以将我们的文本与html元素关联,点击文本的时候实现checkbox与radio的选择

label for checkbox
<hr/>
<input id="a1" type="checkbox" name="a" value="1" /><label for="a1">.NET Framework 2.0</label><br/>
<input id="a2" type="checkbox" name="a" value="2" /><label for="a2">其他.NET2.0文章</label><br/>
<input id="a3" type="checkbox" name="a" value="3" /><label for="a3">Compact Framework 2.0</label><br/>
<input id="a4" type="checkbox" name="a" value="4" /><label for="a4">取消选择</label> checkbox效果.<br/>
<br/><br/>
label for radio
<hr/>
<input id="b1" type="radio" name="b" value="5" /><label for="b1">.NET Framework 2.0</label><br/>
<input id="b2" type="radio" name="b" value="6" /><label for="b2">其他.NET2.0文章</label><br/>
<input id="b3" type="radio" name="b" value="7" /><label for="b3">Compact Framework 2.0</label><br/>
<input id="b4" type="radio" name="b" value="8" /><label for="b4">取消选择</label> checkbox效果.<br/>
<br/><br/>
简单说明一下:
label 中的 for = ID(这里对应的是html元素的ID值,所以ID值在页面中必须是唯一的)
所以对于checkbox或者radio,name值是一样的,但是id值是唯一。


分享到:
评论

相关推荐

    使用jquery与图片美化checkbox和radio控件的代码(打包下载)

    这不仅可以改善用户界面的美观性,还能提供更加友好的用户体验。 首先,jQuery是一个快速、小巧、功能丰富的JavaScript库。它通过简化HTML文档遍历和操作、事件处理、动画以及Ajax交互等操作来简化网页的JavaScript...

    H5 label 绑定表单元素增强 input 的响应区

    此外,`label`元素还可以与其他表单元素结合,如`checkbox`和`radio`按钮,通过包裹这些元素,用户可以更加方便地选中或取消选项: ```html &lt;label&gt; &lt;input type="checkbox" id="rememberMe" name="rememberMe"&gt; ...

    纯JS打造网页中checkbox和radio的美化效果

    - 为了解决使用图片替代原生控件可能带来的可访问性问题,本文中的label标签使用了“for”属性指向相应的控件的id,这样点击文本“答案一”时,相关的checkbox或radio也会被选中,保持了界面的无障碍访问。...

    struts2标签学习笔记

    总结,Struts2的标签库极大地简化了Web开发中的视图构建,通过 `&lt;s:radio&gt;` 和 `&lt;s:checkbox&gt;` 标签,我们可以方便地创建交互式的表单元素,使用户界面更加友好。了解并熟练掌握这些标签的使用,将有助于提升开发...

    jQuery单选框跟复选框美化代码演示

    .radio input[type="radio"], .checkbox input[type="checkbox"] { position: absolute; opacity: 0; cursor: inherit; } .radio::before, .checkbox::before { content: ""; display: inline-block; width: ...

    RadioButtonAndCheckdBox.zip

    无论是哪种编程环境,`RadioButton`和`CheckBox`都是构建用户友好的图形界面不可或缺的元素。正确理解和使用它们,可以帮助我们创建出更加灵活、易于操作的应用程序。在这个名为“RadioButtonAndCheckdBox”的项目中...

    html弹出窗体内涵单选,多选,分页

    要使它们成为一组,需设置相同的`name`属性。用户只能选择其中一个。例如: ``` &lt;input type="radio" id="option1" name="choice" value="1"&gt; &lt;label for="option1"&gt;选项1&lt;/label&gt; &lt;input type="radio" id=...

    asp网页设计中有关表单的实例

    在ASP(Active Server Pages)网页设计中,表单(Form)是用户与服务器交互的关键元素,主要用于收集用户输入的数据并将其...通过实践和学习,你将能够掌握ASP表单设计的精髓,为用户提供更加友好和高效的网页服务。

    QT常用控件编程.pdf

    这些是QT中最常用的控件之一,理解和熟练使用它们对于创建用户友好的图形界面至关重要。在实际编程中,还需要结合信号和槽机制,以及布局管理等其他QT特性,以实现更复杂的交互逻辑和界面布局。

    CSS3单选多选按钮美化特效.zip

    7. **HTML5**:在HTML5中,`&lt;input type="radio"&gt;`和`&lt;input type="checkbox"&gt;`元素可以配合`&lt;label&gt;`标签一起使用,实现更好的可用性和触控支持。例如,点击标签文字可以触发对应的输入元素,这对移动设备尤其友好...

    struts2表单标签(转) - 努力创造未来!

    首先,Struts2的表单标签主要分为两种类型:简单表单标签(s:textfield, s:password, s:textarea等)和复杂表单标签(s:form, s:submit, s:checkbox, s:radio等)。这些标签都是基于OGNL(Object-Graph Navigation ...

    Web程序开发:第7章 表单.pptx

    一个完整的表单可能包含各种输入控件、选择项和按钮,结合CSS样式和JavaScript交互,可以构建出复杂且用户友好的表单界面。 例如: ```html &lt;label for="username"&gt;用户名:&lt;/label&gt; ...

    web基础(二)使用于小白或者需要web基础复习的人

    `&lt;/form&gt;`标签闭合,其中包含各种表单元素,如文本输入框(`&lt;input type="text"&gt;`)、密码输入框(`&lt;input type="password"&gt;`)、复选框(`&lt;input type="checkbox"&gt;`)、单选按钮(`&lt;input type="radio"&gt;`)、下拉...

    网页设计,网页控件,div

    例如,`div`可以用来创建响应式设计,使页面在不同设备上显示得更加友好。 描述中提到的“实验3div的使用.html”可能是一个教程,展示如何使用div进行布局。可能包含如何创建多个div,设置它们的宽度、高度、边距和...

    jQuery单选框和复选框美化代码.zip

    例如,通过`$('input[type="radio"]')`和`$('input[type="checkbox"]')`,我们可以方便地选中所有的单选框和复选框。然后,可以使用`.addClass()`、`.removeClass()`和`.toggleClass()`等方法来动态添加、移除或切换...

    Bootstrap4响应式登录注册和找回密码页

    此外,还可以使用`.checkbox`或`.radio`类创建复选框和单选按钮,以获取用户同意服务条款等信息。 找回密码页面通常包含邮箱输入框和发送重置链接的按钮。为了防止恶意攻击,可以添加验证码组件,这可以通过集成第...

    jQuery复选框美化插件labelauty

    jQuery Check beauty - labelauty 插件是一款用于复选框(checkbox)和单选框(radio button)样式的美化工具,它能将原始的HTML输入元素转换为更具吸引力和用户友好的设计。这款插件适用于那些希望提升网页界面美观...

    后台登陆页HTML5网页模板_后台 登陆 login form.rar

    `&lt;input type="checkbox"&gt;`或`&lt;input type="radio"&gt;`可以用来设置记住密码或自动登录的功能。而`&lt;input type="submit"&gt;`用于提交表单,触发服务器验证和登录过程。 HTML5还引入了`&lt;fieldset&gt;`和`&lt;legend&gt;`,它们能...

    CSS3单选按钮和复选按钮特效.zip

    其次,CSS3的`border-radius`属性可以创建圆角,让按钮看起来更加现代和友好。通过调整数值,我们可以创建不同大小的圆角效果,甚至制作出完全圆形的按钮。同时,`box-shadow`属性可以添加阴影效果,使按钮看起来有...

    HTML表单和输入.pdf

    HTML表单是网页设计中不可或缺的一部分,用于收集用户输入的数据,这些数据通常会被发送到服务器进行处理,例如登录、注册、填写调查等操作。...熟练掌握表单的使用,能够帮助你构建更强大、用户友好的Web应用程序。

Global site tag (gtag.js) - Google Analytics