zoukankan      html  css  js  c++  java
  • html的body内标签之label标签和fieldset标签

    1.

    <label> 标签为 input 元素定义标注(标记)。

    label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

    <label> 标签的 for 属性应当与相关元素的 id 属性相同。

    "for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

    label的基本使用方法:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <label>用户名:</label>
        <input type="text" name="user"/>
    </body>
    </html>
    

     运行结果:

    2. 通过for获取了光标,与input关联上。点击文字,使得关联的文字获取光标。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <label for="username">用户名:</label>
        <input id="username" type="text"/>
    </body>
    </html>
    

     运行结果:

    2. fieldset的用法:<fieldset> 标签会在相关表单元素周围绘制边框。

    <legend>login</legend>: 作用就是画了一个框

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <label for="username">用户名:</label>
        <input id="username" type="text" name="user"/>
        <fieldset>
            <legend>login</legend>
            <label for="username">用户名:</label>
            <input id="username" type="text" name="user"/ >
            <br/>
            <label for="pwd">密码:</label>
            <input id="pwd" type="text" name="pwd"/ >
        </fieldset>
    </body>
    </html>
    

     运行结果:

  • 相关阅读:
    centos7.6 安装与配置 MongoDB yum方式
    MongoDB 介绍
    centos 关闭selinux
    前端 HTML标签属性
    前端 HTML 标签嵌套规则
    前端 HTML 标签分类
    前端 HTML body标签相关内容 常用标签 表单标签 form里面的 input标签介绍
    前端 HTML body标签相关内容 常用标签 表单标签 form 表单控件分类
    前端 HTML form表单标签 select标签 option 下拉框
    POJ 1426
  • 原文地址:https://www.cnblogs.com/momo8238/p/7401760.html
Copyright © 2011-2022 走看看