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>

运行结果：

html的body内标签之label标签和fieldset标签的更多相关文章

  1. 列表框、分组列表框、标签（label）、分组框（fieldset）、框架(frameset)

    列表框(select) 下拉列表,用户可以从一些可选项中选择. 示例:简单的下拉列表 <select name="country"> <option value= ...

  2. 1. HTML <fieldset> 标签

    定义和用法 fieldset 元素可将表单内的相关元素分组. <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段. 当一组表单元素放到 <fieldset> ...

  3. 8、html的body内标签之fieldset标签和label标签

    一.label标签 <label> 标签为 input 元素定义标签(label). label 元素不会向用户呈现任何特殊的样式.不过,它为鼠标用户改善了可用性,因为如果用户点击 lab ...

  4. Chapter 5. Label and Entry Widgets 标签和输入部件

    Chapter 5. Label and Entry Widgets  标签和输入部件 有时候,你需要用户输入特定的信息,比如他们的名字,地址或者 甚至序号. 简单的方式来实现这个是使用Enry 部件 ...

  5. python 之 前端开发（form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列表、textarea标签、fieldset标签、table标签）

    11.25 form标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  6. HTML <fieldset> 标签将表单内的相关元素分组

    <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段. 当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边 ...

  7. Cocos2d-x 3.0标签类Label

    Cocos2d-x 3.0后推出了新的标签类Label,这种标签通过使用FreeType[1]来使它在不同的平台上有相同的视觉效果.由于使用更快的缓存代理,它的渲染也将更加快速.Label提供了描边和 ...

  8. 小tips：JS语法之标签（label）

    JavaScript语言允许,语句的前面有标签(label),相当于定位符,用于跳转到程序的任意位置,标签的格式如下. label: statement 标签可以是任意的标识符,但是不能是保留字,语句 ...

  9. Label Propagation Algorithm LPA 标签传播算法解析及matlab代码实现

    转载请注明出处:http://www.cnblogs.com/bethansy/p/6953625.html LPA算法的思路: 首先每个节点有一个自己特有的标签,节点会选择自己邻居中出现次数最多的标 ...

随机推荐

  1. 单例模式之pymysql运用实例

    何为单例? 简单介绍一下下:单例是个什么鬼东西!!!! 单例模式含义] 单例模式是一种常用的软件设计模式.在它的核心结构中只包含一个被称为单例类的特殊类.通过单例模式可以保证系统中一个类只有一个实例而 ...

  2. maven私有库搭建

    一.在企业中基本上都会有自己的maven私有库,主要的目的就是方便依赖包的下载.如果采用远程的方式来实现的话,很多时候会考虑网速问题.如果自己活着公司搭建的私有库,这一样在使用上面会效率更高. 二.私 ...

  3. Python 列表下标操作

    Python  列表下标操作 引用网址: https://www.jianshu.com/p/a98e935e4d46

  4. JMeter性能测试的基础知识和个人理解

    JMeter性能测试的基础知识和个人理解 1. JMeter的简介   JMeter是Apache组织开发的开源项目,设计之初是用于做性能测试的,同时它在实现对各种接口的调用方面做的比较成熟,因此,常 ...

  5. Appium（Python）测试混血App

    Hybrid App(混合模式移动应用)是指介于web-app.native-app这两者之间的app兼具Native App良好用户交互体验的优势和Web App跨平台开发的优势 HybridApp ...

  6. 第4章 TCP/IP通信案例:访问Internet上的Web服务器

    第4章 TCP/IP通信案例:访问Internet上的Web服务器 4.2 部署代理服务器 书中为了演示访问Internet上的Web服务器的全过程,使用了squid代理服务器程序模拟了一个代理服务器 ...

  7. 原生js实现轮播图原理

    轮播图的原理1.图片移动实现原理:利用浮动将所有所有照片依次排成一行,给这一长串图片添加一个父级的遮罩,每次只显示一张图,其余的都隐藏起来.对图片添加绝对定位,通过控制left属性,实现照片的移动. ...

  8. leetcode-颜色分类

     颜色分类     给定一个包含红色.白色和蓝色,一共 n 个元素的数组,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色.白色.蓝色顺序排列. 此题中,我们使用整数 0. 1 和 2 分别表示 ...

  9. 【halcon】算子

    算子 rgb1_to_gray  灰度化 threshold:英文是阈的意思    二值化算子 Connection Compute connected components of a region. ...

  10. CodeForces 908C. New Year and Curling 解题报告 Java

    1. 思路 这题实际上是个几何问题——两个外相切的圆,由勾股定理,他们的纵坐标有以下的规律: 则有$$y_{n+1} = y_{n} + \sqrt{(2r)^2 - (x_{n} - x_{n+1} ...