HTML Form 介紹

發表於

Form Syntax

HTML 的 <form> 是用來收集使用者輸入的資料，在 form 標籤內會包含許多 Form elements，Form elements 是 <input> 標籤下各種不同的type，像是 text, radio, submit 等等，格式如下:

1
2
3
4
5
<form>
.
form elements
.
</form>

Type Description
<input type=”text”> Defines a one-line text input field
<input type=”radio”> Defins a radio button (for selecting one of many choices)
<input type=”submit”> Defines a submit button (for submitting the form)

input Element

<input> 是表單中最主要的一個 element，它可以根據 type attribute 而有不同的顯示方式和功能。

Text Input

<input type=”text”> 定義一個text input。

1
2
3
4
5
6
<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

Result:

Radio Button Input

<input type=”radio”> 定義一個 radio button。
radio button 讓使用者只能選擇一個選項。

1
2
3
4
5
<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

Result:

The Submit Button

<input type=”submit”> 定義一個按鈕用來傳送表單資料。
透過 Form 的 action attribute 來傳送至指定的頁面去。

1
2
3
4
5
6
7
<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

Result:

Action Atrribute

Action attribute 用來定義 submit 以後的 form data，要送往哪個 Web Page，如果沒有寫 action attribute 會將資料送往當前頁面。

1
<form action="/action_page.php">

Method Attribute

method attribute 定義要使用哪一種 HTTP method，在這有兩個選項：

  • GET (Default): 這個方式送出的資料會出現在 web page 的 address field 之中，所以像密碼或是其他重要資訊的資料就不能用這種方式傳送，且 GET 方式有資料大小限制。

    /action_page.php?firstname=Mickey&lastname=Mouse

  • POST : 這個方式不會將資料顯示在 address field，會打包起來送去給指定的頁面，且沒有大小限制，所以一些重要資料建議使用這個方式。

1
2
3
<form action="/action_page.php" method="get">
<form action="/action_page.php" method="post">

Name Attribute

每一個 input field 必須要有 name attribute，才能在 submit 時會被送出，反之則不會被當作資料送出。
如下範例，只有 “lastname” 會在 submit 時被送出。

1
2
3
4
5
6
7
<form action="/action_page.php">
  First name:<br>
  <input type="text" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

Grouping Form Data with fieldset

使用<fieldset>可以將表單分類，<legend> 則用來定義這一個表單的標題名稱。

1
2
3
4
5
6
7
8
9
10
<form action="/action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

Result:

Form Elements

Select Element

<select> 會生成一個 下拉式選單(drop-down list)。
<option> 定義每一個可選的項目。
selected 定義初始選擇的項目。

1
2
3
4
5
6
<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab" selected>Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

textarea Element

<textarea>定義多行的文字輸入。
rows attribute 定義在 textarea 可視的行數。
cols attribute 定義在 textarea 可視的寬度。

1
2
3
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

Result:

button Element

<button>定義一個可點選的按鈕。

1
<button type="button" onclick="alert('Hello World!')">Click Me</button>

HTML5 新增了三個 Elements

  • <datalist>
  • <keygen>
  • <output>

    datalist Elemnet

    <datalist>除了 Safari 不支援外，其他 Browser 都支援。
    它也是提供一個下拉式選單，不過跟 <select>的差異在於，它可讓使用者另外自己輸入想要的內容。
    <input>裡的 list attribute 必須與 <datalist> 裡的 id attribute 的值一致。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <form action="/action_page.php">
      <input list="browsers">
      <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
      </datalist> 
    </form>

keygen Element

<keygen> 提供加密的方式傳送資料，當表單 submit 時會產生兩個 key，public key 和 private key，public key 會送至 server，而private key 會留在本地，未來可以作為驗證。

1
2
3
4
5
<form action="/action_page.php">
  Username: <input type="text" name="user">
  Encryption: <keygen name="security">
  <input type="submit">
</form>

Output Element

<output>可用來輸出script計算的值。

1
2
3
4
5
6
7
8
9
10
11
<form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

Input Types

Password

<input type=”password”> 定義一個 password field，輸入的資料將會被遮蔽。

1
2
3
4
5
6
<form>
  User name:<br>
  <input type="text" name="username"><br>
  User password:<br>
  <input type="password" name="psw">
</form>

Result:

Reset

<input type=”reset”> 定義一個 reset button，會重置所有在 form 裡的資料回預設值。

1
2
3
4
5
6
7
8
<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>

Result:

Checkbox

<input type=”checkbox”> 定義一個checkbox清單，可以讓使用者選擇零到多個選項。

1
2
3
4
<form>
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car 
</form>

Result:

Button

<input type=”button”> 定義一個按鈕。

1
<input type="button" onclick="alert('Hello World!')" value="Click Me!">

Result:

HTML5 New Input Types

HTML5 新增的 input types 如下：

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Color

<input type=”color”> 會產生一個 color picker 給使用者來選擇，如果 browser 有support就會出現。

1
2
3
4
<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

Date

<input type=”date”> 會產生一個 date picker 給使用者來選擇，如果 browser 有support就會出現。

1
2
3
4
5
6
7
8
9
10
11
12
<form>
  Birthday:
  <input type="date" name="bday">
</form>
<!-- 你也可以增加一些限制條件 -->
<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

Datetime-local

<input type=”datetime-local”> 提供使用者日期和時間的設定，但不包括 time zone ，如果 browser 有support就會出現。

1
2
3
4
<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

Email

<input type=”email”>，提供一個 input field 會檢查使用者輸入的資料是否符合 email 格式，如果 browser 有support就能驗證email format。

