注意

以下的程式碼皆是寫於<body>與</body>標籤之內。
程式碼的示範，已由本網站「樣式表自動修飾」，實際測試將依各家瀏覽器「預設樣式表不同而有差距」。

<form>

在HTML中，表單的設定在<form>與</form>之內進行。

<input>

<input>像是個變形蟲，利用type=""可以做成各種表單元件。屬於線內元素，且不需結尾標籤。

文字輸入 type="text"

<form>

你的名字是？<input type="text"><br>

<input type="text" placeholder="你的名字是？"><br>

<input type="text" value="你的名字是？">

</form>

行1：表單的設定在<form>與</form>之內進行。
行3：placeholder屬性作為提示之用。
行4：value屬性直接設定<input>內的值。

單選圓鈕 type="radio"

<form>

喜歡哪個學校？<br>

<input type="radio" name="school" value="tfg">北一女中<br>

<input type="radio" name="school" value="zsgh"
checked
>中山女中<br>

<input type="radio" name="school" value="cmsgh">景美女中<br>

<input type="radio" name="school" value="bis">靜修女中

</form>

行1：表單的設定在<form>與</form>之內進行。
行2：同一組圓鈕，應使用同一個name值。value值用來給JS抓取，並不影響顯示。
行3：checked用來設定預設選取。其完整寫法為checked="checked"。

傳送按鈕 type="submit"

<form>

喜歡哪個學校？<br>

<input type="radio" name="school" value="tfg">北一女中<br>

<input type="radio" name="school" value="zsgh"
checked
>中山女中<br>

<input type="radio" name="school" value="cmsgh">景美女中<br>

<input type="radio" name="school" value="bis">靜修女中<br>

<input type="submit" value="傳送">

</form>

行6：value值用以決定按鈕顯示的文字。本按鈕不具任何動做。

動起來！把訊息傳出去！

哪個學校最棒？<br>

<input type="radio" name="school" value="tfg">北一女中<br>

<input type="radio" name="school" value="zsgh"
checked
>中山女中<br>

<input type="radio" name="school" value="cmsgh">景美女中<br>

<input type="radio" name="school" value="bis">靜修女中<br>

<input type="submit" value="傳送">

</form>

行1：action 值為執行程式，檔案路徑參考。method 值為傳送方法，有 get 及 post 兩種。

GET 和 POST 差別

GET

GET是使用網址傳值，例如，範例中的 name 值是 school，value 值是tfg, zsgh, cmsgh 則當使用者選取至 zsgh 值時，submit 鈕會自動連結至 ex-1.php?school=zsgh。

POST

由於 GET 過於裸露而且長度有限，因此若是要傳送內容較大或隱密的訊息時，應使用 POST 做為傳值方式。

<fieldset>表單分群

使用<fieldset>，可以將表單分群。

<form>

<fieldset>

<legend>基本資料</legend>

你的名字是？<input type="text"><br>

<input type="text" placeholder="你的名字是？"><br>

<input type="text" value="你的名字是？">

</fieldset>

<fieldset>

<legend>喜好</legend>

哪個學校最棒？<br>

<input type="radio" name="school" value="tfg">北一女中<br>

<input type="radio" name="school" value="zsgh"
checked
>中山女中<br>

<input type="radio" name="school" value="cmsgh">景美女中<br>

<input type="radio" name="school" value="bis">靜修女中

</fieldset>

</form>

行3,行9：<legend>與<fieldset>搭配使用，<legend>可決定表單群名稱。

下一節 >

HTML5 基礎教程

HTML5 多媒體教程

HTML5 表單教程

HTML5

HTML5 Graphics

注意

<form>

<input>

文字輸入 type="text"

單選圓鈕 type="radio"

傳送按鈕 type="submit"

動起來！把訊息傳出去！

GET 和 POST 差別

GET

POST

<fieldset>表單分群