用css格式化表单

时间:2014-11-24 23:44:43

标签: javascript html css

我不明白如何使用{c}改变form功能。我试图将form移到页面上的另一个位置作为示例。

<!DOCTYPE html>
<html>
<head>


<script type = "text/javascript">
var count = 2;

function validate() {
    var un = document.myform.username.value;
    var pw = document.myform.pword.value;
    var valid = false;

    var unArray = ["Philip", "George", "Sarah", "Michael"];
    var pwArray = ["Password1", "Password2", "Password3", "Password4"];

    for (var i=0; i <unArray.length; i++) {
        if ((un == unArray[i]) && (pw == pwArray[i])) {
        valid = true;
            break;
        }
    }

    if (valid) {
        alert ("Login was successful");
        window.location = "http://www.google.com";
        return false;
    }

    var t = " tries";

    if (count == 1) {t = " try"}

    if (count >= 1) {
        alert ("Invalid username and/or password. " +
               "You have " + count + t + " left.");
        document.myform.username.value = "";
        document.myform.pword.value = "";
        setTimeout("document.myform.username.focus()", 25);
        setTimeout("document.myform.username.select()", 25);
        count --;
    }

    else {
        alert ("Still incorrect! You have no more tries left!");
        document.myform.username.value = "No more tries allowed!";
        document.myform.pword.value = "";
        document.myform.username.disabled = true;
        document.myform.pword.disabled = true;
        return false;
    }

}

<!--this-->
    p.log_on{
    position: fixed;
    top: 34px;
    right: 29px;
}

</script>




</head>


<body>

<!--here-->
<form name = "myform">
  <p class="log_on">
    ENTER USER NAME <input type="text" name="username">
    ENTER PASSWORD <input type="password" name="pword">
    <input type="button" value="Check In" name="Submit" onclick="validate()">
  </p>
</form>
<!--to here-->

</body>


</html>

2 个答案:

答案 0 :(得分:0)

只需更改你的html标签

...

document.myform.pword.disabled = true;
        return false;
    }

}
</script>
<style>
p.log_on{
    position: fixed;
    top: 34px;
    right: 29px;
}
</style>
</head>
<body>
...

答案 1 :(得分:0)

你正在混合CSS和Javascript。 CSS应与脚本标记分开并放在样式标记中。使用Javacript作为登录系统并不是特别强大。


<head>
  <script type = "text/javascript">
    var count = 2;

    function validate() {
      var un = document.myform.username.value;
      var pw = document.myform.pword.value;
      var valid = false;

      var unArray = ["Philip", "George", "Sarah", "Michael"];
      var pwArray = ["Password1", "Password2", "Password3", "Password4"];

      for (var i=0; i <unArray.length; i++) {
        if ((un == unArray[i]) && (pw == pwArray[i])) {
         valid = true;
         break;
       }
      }

     if (valid) {
       alert ("Login was successful");
       window.location = "http://www.google.com";
      return false;
    }

    var t = " tries";

    if (count == 1) {t = " try"}

    if (count >= 1) {
       alert ("Invalid username and/or password. " +
           "You have " + count + t + " left.");
         document.myform.username.value = "";
         document.myform.pword.value = "";
         setTimeout("document.myform.username.focus()", 25);
         setTimeout("document.myform.username.select()", 25);
        count --;
    }

   else {
       alert ("Still incorrect! You have no more tries left!");
       document.myform.username.value = "No more tries allowed!";
       document.myform.pword.value = "";
       document.myform.username.disabled = true;
      document.myform.pword.disabled = true;
      return false;
   }

} 

</script>

<style>

  p.log_on{
  position: fixed;
  top: 34px;
   right: 29px;
}

</style>