第八篇 一次學完表單製作

控制標籤壹、輸入型表單：語法INPUT

組成： <input type="." 、name="." 、 value="." 、 size="."、 maxlenght="." 、checked 、Selected 、readonly 、 disabled 、 multiple > 共有十個標籤type 及 name 為必須要標籤，其餘可視狀況需要選用。

type="指定欄位型式"：計 text、password、hidden、radio、checkbox、submit、reset、button、image、file 等 10 種。 name="資料欄名稱"為必要屬性標籤，傳送給後端程式處理的變數(識別)值(名稱)。 value="預設字串"為必要屬性標籤，如設有預設字串，該值會在欄位中出現，不用時可以省略，建議保留。 size="欄位寬度"單位字元，未指定時內訂為 20 個字元。 maxlength="欄位資料輸入最大長度"單位字元，可限制使用者輸入資料的最大字數。 checked 表示"預設某個選項為預定選項"用於 CheckBox 被指定後會變成預設選項。 Selected 表示"指定為預設選項"用於 Select 被指定後會變成預設選項。 readonly 表示"只能顯示資料"指定時可限制使用者輸入資料。 disabled 表示"此欄位不能被選取"指定時可限制使用者使用其功能。 multiple 表示"多重選擇"用於 Select 標籤，選項可共多重選擇。

type 格式型態：依用途別，屬性 Type 計有 10 種類型。 type="text"預設值，可提供使用者輸入(填寫)文字型態。 type="password"可提供使用者輸入(填寫)密碼型態。 type="hidden"隱藏欄位型態，提供製作者設定隱藏參數等資訊，以供後端程式使。 type="radio"提供使用者單一選擇(項)的圓圈式選鈕。 type="checkbox"提供使用者多選項勾選式核取選擇方塊。 type="submit"提供使用者送出填寫文字的同意或確認按鈕。 type="reset"提供使用者便於清除已輸入的填寫資料按鈕。 type="button"提供使用者各種功能的通用性(一般)按鈕。 type="image"將一般(預設)按鈕樣式，改成圖像按鈕。 type="file"提供使用者上傳檔(傳遞)案資料到主機內。

控制標籤貳、選擇型表單：語法SELECT

組成：<select>..option..</select>

<Select>使用時機：算是單一 (Raido) 選項與多重 (CheckBox) 選項合併功能，提供網友更多選擇。 <Form> ... 表單開始與結束宣告，此對標籤絕對不能省略。 <Select> ... 選擇表單範圍開始與結束宣告，此對標籤最好不要省略。 屬性 Name="資料欄位名稱"為必要設定值，提供給後端程式處理的變數值 (取名稱時最好與欄位有關)。 標籤 <Option> "指定選項內容"必要標籤，其內 Value 屬性值就是網頁顯示的文字，可有可無，建議不要省略。 注意屬性 <Option> 後面文字項目，不能省略，可單獨使用或加個結束標籤 </Option>。 屬性 Size "欄位內要顯示的項目數量"非必要屬性，單位(個/列)，內定為 1 個列位。 屬性 Selected "指定為預設選項"非必要屬性，被指定時變成預設選項，用法與 Checked 一樣。 屬性 Multiple "允許多重選項"非必要屬性，讓訪客可以按 Ctrl 或 Shift + 滑鼠左鍵，來選擇一個以上項目。

控制標籤參、區塊型表單：語法TEXTAREA

組成：<textarea name="text" cols="長度" rows="高"> 可寫文字，不用 value </textarea>

<TextArea>使用時機：希望提供訪客有更大的區域，可填寫任何文字資料時使用。 <Form> ... </Form>表單開始與結束宣告，此對標籤絕對不能省略。 <TextArea> ... 文字填寫區域表單範圍開始與結束宣告，此對標籤最好不要省略。 屬性 Name="資料欄位名稱"為必要設定值，提供給後端程式處理的變數值 (取名稱時最好與欄位有關)。 屬性 Cols ="長(寬)度"單位字元數。 Rows="高度"單位列數。 您可直接在 <TextArea> ... </TextArea> 內填寫文字，不用 Value 值。 屬性 Wrap="Off" 時輸入文字超過長度會出現水平捲軸。 屬性 Wrap="Virtual"或"Hard" 時輸入文字超過長度會自動換行；送出之資料，只有在按 Enter 鍵處換行。 屬性 Wrap="Physical"或"Soft" 時輸入文字超過長度會自動換行；會依照螢幕所見到的樣式，送出資料。

控制標籤肆、圖片按鈕表單：語法BUTTON

組成： <button type="submit" name="傳送"><img src="accept.gif"> <button type="reset" name="重寫"><img src="cancel.gif"> <button type="button" name="" value="不寄了，離開 " onClick="window.close()"><img src="naccept.gif"> </button>

<Button>使用時機：用於您希望美化表單的按鈕而已。 <Form> ... </Form>表單開始與結束宣告，此對標籤絕對不能省略。 <Button> ... </Button>圖片按鈕範圍開始與結束宣告，此對標籤最好不要省略。 注意：這裡的 <Button> ... </Button> 用法與 <Input Type="Button"> 不太一樣喔。 屬性 Name="資料欄位名稱"為非必要設定值，提供給後端程式處理的變數值 (取名稱時最好與欄位有關)。 屬性 Type 的值可(使)用於 "Submit"|"Reset"|"Button" 表單類型。 屬性 Src="URL"用法與網頁圖片一樣。

控制標籤伍、MailTo 表單：語法MailTo

組成： <FORM METHOD="POST" ACTION="mailto:leewn@your.idv.tw" ENCTYPE="application/x-www-form-urlencoded"> 郵件信箱 E-Mail <input type=text NAME="email" maxlength=50> <textarea cols=60 rows=5 name="yourmessage"> </textarea> </FORM>

MailTo使用瀏覽器內設程式替代後端處理程式，因為訪客必先設定瀏覽器的郵件位址，不建議使用。 使用 MailTo 標籤，會呼叫 Outlook 或電腦內預設的郵件軟體，如果訪客未曾設定此軟體，將無法運作。 <Form> ... </Form>表單開始與結束宣告，此對標籤絕對不能省略。 屬性 Name="資料欄位名稱"為必要設定值，提供給後端程式處理的變數值 (取名稱時最好與欄位有關)。 本範例採用簡單的 JavaScript 程式偵測欄位狀況，因不屬 HTML 標籤範圍，請自行使用檢視原始馬查看。 您不會程式或無此程式可測試嗎？告訴您表單的所有標籤都可套用到 MailTo 這組標籤裡面使用或測試喔。 其他 屬性 標籤用法與前面相同(略)。