标签行为匹配输入字段

-3

以下是我的代码，我需要到达标签名称将与我的字段当前所执行的行为匹配的位置。如果没有输入任何内容，则该字段将更改为红色背景。如果它聚焦，它会回到白色。我需要标签的字体颜色来匹配字段的颜色并匹配相同的行为。标签行为匹配输入字段

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Lab06 - Form Validation</title> 
<script type="text/javascript" charset="utf-8"> 



    function passcheck(){ 
     var pw1 = document.forms[ 0 ].password.value; 
     var pw2 = document.forms[ 0 ].passcomf.value; 

     if (pw1 != pw2) { 
      alert ("You did not enter the same new password twice. Please re-enter your password."); 
      return false; 
     }else{ 
      return true; 
     } 
    } 


    function validate() { 
     var errors = new Array(); 

     for(var i = 0; i < document.forms[ 0 ].elements.length ; i++){ 

      if(document.forms[ 0 ].elements[ i ].type == "text") { 
       if(document.forms[ 0 ].elements[ i ].value == ""){ 
        errors.push("The " + document.forms[ 0 ].elements[ i ].name + " field cannot be blank.\n"); 

        document.forms[ 0 ].elements[ i ].className = "in_error"; 



       } 


      } 

      if(document.forms[ 0 ].elements[ i ].type == "select-one") { 
       if(document.forms[ 0 ].elements[ i ].selectedIndex == 0) { 
        errors.push("The " + document.forms[ 0 ].elements[ i ].name + ' was not "Yes, I agree!", you must agree to the "User Agreement."\n'); 

        document.forms[ 0 ].elements[ i ].className = "in_error"; 
       } 
     } 

      if(document.forms[ 0 ].elements[ i ].type == "select-one") { 
       if(document.forms[ 0 ].elements[ i ].selectedIndex == 2) { 
        errors.push("The " + document.forms[ 0 ].elements[ i ].name + ' was not "Yes, I agree!", you must agree to the "User Agreement."\n'); 

        document.forms[ 0 ].elements[ i ].className = "in_error"; 
       } 
     } 







    } 
     if(errors.length == 0) { 
      return true; 
     } else { 
      clear_errors(); 
      show_errors(errors); 

      return false; 
     } 


    } 



    function clear_errors(){ 
     var div = document.getElementById("errors"); 
     while(div.hasChildNodes()){ 
      div.removeChild(div.firstChild); 
     } 
    } 

    function show_errors (errors) { 
     var div = document.getElementById("errors"); 
     for(var i = 0; i < errors.length; i++){ 
      var error = document.createTextNode(errors[ i ]); 
      var p = document.createElement("p"); 
      p.appendChild(error); 
      div.appendChild(p); 
     } 
    } 


    window.onload = function() { 
     document.forms[ 0 ].onsubmit = validate; 

    } 



</script> 


<style type="text/css" media="screen"> 
    #errors { 
     color: #F00; 
    } 
    .in_error { 
     background-color: #F00; 
    } 
    input:focus { 
     background-color: #FFF; 
    } 
    select:focus { 
     background-color: #FFF; 
    } 
</style> 

</head> 

<body> 

    <h1>Form Validation</h1> 

    <div id="errors"></div> 

    <form action="" method="post" onsubmit="return passcheck()"> 
     <p> 
      <label for="firstname" id="labelfirstname">First name:</label> 
      <input type="text" name="First name" value="" id="firstname" /> 
     </p> 
     <p> 
      <label for="lastname" id="labellastname">Last name:</label> 
      <input type="text" name="Last name" value="" id="lastname"/> 
     </p> 
     <p> 
      <label for="middlei" id="labelmiddlei">Middle initial:</label> 
      <input type="text" name="Middle initial" value="" id="middlei"/> 
     </p> 
     <p> 
      <label for="address" id="labeladdress">Street address:</label> 
      <input type="text" name="Street address" value="" id="address"/> 
     </p> 
     <p> 
      <label for="city" id="labelcity">City:</label> 
      <input type="text" name="City" value="" id="city"/> 
     </p> 
     <p> 
      <label for="State" id="labelstate">State:</label> 
      <input type="text" name="State" value="" id="state"/> 
     </p> 
     <p> 
      <label for="zipcode" id="idzipcode">Zipcode:</label> 
      <input type="text" name="Zipcode" value="" id="zipcode"/> 
     </p> 
     <p> 
      <label for="username" id="labelusername">Username:</label> 
      <input type="text" name="Username" value="" id="username"/> 
     </p> 
     <p> 
      <label for="password" id="labelpassword">Password:</label> 
      <input type="text" name="Password" value="" id="password"/> 
     </p> 
     <p> 
      <label for="passcomf" id="labelpasscomf">Password comfirmation:</label> 
      <input type="text" name="Password comfirmation" value="" id="passcomf"/> 
     </p> 
     <p> 
      <label for="agreement" id="labelagreement">User Agreement</label> 
      <select name="User Agreement" id="agreement"> 
       <option></option> 
       <option>Yes, I agree!</option> 
       <option>No, I do not agree!</option> 
       </select> 
     </p> 
     <p><input type="submit" value="Register &rarr;" onclick="return passcheck(); return true;"/></p> 
     </form> 
</body> 

    </html>

来源

2011-11-12 user1043654

如果您移动label元素后的input元素，然后通过一个float其位置（或其他方式来获得他们的权利），那么你就可以改变你的CSS使用相邻兄弟选择器得到你的效果。下面是CSS的测试样品：

input, 
select { 
    float: right; 
    clear: right; 
} 
label, 
.in_error:focus + label { 
    color: black; 
} 
#errors, 
input.in_error + label { 
    color: #F00; 
} 
.in_error { 
    background-color: #F00; 
} 
input:focus { 
    background-color: #FFF; 
} 
select:focus { 
    background-color: #FFF; 
}

当然，下侧是HTML是不与label继input逻辑顺序。除了JavaScript解决方案之外，我还没有意识到如何在不重新排序元素的情况下使用纯CSS执行此操作。

来源

2011-11-12 23:49:35 ScottS

标签行为匹配输入字段

回答

相关问题