Form

HTML Form

2019/09/14 (微調內容)

基本概念

表單(Form)是動態HTML的基本概念之一，使用者可以透過Form傳送資料到web伺服器處理。比如，登入就是可以透過Form來完成。

基本語法

要定義一個HTML Form，首先要在<body></body>中間加上<form></form>，除此之外，在<form>要設定action及method，action是form要呼叫的對象，method則是呼叫的方法，一般而言，form所使用的方法為post，當沒有指定時，form會使用get，get 與post的差異，會另外解釋 (詳參: HTTP Request Methods)。因為通常form會傳送資料，所以，在<form></form>中間會有一些元件，如: <input>。每個input可以設定不同的型態 (type)，常用的型態有text及submit。如果型態是text，就是會看到一個文字框讓使用者輸入文字，如果是submit，就是會看到一個按鈕，可以讓使用者送出資料。每個input還可以設定name或value，如果型態是text，value就會是文字框內的文字，當型態是submit，value就會是按鈕上的文字，而name則是這個元件的名稱，如以下範例。

<!DOCTYPE html>
<html>
<body>

<form action="#" method ="post">

  name:<input type="text" name ="name" required="required"/>
 <input type="submit" value="Submit"/>

</form>

</body>
</html>

input還有一些型態，如:password就是用來輸入密碼、radio就是讓使用者從選項中挑選一個、checkbox就是讓使用者從選項中挑選多個(或不挑選)。請記得，當使用radio及checkbox時，如果要讓這些選項會成為一組，name必需要一樣，而checked則是設定該選項為預設選項，如以下範例。

<!DOCTYPE html>
<html>
<body>

<form action="#" method ="post">

  name:<input type="text" name ="name"/>
  <input type="radio" name="status" value="faculty" checked="checked"/> Faculty
  <input type="radio" name="status" value="student"/> Student
  <input type="submit" value="Submit"/>

</form>

</body>
</html>

以下範例是使用checkbox，當多個選項可以被勾選時，status要設定為陣列

<!DOCTYPE html>
<html>
<body>

<form action="#" method ="post">

  name:<input type="text" name ="name"/>
  <input type="checkbox" name="status[]" value="faculty" checked="checked"/> Faculty
  <input type="checkbox" name="status[]" value="student"/> Student
  <input type="submit" value="Submit"/>

</form>

</body>
</html>

在form裡，除了input之外，還可以使用select、textarea及button。

select就是下拉式選項，同樣的要定義name，如以下範例:

<!DOCTYPE html>
<html>
<body>

<form action="#" method ="post">

  name:<input type="text" name ="name"/>
  <select name ="status" >
    <option>Faculty</option>
    <option>Student</option>
  </select>
  <input type="submit" value="Submit"/>

</form>

</body>
</html>

當下拉選項設為multiple的話，則多個選項可以被選擇，每個選項則定義在<option></option>中，option也可以設value，也可以設該選項為預選(selected)，如以下範例:

<!DOCTYPE html>
<html>
<body>

<form action="#" method ="post">

  name:<input type="text" name ="name"/>
  <select name ="status[]" multiple="multiple">
    <option value="0" selected="selected">Faculty</option>
    <option value="1">Student</option>
  </select>
  <input type="submit" value="Submit"/>

</form>

</body>
</html>

textarea就是可以輸入多行的文字框，例如，可設10行(row)30列(column)，在<textarea></textarea>中間的內容就是預設的文字內容，如以下範例:

<!DOCTYPE html>
<html>
<body>

<form action="#" method ="post">

  name:<input type="text" name ="name"/>
  <textarea name ="comment" rows="10" cols="30">Please introduce yourself</textarea>
  <input type="submit" value="Submit"/>

</form>

</body>
</html>

botton是按鈕，也可以將input的submit，寫成button。

<!DOCTYPE html>
<html>
<body>

<form action="#" method ="post">

  name:<input type="text" name ="name"/>
 <button type="submit">Submit</button>

</form>

</body>
</html>

一般而言，按鈕是用來觸發一些動作(如:javascript)，而且，可以不必包在<form></form>，如:

<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="alert('Hi!')">Click</button>

</body>
</html>

也可以寫成function:

<!DOCTYPE html>
<html>
<head>
<script>
function popupMsg(msg) { //v1.0
  alert(msg);
}
</script>
</head>
<body>

<button type="button" onclick="popupMsg('Hi!')">Click</button>

</body>
</html>

另外，呼叫了action之後在伺服器那一端的處理(action及method的部份)，先不在此討論，因為，伺服器處理的這部份會在Form with PHP詳談。

可以利用HTML的一些語法進行簡單的檢查，如設定欄位為數字，最小值為1，最大值為5 (注意:有些語法在舊一點的瀏覽器上是無效的):

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

取得form內容，可以利用document.forms (詳參: Document.forms)，當登入被點選時，會去呼叫onsubmit所啟動的方法 (validateForm())，當回傳值是true，就會去執行submit的動作，也就是去啟動action(重新呼叫本頁面)，當回傳值是false，就不會去執行submit的動作，停留在剛剛的狀況。

<html>
  <head>
    <meta charset="utf-8">
    <script>
      function validateForm() {
        var x = document.forms["myForm"]["account"].value;
        if (x == "") {
          alert("Name must be filled out");
          return false;
        }
      }
    </script>
    </head>
    <body>
    
    <form name="myForm" action="#" onsubmit="return validateForm()" method ="post">
      <div id ="input">
      帳號: <input type="text" name="account"><br>
      密碼: <input type="password" name="password"><br>
      </div>
    <input type="submit" name="submit" value="登入">
    </form>
    
    </body>
</html>

當onsubmit忘了return時，那就不會去管return值，會一直去啟動action(重新呼叫本頁面)。

<form name="myForm" action="#" onsubmit="validateForm()" method ="post">

也可以這樣寫:

<html>
  <head>
    <meta charset="utf-8">
    <script>
      function validateForm() {
        var x = document.forms["myForm"]["account"].value;
        if (x == "") {
          alert("Name must be filled out");
          return false;
        }
      }
    </script>
    </head>
    <body>
    
    <form name="myForm" action="#"  method ="post">
      <div id ="input">
      帳號: <input type="text" name="account"><br>
      密碼: <input type="password" name="password"><br>
      </div>
    <input type="submit" name="submit" onclick="return validateForm()" value="登入">
    </form>
    
    </body>
</html>

當onclick忘了return時，那就不會去管return值，會一直去啟動action(重新呼叫本頁面)。

<input type="submit" name="submit" onclick="validateForm()" value="登入">

** 注意** 如果將按鈕設為一般的按鈕，那就完全不會去啟動action(重新呼叫本頁面)。

<input type="button" name="submit" onclick="return validateForm()" value="登入">

** 作業 **

  • 利用form及javascript完成一個簡單的登入畫面

login.html

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    
    <form action="login.php" method="post">
    帳號: <input type="text" name="account"><br>
    密碼: <input type="password" name="password"><br>
    <input type="submit" value="登入">
    </form>
    
    </body>
</html>

** 注意 ** 一般的web application都是靠View進行輸入的驗證，然而，前端的驗證可能會因為瀏覽器的版本或java script被使用者停用而失效，所以，利用伺服器端的驗證是比較安全的。所以，一般javascript的驗證會是進行內容的簡單檢查與提醒，而不是進行登入驗證。

可以挑戰一下自己:

參考資料