label标签和input标签之间的关系

在用到点击出现效果的时候总会用到label标签和input标签，当时也不是很明白，直到看了一篇博客之后才恍然大悟。

下面是文章链接

http://t.csdn.cn/rzVG0

运用input标签里面的radio属性的时候是单选框，单选框只是一个小点，实际应用起来很不方便，因此将label标签和input标签结合起来应用可以提高用户的体验感。

下面是具体应用

1.正常写法

<label for="radio">页面1</label><input type="radio" id="radio" name="r"><label for="radio1">页面2</label><input type="radio" id="radio1" name="r">

其中input的id属性与label的for属性相关联

这样当点击label标签的时候焦点就会聚集到input标签上面

2.镶嵌式写法

<label><input type="radio" name="n">页面1</label>
<label><input type="radio" name="n">页面2</label>

这样就可以不用写id属性和for属性了，简化了代码

label标签和input标签之间的关系相关推荐

label标签与input标签的对齐问题
如果要实现上面这种对齐效果,直接拉到文章底,反正我会说一堆废话.jpg 在这里使用的是嵌套格式: <label>Text<input/></label> 而非通常的 ...
iframe关闭当前窗口_iframe 、 a标签、input标签
1 npm i -g http-server 全局安装本地服务器,预览html文件或者不安装提交到github 里面,再用它提供的预览链接看注意:安装成功后,启动时可以直接是http-server ...
表单项标签的input标签的单选框（radio）
<input type="radio" name="gender" value="male"> 男 <input type ...
html 输入框标签讲解,input标签详解
一,标签定义及使用说明 1. 标签规定了用户可以在其中输入数据的输入字段. 2. 元素在元素中使用,用来声明允许用户输入数据的 input 控件. 输入字段可通过多种方式改变,取决于 type 属性 ...
【04】HTML5+CSS3：01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天一.什么是 `HTML5` 二.`HTML5 ` 新增标签三.多媒体音频标签四.多媒体视频标签五.新增 input 标签六.新增表单属性七.`CSS3 ` 属性 ...
BUTTON标签和INPUT标签的区别【转】
一句话概括主题:<button>具有<input type="button" ... >相同的作用但是在可操控性方面更加强大. HTML 4.01规范的Fo ...
谈谈button标签和input标签的区别
一句话概括主题:<button>具有<input type="button" ... >相同的作用但是在可操控性方面更加强大. <button> ...
在写移动端时，a标签或者input标签等在手机上点击背后会有阴影的解决办法
a,input{-webkit-tap-highlight-color:rgba(255,0,0,0);} 被背景设置成透明的就行了转载于:https://www.cnblogs.com/Nick- ...
关于编辑器对input标签报错提示“表单输入没有相关label”的问题
相信很多朋友在制作表单的时候,我们的编辑器会有下图的相关提示吧我们发现虽然这样并不影响我们的正常使用,但是看着这样的报错提示总是很让人心烦,那么这到底是为什么呢? 其实,这是因为编辑器建议我们在使用 ...

label标签和input标签之间的关系

label标签和input标签之间的关系相关推荐

最新文章

热门文章