使用 css 格式化表单

Formatting form with css

本文关键字：表单 格式化 css 使用      更新时间：2023-09-26

我不明白如何使用 css 使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>

只需像这样更改您的 html 标签即可

...
document.myform.pword.disabled = true;
        return false;
    }
}
</script>
<style>
p.log_on{
    position: fixed;
    top: 34px;
    right: 29px;
}
</style>
</head>
<body>
...

你正在混合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>

相关文章：