1
2
3
4
<form>
  E-mail:
  <input type="email" name="email">
</form>

Month

<input type=”month”> 提供使用者選擇 月 跟 年，如果 browser 有support就會出現。

1
2
3
4
<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

Number

<input type=”number”> 提供一個可選擇數字的 input field，你可以限制數字的範圍。

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

Range

<input type=”range”> 定義一個類似 slide control，可使用者滑動來選擇數值，預設的範圍是 0 ~ 100，可自己指定 min, max, step attribute來限制一些條件。

1
2
3
<form>
  <input type="range" name="points" min="0" max="10">
</form>

<input type=”search”> 提供一個搜尋框， Browser會將其調整圓邊且提供清除輸入資料的叉叉按鈕，

1
2
3
4
<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

Tel

<input type=”tel”> 提供一個輸入電話號碼的 input field，不過現在幾乎各家 Browser都還不支援。

1
2
3
4
<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

Time

<input type=”time”> 提供使用者選擇時間但不包含 time zone，
如果 browser 有support就會出現。

1
2
3
4
<form>
  Select a time:
  <input type="time" name="usr_time">
</form>

URL

<input type=”url”> 提供一個 input field 可以驗證使用者輸入的資料是否符合 URL fromat，如果 browser 有支援就可提供驗證功能。

1
2
3
4
<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>

Week

<input type=”week”> 提供使用者選擇 週 和 年，如果 browser 有support就會出現。

1
2
3
4
<form>
  Select a week:
  <input type="week" name="week_year">
</form>

Input Attributes

下表是 input 標籤內可用的一些限制條件

Attribute Description
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field

Value

設定 input field 裡的初始值。

1
2
3
4
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
</form>

Readonly

設定 input field 只能 readonly不能被修改，在 submit 時資料依然能夠被傳送。

1
2
3
4
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
</form>

Disabled

功能上與 Readonly 相當接近，但 disabled 在 submit 時不會被傳送出去。

1
2
3
4
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
</form>

Size

設定 input field 的長度。

1
2
3
4
5
6
7
8
9
10
11
12
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
</form>
``` 
## MaxLength
設定輸入資料的長度限制。
```html
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
</form>

以下是 HTML5 為<input>新增的 Attributes

  • aotocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern
  • placeholder
  • required
  • step

以下是 HTML5 為<form>新增的 Attributes

  • autocomplete
  • novalidate

Autocomplete

用來設定表單的自動完成是否開啟，當有開啟時 Browser 會自動完成使用之前輸入過的資料，在表單中可以各別設定 input field 是否開啟或關閉，autocomplete attribute 可用於 <form>和<input>中。

1
2
3
4
5
6
<form action="/action_page.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

Novalidate

這是個給 <form> 使用的 attribute，當設定時傳送表單資料，需驗證的欄位將不會被驗證。

1
2
3
4
<form action="/action_page.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

Autofocus

當設定這個 attribute 時，頁面一載入便會自動focus到設定的 input field上。

1
First name:<input type="text" name="fname" autofocus>

Form

這個屬性可以將 input field 和 表單關聯起來，即使 input field 不在 <form> 的標籤之中。

1
2
3
4
5
6
<form action="/action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1">

Formaction

可以用來覆寫原本的 action 所導向的頁面，用於 type=”submit” 和 type=”image”。

1
2
3
4
5
6
7
<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="/action_page2.php"
  value="Submit as admin">
</form>

Formenctype

設定表單資料傳送時的編碼方式，只有在 method 是 post 時才有效用，用於 type=”submit” 和 type=”image”。

1
2
3
4
5
6
<form action="/action_page_binary.asp" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

Formmethod

可覆寫表單傳送時用的 http method，用於 type=”submit” 和 type=”image”。

1
2
3
4
5
6
7
<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" formaction="action_page_post.asp"
  value="Submit using POST">
</form>

Formnovalidate

可覆寫表單的novalidate的值，讓資料無需驗證即可傳送，用於 type=”submit”上。

1
2
3
4
5
<form action="/action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>

Formtarget

可以覆寫 form 的 target attribute，可自訂要導向新頁面或是其他可用的參數，在 type=”submit”, type=”image”中使用。

1
2
3
4
5
6
7
<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Submit to a new window">
</form>

Height and Width

這兩個屬性使用在 <input type=”image”>之中，定義圖片的寬與高。

1
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

List

這個屬性是跟 <datalist> 一起使用。

1
2
3
4
5
6
7
8
9
<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Min and Max

定義 <input> 的最小值與最大值，在以下 input types 中使用：
number, range, date, datetime-local, month, time and week。

1
2
3
4
5
6
7
8
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

Multiple

可以讓使用者有多種選項可選擇，主要用於這兩個 input types: email, file。

1
Select images: <input type="file" name="img" multiple>

Pattern

可在 <input> 中設定正規表示式去檢查，用於以下幾個 input types: text, search, url, tel, email, and password.

1
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

Placeholder

用來提示使用者該在 input field 輸入怎樣的資料，用於以下幾個 input types: text, search, url, tel, email, and password.

1
<input type="text" name="fname" placeholder="First name">

Required

定義指定的 input field 需要填寫資料才能夠進行 submit，用於以下幾個 input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

1
Username: <input type="text" name="usrname" required>

Step

定義 <input> element 中數字類型的輸入，每次值增加或減少變化時的基底為多少，在 range 中可以與 min, max 共同使用，用於以下幾個 input types: number, range, date, datetime-local, month, time and week.

1
<input type="number" name="points" step="3">