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. 青岛Uber优步司机奖励政策(8/10-8/16)

    亲爱的Uber青岛优步的大司机朋友们,又到了每周发布奖励细则的时刻啦!下一周的奖励与上周有所不同,请一定要仔细按照自己的情况阅读!另外,之前参与过投票并表示想加入新小时保底政策的老司机朋友们从本周起, ...

  2. Linux命令应用大词典-第10章 Shell相关命令

    10.1 commond:抑制正常的Shell函数查找 10.2 exec:使用执行命令替换当前的shell进程 10.3 bash:GNU的Bourne-Again Shell解释器 10.4 bu ...

  3. Python 关键字参数和可变参数

    关键字参数 如果你有一些具有许多参数的函数,而你又希望只对其中的一些进行指定,那么你可以通过命名它们来给这些参数赋值——这就是python关键字参数(Keyword Arguments)——我们使用命 ...

  4. js for循环实例

    1.求1-100的寄数和? //2.奇数求和 var ppt=0 for(var i=1;i<=100;i+=2){ ppt+=i } 2.求1-100的偶数和 var num=0 for(va ...

  5. 转战Java~

    记得16年5月份开始学的Java,当时就是为了学Hadoop才学的Java基础,之后Hadoop没学成,倒是学了Java Web的东西,当时就是玩玩,然后弄了个WeChat后台,就完事了.然后就又回到 ...

  6. 从hive导入到oracle(Hcatalog)

    1.使用catalog的情况下: sqoop export --table tableName2 \ #oracle表 --connect jdbc:oracle:thin:@127.0.0.1:15 ...

  7. [leetcode-718-Maximum Length of Repeated Subarray]

    Given two integer arrays A and B, return the maximum length of an subarray that appears in both arra ...

  8. 【备忘】mysql常用操作汇总

    1.增删改查 // 插入一条数据 insert into tableName values('liu','bei') // 删除一条数据 delete from tableName where las ...

  9. php 连接redis查询数据

    class Layoutdemo{ function index(){ $db = new Db(); $id=390; $layout_json = array(); if($info = $db- ...

  10. Phpcms V9导航循环下拉菜单的调用技巧

    这个方法基于PC V9官方模版中的调用方法,然后利用后台的“Phpcms V9菜单是否显示设置”控制菜单是否显示出来. 先看看最后的效果: 调用方法: <div id="navbar& ...