用css格式化表格答案

【问题标题】：Formatting form with css用css格式化表格
【发布时间】：2019-12-15 17:04:51
【问题描述】：

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

【问题讨论】：

您的“代码”显示出严重缺乏理解。我建议你回到更简单的例子，并建立自己的知识。
您应该回复那些试图帮助您的人。这就是这个网站的运作方式。

标签： javascript html css

【解决方案1】：

像这样改变你的html标签

...

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

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

【讨论】：

【解决方案2】：

您正在混合 CSS 和 Javascript。 CSS 应该与 script 标签分离并放置在 style 标签中。使用 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>

【讨论】：