html中label标签的用法 测试开发全栈-HTML
原创

html中label标签的用法 测试开发全栈-HTML

好文
试试语音读文章

热门答案:

说完了标签属性后。接着说下HTML中最后的标签–label

<label>标签为input元素定义标注。用于绑定一个表单元素。当点击一个<label>标签内的文本时。浏览器就会自动讲焦点(光标)转到或者选择对应的表单元素上。用来增加用户体验。接着看下语法:

<label for=”sex”>男</label>

<input type=”radio” name=”sex” id=”sex”>

<label>里的for和<input>里的id需要对应起来。值需要是一样的。即核心点为: <label>标签的for属性应当与<input>元素的id属性相同。可以看下效果:

首先是名称+单选框

「测试开发全栈-HTML」(18) label标签的使用

之前点击单选框。必须要点击到小圆圈按钮处才行。现在点击颜色+小圆圈区域就可以了。

「测试开发全栈-HTML」(18) label标签的使用

来看看代码展示:

<!DOCTYPEhtml>

<htmllang=”en”>

<head>

<metacharset=”UTF-8″>

<metahttp-equiv=”X-UA-Compatible”content=”IE=edge”>

<metaname=”viewport”content=”width=device-width, initial-scale=1.0″>

<title>Document</title>

</head>

<body>

<labelfor=”color”>

颜色

</label>

<inputtype=”radio”name=”红色”id=”color”>

</body>

</html>

其中for和id都是color, 我们加上复选框看看效果

「测试开发全栈-HTML」(18) label标签的使用

点击后的效果:

「测试开发全栈-HTML」(18) label标签的使用

然后看看已经添加了的代码:

<labelfor=”color”>

颜色

</label>

<inputtype=”radio”name=”红色”id=”color”>

蓝色<inputtype=”checkbox”name=”蓝色”id=”color”>

绿色<inputtype=”checkbox”name=”绿色”id=”color”>

紫色<inputtype=”checkbox”name=”紫色”id=”color”>

这里就多了复选框。但是发现点击文字不能勾选。然后是没有加<label>标签属性。我们再加上试试(终于写出来代码bug)

「测试开发全栈-HTML」(18) label标签的使用

看下如何修改的代码:

<body>

<labelfor=”color”>

颜色

</label>

<inputtype=”radio”name=”红色”id=”color”>

<inputtype=”checkbox”name=”蓝色”id=”color1″><labelfor=”color1″>蓝色</label>

<inputtype=”checkbox”name=”绿色”id=”color2″><labelfor=”color2″>绿色</label>

<inputtype=”checkbox”name=”紫色”id=”color3″><labelfor=”color3″>紫色</label>

</body>

每一个控件都会有一个label和一个id一一对应

好的。今天就先这样了

大家还在搜:

  • html中label标签的用法
  • 更多网络推广文章推荐

    以上就是由互联网推广工程师 网创网 整理编辑的,如果觉得有帮助欢迎收藏转发~

    分享到 :
    相关推荐

    发表评论

    您的电子邮箱地址不会被公开。

    评论(2)

    • 旧日梦 永久VIP 2022年10月12日 22:50:47

      标签,测试,紫色,属性,元素,颜色,蓝色,代码,红色,圆圈

    • 陌念 永久VIP 2022年10月12日 22:50:47

      html中label标签的用法 测试开发全栈-HTML,现在知道了,不过这这篇解答确实也是太好了

    • 意中人 永久VIP 2022年10月12日 22:50:47

      说完了标签属性后。接着说下HTML中最后的标签label