HTML&CSS網站設計優化之道|ch7表單
ch7表單
表單(form): EX:username(名稱)=Ivy(值)
表單結構
form
負責表單控制項.每次皆帶有action屬性.後頭也常接method或 id屬性.
action
每個<form>元素都需要一個action屬性.他的值是伺服器上等待接收送出資訊之網頁URL.
method
表單可以透過 get或post其一送出表單.
get:短表單(搜尋框)或只是欲從伺服器取得資料
post:表單很長.包含敏感資料(密碼).要將資料加到資料庫或從資料庫刪除.允許使用者上傳檔案; 其值會以HTTP標頭傳送.
文字輸入
input
用以製作幾種類型不同的表單控制選項.其後接的type屬性的值決定了表單的輸入類型.
name
當使用者在表單中輸入資料時.伺服器需要知道每筆資料輸入到哪一個表單控制項當中.因此每個表單控制項都需要有一個name屬性
文字區塊
textarea
textarea元素的用途是製作多行文字輸入區.其並非一個空白元素.故需要一個開始標記和一個結束標記.
ex:<textarea>.......</textarea>
為表單控制項貼標籤
label
其為一表單控制項目.每個表單控制項都應配有自己的<label>元素.
用法有二:
1.將文字敘述和表單輸入欄位包圍起來
打法例如:<label>Age:<input type="text" name="age" /></label>
2.獨立於表單之外+for:用以標示他代表哪一個表單控制選項
打法例如:<label for="male">Male</label>
下拉式選單/選取方框
select
讓使用者從下拉式選單中選取一個選項
打法：
<select name="____">
</select>
多重選擇區塊
multiple
讓使用者從下拉式選單中選取一個選項
打法：
<select name="____" multiple="multiple">
</select>
*required用法:
為提交前必須輸入的字段時使用,意即輸入完才可提交.
*src用法：為html5中<img>標籤的屬性.src屬性用以規定圖像的URL
*subscribe:vt.& vi.認捐，捐贈；簽署，題詞，署名；認購；訂閱，訂購；
此處input之搭配用法：
input type="text",當type屬性的值為text,表示製作單行的「文字輸入」單位.
input type="password",當type屬性的值為password,表示「密碼」,製作單行的文字輸入單位,字元會被遮蔽.
input type="radio",當type屬性的值為radio,表示表單為「單選鈕」.
input type="checkbox",當type屬性的值為checkbox,表示表單為「勾選框」,可選取一個或以上的答案.
input type="file",當type屬性的值為file,表示為一檔案輸入區塊（包含文字輸入欄位＋browse按鈕,以點選上載檔案）.
input type="submit",當type屬性的值為submit,表示「送出按鈕」將表單提交至伺服器.
input type="image",當type屬性的值為image,表示「影像按鈕」（後頭常接src.width.height）.
input type="hidden",當type屬性的值為hidden,表示「隱藏的表單控制項」,只有在檢視原始碼時可見.
input type="date",當type屬性的值為date,表示「日期」會建立一個日期輸入選單.
input type="email",當type屬性的值為email,表示「電子郵件」,由瀏覽器去進行信箱格式ck.
input type="url",當type屬性的值為url,表示「網頁地址」,由瀏覽器去進行格式ck.
input type="search",當type屬性的值為search,表示「搜尋輸入」,由瀏覽器提供搜尋輸入欄.
(表單範例)
http://127.0.0.1:58279/0813.html
http://127.0.0.1:58279/0814.html
（example）
http://127.0.0.1:58279/ch7example.html
表單(form): EX:username(名稱)=Ivy(值)
表單結構
form
負責表單控制項.每次皆帶有action屬性.後頭也常接method或 id屬性.
action
每個<form>元素都需要一個action屬性.他的值是伺服器上等待接收送出資訊之網頁URL.
method
表單可以透過 get或post其一送出表單.
get:短表單(搜尋框)或只是欲從伺服器取得資料
post:表單很長.包含敏感資料(密碼).要將資料加到資料庫或從資料庫刪除.允許使用者上傳檔案; 其值會以HTTP標頭傳送.
文字輸入
input
用以製作幾種類型不同的表單控制選項.其後接的type屬性的值決定了表單的輸入類型.
name
當使用者在表單中輸入資料時.伺服器需要知道每筆資料輸入到哪一個表單控制項當中.因此每個表單控制項都需要有一個name屬性
文字區塊
textarea
textarea元素的用途是製作多行文字輸入區.其並非一個空白元素.故需要一個開始標記和一個結束標記.
ex:<textarea>.......</textarea>
為表單控制項貼標籤
label
其為一表單控制項目.每個表單控制項都應配有自己的<label>元素.
用法有二:
1.將文字敘述和表單輸入欄位包圍起來
打法例如:<label>Age:<input type="text" name="age" /></label>
2.獨立於表單之外+for:用以標示他代表哪一個表單控制選項
打法例如:<label for="male">Male</label>
下拉式選單/選取方框
select
讓使用者從下拉式選單中選取一個選項
打法：
<select name="____">
</select>
多重選擇區塊
multiple
讓使用者從下拉式選單中選取一個選項
打法：
<select name="____" multiple="multiple">
</select>
*required用法:
為提交前必須輸入的字段時使用,意即輸入完才可提交.
*src用法：為html5中<img>標籤的屬性.src屬性用以規定圖像的URL
<img src="img_logo.gif" alt="W3School.com.cn" />
*subscribe:vt.& vi.認捐，捐贈；簽署，題詞，署名；認購；訂閱，訂購；
此處input之搭配用法：
input type="text",當type屬性的值為text,表示製作單行的「文字輸入」單位.
input type="password",當type屬性的值為password,表示「密碼」,製作單行的文字輸入單位,字元會被遮蔽.
input type="radio",當type屬性的值為radio,表示表單為「單選鈕」.
input type="checkbox",當type屬性的值為checkbox,表示表單為「勾選框」,可選取一個或以上的答案.
input type="file",當type屬性的值為file,表示為一檔案輸入區塊（包含文字輸入欄位＋browse按鈕,以點選上載檔案）.
input type="submit",當type屬性的值為submit,表示「送出按鈕」將表單提交至伺服器.
input type="image",當type屬性的值為image,表示「影像按鈕」（後頭常接src.width.height）.
input type="hidden",當type屬性的值為hidden,表示「隱藏的表單控制項」,只有在檢視原始碼時可見.
input type="date",當type屬性的值為date,表示「日期」會建立一個日期輸入選單.
input type="email",當type屬性的值為email,表示「電子郵件」,由瀏覽器去進行信箱格式ck.
input type="url",當type屬性的值為url,表示「網頁地址」,由瀏覽器去進行格式ck.
input type="search",當type屬性的值為search,表示「搜尋輸入」,由瀏覽器提供搜尋輸入欄.
(表單範例)
http://127.0.0.1:58279/0813.html
http://127.0.0.1:58279/0814.html
（example）
http://127.0.0.1:58279/ch7example.html
评论
发表评论