HTML的form表單標簽用法學習教程

2020-03-24 16:21:23

字體：大中小

來源：轉載

供稿：網友

HTML中表單可以用來搜集用戶各種類型的輸入信息。表單實際上是包含表單元素的區域，在這個區域中的各種元素的輸入信息最終都將通過表單提交到程序腳本中。例如常見的有用戶登錄、注冊、發布文章等等，都是通過表單提交到動態程序進行處理的。本節主要講述表單和表單的元素，關于如何提交表單信息到動態程序，將在以后的程序語言課中再來講述。
表單的區域是使用 form 標簽定義表單的范圍，在 form /form 中的元素的值會被通過這個表單提交到對應的地址中。

輸入信息
一般表單內多以使用 input 標簽收集用戶的輸入信息，其輸入類型是由type決定的。
多數情況下被用到的表單標簽是輸入標簽（ input ）。輸入類型是由類型屬性（type）定義的。常見的輸入類型有文本域、單選按鈕、復選框、下拉菜單等等。

文本域
文本域可以為用戶提供輸入文字的功能，瀏覽器會將文本域解譯為一個矩形框，用戶將光標移動到該框體，并點擊即可將光標移動到框體內。用戶可以在表單中鍵入字母、數字等內容。
文本域的定義方法是在 input 標簽中為type屬性設置text值XML/HTML Code復制內容到剪貼板
文本域1: inputtype= text name= firstname / 文本域2: inputtype= text name= lastname / /form
單選按鈕
單選按鈕多數情況下出現在用戶注冊時錄入資料的選項中，該類型多用戶只允許用戶選擇一項結果時使用。
單選按鈕的定義方法是在 input 標簽中將type屬性的值設置為radioXML/HTML Code復制內容到剪貼板
form inputtype= radio name= sex html' target='_blank'>value= male / 男生 inputtype= radio name= sex value= female / 女生 /form
復選框
復選框可讓用戶勾選某些對應的一個或多個選項。常見的一般是在用戶登錄時，為用戶提供記住登錄帳號等功能。也可以在用戶調查的頁面中，搜集用戶的多項意見。
復選框定義方法是在 input 標簽中將type屬性的值設置為checkboxXML/HTML Code復制內容到剪貼板
下拉菜單
下拉菜單在信息選擇上與單選類似，但是下拉菜單可以容納更多的信息。并且下拉菜單在選擇菜單值后可以執行額外的腳本。
下拉菜單以 select 為起始標簽，在select標簽中的每一個option標簽都是下拉菜單中的一個值。XML/HTML Code復制內容到剪貼板
optionvalue= volvo Volvo /option optionvalue= saab Saab /option optionvalue= fiat Fiat /option optionvalue= audi Audi /option /select /form
提交按鈕
提交按鈕是每個表單的必要組成部分。用戶將對應的信息錄入完畢后，需要通過點擊提交按鈕觸發動作，將表單的值提交到下一個頁面。當 form 標簽中的action屬性設置了對應的提交地址時，提交按鈕會將該表單中獲得的所有數據提交到這個地址的頁面中。
提交按鈕的定義方法是在input標簽中將type的值設置為submit。下面以前端開拓者的搜索框為例，將提交地址設置為搜索頁面。XML/HTML Code復制內容到剪貼板
formname= input action= http://www.frontopen.com/ method= get 關鍵字: inputtype= text name= s id= s / inputtype= submit value= 搜索 / /form
瀏覽器顯示如下：
結語：本節只是對常用的表單前端布局元素進行基本的演示與講解。真正的表單運用多在服務器程序語言中運用，并且需要設置更多的參數與規則。本課中大家只需要了解表單的各元素實現排列即可，多數情況下已經基本可以配合后臺程序員完成網站開發。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html文檔基本結構(制作網頁基礎知識)

下一篇：HTML元素的語法與構成