label标签使用过程中遇到的问题
最近在做东西时候使用到了label标签，由于之前很少使用label标签，所以就遇到一个很奇怪的问题。什么问题呢？下面来看一个效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML label tag 学习 by Typeof</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
.title {
margin: 10px;
}
.login-item, .login-button {
margin: 20px;
height: 30px;
}
.clearfix {
clear: both;
content: "";
display: block;
}
.login-item label {
float: left;
width: 70px;
}
.login-item .text {
height: 18px;
width: 200px;
float: left;
}
</style>
</head>
<body>
<div class="title">
label标签使用过程中遇到的问题
</div>
<div class="login-item clearfix">
<label for="username">用户名：</label>
<input type="text" class="text" id="username" name="username" />
<lable id="J_usernameError"></label>
</div>
<div class="login-item clearfix">
<label for="password">密 码：</label>
<input type="text" class="text" id="password" name="username" />
<label id="J_passwordError"></label>
</div>
<div class="login-button clearfix">
<input type="submit" value="登录" id="J_submitLogin" />
</div>
<script>
document.getElementById('J_submitLogin').onclick = function() {
var usernameError = document.getElementById('J_usernameError');
usernameError.innerHTML = '用户名错误';
};
</script>
</body>
</html>
label标签使用过程中遇到的问题的更多相关文章
- 在学习HTML——form表单中的label标签时的一点小体会
在我啃了一遍书本之后,开始了在慕课看视频的过程,从最开始的HTML+CSS的基础课程看起,在第5-9小节讲到了form表单的label标签, 首先看一下慕课的讲解: label 标签不会向用户呈现任 ...
- HTML中Div、span、label标签的区别
div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它 ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 说说HTML5中label标签的可访问性问题——张鑫旭
一.开篇叨叨 一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高 ...
- a标签中的label在IE下触发不了a标签的href链接（label标签——解析）
<a href="http://www.baidu.com/" target="_blank"> <span>百度</span&g ...
- 2017-3-2 C# WindowsForm 中label标签居中显示
有时候label标签要输出 label.text=""; 的语句,那么要把这个语句居中显示 1.要取消他的Autosize的值 2.拉大这个框,设置里面的文本的TextAlign ...
- React中 checkbox 与 label 标签的搭配
用<label>标签替代checkbox的点击样子,点击<label>实际上就是点击checkbox checkbox的checked值会跟着一起变 <input typ ...
- react中label标签的作用
当我们点击输入内容触发input焦点的时候,就需要使用到label标签里的htmlFor属性来扩大点击的区域 代码如下:
随机推荐
- 第五章 搭建S3C6410开发板的测试环境
在PC上可以开发Linux驱动,重新编译成ARM架构的Linux驱动模块,但最后还是要在开发板上进行测试.目前最流行的是基于三星S3C6410 ARM11架构的开发板,很多厂商在其基础上进行了扩展,开 ...
- Python基础知识之认识字符串
Python有一个名为“STR”与许多方便的功能(有一个名为“串”,你不应该使用旧的模块),内置的字符串类. 字符串常量可以通过双或单引号括起来,尽管单引号更常用. 反斜杠工作单,双引号内的文字通常的 ...
- Android：Layout_weight的深刻理解
最近写Demo,突然发现了Layout_weight这个属性,发现网上有很多关于这个属性的有意思的讨论,可是找了好多资料都没有找到一个能够说的清楚的,于是自己结合网上资料研究了一下,终于迎刃而解,写出 ...
- vector容器使用和assert断言关键字
C++里面的容器是个比较复杂的东西,我这篇只说vector容器怎么使用,详细的网搜. vector模板类其实是一个动态数组,跟自己用new关键字创建数组一样,只不过vector会自动帮我们用new和d ...
- SSH中，使用Filter拦截直接访问JSP页面！
话不多说,直接上代码 创建一个Filter类 package com.weibo.util; import java.io.IOException; import javax.servlet.Filt ...
- 使用 UnrealPak.exe 创建 Pak文件方法
看来各位摸UE4 的基佬们,也是被DLC搞得不要不要的呢,其实热更新PAK是很简单就可以实现的,虽然当时我也是弄了快一个月. 下面贴一段以前在 Runtime 状态下 Mount Pak的代码,希望能 ...
- 在Android Studio和Android Eclipse 更改现有项目里的SDK版本
一,在Eclipse下改项目里的SDK的版本方法有几种,都比较简单:1.右键单击项目--->properties---->Resource----->Android在Project ...
- POJ 1274 裸二分图匹配
题意:每头奶牛都只愿意在她们喜欢的那些牛栏中产奶,告诉每头奶牛愿意产奶的牛棚编号,求出最多能分配到的牛栏的数量. 分析:直接二分图匹配: #include<stdio.h> #includ ...
- [转]OOAD基本概念
转载地址:http://www.cnblogs.com/zfc2201/archive/2012/12/09/2810532.html 尊重原作者,转载请注明 学习目标: 1.理解与掌握面向对象的概念 ...
- pdf转成图片
http://blog.csdn.net/wydhao123/article/details/51596028 jar commons-logging.jar. pdfbox-2.0.1.jar.fo ...