label标签使用过程中遇到的问题分析及解决思路

摘要：最近在做东西时候使用到了label标签，由于之前很少使用label标签，所以就遇到一个很奇怪的问题。什么问题呢？下面来看一个效果HTMLla...

最近在做东西时候使用到了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">密&nbsp;&nbsp;码：</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标签使用过程中遇到的问题分析及解决思路】相关文章：

★ 看不到网页源代码方法汇总

★ Input的size与maxlength属性的区别自我理解

★ HTML基础:HTML表格标记及属性

★ html select标签的属性和方法

★ HTML表格的表主体标记

★ html中iframe控制父页面刷新实现思路及代码

★ 网站建设过程中常见的5个HTML错误

★ HTML网页头部代码

★ HTML代码:带有图片预览功能的上传表单

★ a标签伪类的作用及书写顺序是什么

上一篇：清空select标签中option选项的3种不同方式

下一篇： html中iframe控制父页面刷新实现思路及代码

学习工具