HTML表單與輸入實例

解釋
HTML 表單用於搜集不同類型的用戶輸入。
HTML 表單包含表單元素。
表單元素指的是不同類型的 input 元素、復選框、單選按鈕、提交按鈕等等。
<input> 元素
<input> 元素是最重要的表單元素。

<input> 元素有很多形態，根據不同的 type 屬性。

這是本章中使用的類型：

類型 描述
text   定義常規文本輸入。
radio  定義單選按鈕輸入（選擇多個選擇之一）
submit 定義提交按鈕（提交表單）
注釋：您稍后將在本教程學到更多有關輸入類型的知識。
###########

下面是 <form> 屬性的列表：

屬性 描述
accept-charset 規定在被提交表單中使用的字符集（默認：頁面字符集）。
action 規定向何處提交表單的地址（URL）（提交頁面）。
autocomplete   規定瀏覽器應該自動完成表單（默認：開啟）。
enctype    規定被提交數據的編碼（默認：url-encoded）。
method 規定在提交表單時所用的 HTTP 方法（默認：GET）。
name   規定識別表單的名稱（對於 DOM 使用：document.forms.name）。
novalidate 規定瀏覽器不驗證表單。
target 規定 action 屬性中地址的目標（默認：_self）。
注釋：您將在下面的章節學到更多關於屬性的知識。

提示和注釋：
注釋：<option> 標簽可以在不帶有任何屬性的情況下使用，但是您通常需要使用 value 屬性，此屬性會指示出被送往服務器的內容。

注釋：請與 select 元素配合使用此標簽，否則這個標簽是沒有意義的。

提示：如果列表選項很多，可以使用 <optgroup> 標簽對相關選項進行組合。

可選的屬性
屬性 值  描述
disabled   disabled   規定此選項應在首次加載時被禁用。
label  text   定義當使用 <optgroup> 時所使用的標注。
selected   selected   規定選項（在首次顯示在列表中時）表現為選中狀態。
value  text   定義送往服務器的選項值。

48.文本域(Text fields)
本例演示如何在 HTML 頁面創建文本域。用戶可以在文本域中寫入文本。
<form>
    名：
    <input type="text" name="firstname">
    <br />
    姓：
    <input type="text" name="lastname">
</form>

49.密碼域
本例演示如何創建 HTML 的密碼域。
<form>
    用戶：
    <input type="text" name="user">
    密碼：
    <input type="password" name="password">
</form>

<p>
    請注意，當您在密碼域中鍵入字符時，游覽器將使用項目符號來代替這些字符。
</p>

49.復選框
本例演示如何在 HTML 頁中創建復選框。用戶可以選中或取消選取復選框。
<form>
    我喜歡自行車：
    <input type="checkbox" name="Bike">
    <br />
    我喜歡汽車：
    <input type="checkbox" name="Car">
</form>

50.單選按鈕
本例演示如何在 HTML 中創建單選按鈕。
<form>
    男性：
    <input type="radio" checked="checked" name="Sex" value="male"/>
    女性：
    <input type="radio" name="Sex" value="female" />
</form>
<p>當用戶點擊一個單選按鈕時，該按鈕會變為選中狀態，其他所有按鈕會變為非選中狀態。</p>

51.簡單的下拉列表
本例演示如何在 HTML 頁面中創建簡單的下拉列表框。下拉列表框是一個可選列表。
<form>
    <select name="cars">
        <option value="volvo"> Volvo</option>
        <option value="Saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>
</form>

52.另一個下拉列表
本例演示如何創建一個簡單的帶有預選值的下拉列表。（譯者注：預選值指預先指定的首選項。）
<form>
    <select name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat" selected="selected">fiat</option>
        <option value="audi">Audi</option>
    </select>
</form>

53.文本域(Textarea)
本例演示如何創建一個文本域（多行文本輸入控件）。用戶可以在文本域中寫入文本。在文本域中，可寫入的字符字數不受限制。
<textarea cols="30" rows="5">
    領先得web 技術
</textarea>
<p>您無法對本實例進行編輯，因為我們的在線編輯器使用textarea 進行輸入，而游覽器不允許texatearea 中存在
另一個 textarea。
</p>

54.創建按鈕
本例演示如何創建按鈕。你可以對按鈕上的文字進行自定義。

<form>
    <input type="button" value="Hello world!">
</form>

55.Fieldset around data
本例演示如何在數據周圍繪制一個帶標題的框。
##
定義和用法
fieldset 元素可將表單內的相關元素分組。

<fieldset> 標簽將表單內容的一部分打包，生成一組相關表單的字段。

當一組表單元素放到 <fieldset> 標簽內時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D 效果，或者甚至可創建一個子表單來處理這些元素。

<fieldset> 標簽沒有必需的或唯一的屬性。

<legend> 標簽為 fieldset 元素定義標題。

disabled   disabled   規定應該禁用 fieldset。
form   form_id    規定 fieldset 所屬的一個或多個表單。
name   value  規定 fieldset 的名稱。

實例1
<form>
    <fieldset>
        <legend>健康信息</legend>
        身高：<input type="text" />
        體重：<input type="text" />

    </fieldset>
</form>
<p>如果表單周圍沒有邊框，說明您的游覽器太老了。</p>

56.帶有輸入框和確認按鈕的表單
本例演示如何向頁面添加表單。此表單包含兩個輸入框和一個確認按鈕。
<form action="test1.html">
    First name:<br>
    <input type="text" name="firstname" value="Mickey">
    <br>
    Last name:<br>
    <input type="text" name="lastname" value="Monuse">
    <br><br>
    <input type="submit" value="Submit">
</form>
<p>如果您點擊提交，表單數據會被發送到名為 test1.html 的頁面。</p>

57.帶有復選框的表單
此表單包含兩個復選框和一個確認按鈕。

<form name="input" action="test1.html" method="get">
    I have a bike:
    <input type="checkbox" name="vehicle" value="Bike" checked="checked" />
    <br />
    I hava a car:
    <input type="checkbox" name="vehicle" value="Car" />
    <br />
    I hava an airplane:
    <input type="checkbox" name="vehicle" value="Airplane" />
    <br />
    <input type="submit" value="Submit">

</form>

58.帶有單選按鈕的表單
此表單包含兩個單選框和一個確認按鈕。
<br> 可插入一個簡單的換行符。

<br> 標簽是空標簽（意味着它沒有結束標簽，因此這是錯誤的：<br></br>）。在 XHTML 中，把結束標簽放在開始標簽中，也就是 <br />。

請注意，<br> 標簽只是簡單地開始新的一行，而當瀏覽器遇到 <p> 標簽時，通常會在相鄰的段落之間插入一些垂直的間距。

<form>
    <input type="radio" name="sex" value="male" checked >Male
    <br>
    <input type="radio" name="sex" value="female" >Female
</form>

59.從表單發送電子郵件
此例演示如何從表單發送電子郵件。
<form action="./test1.html" method="post" enctype="text/plain">
<h3>這個表單會把電子郵件發送到W3school</h3>
    姓名：<br />
    <input type="text" name="name" value="鄒立翔" size="20">
    <br />
    電郵：<br />
    <input type="text" name="mail" value="yourmail" size="20">
    <br />
    內容：<br />
    <input type="text" name="comment" value="yourcomment" size="40">
    <br /><br />
    <input type="submit" value="發送">
    <input type="reset" value="重置">
</form>