主頁 > 知識庫 > HTML的form表單標簽用法學習教程

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

熱門標簽:東莞人工外呼系統(tǒng)多少錢 商丘電話自動外呼系統(tǒng)怎么收費 400電話辦理尚景 400電話是在哪里申請 昌邑外呼系統(tǒng) 朝陽自動外呼系統(tǒng) 默納克系統(tǒng)外呼顯示inns 地圖標注地點下載 周口導(dǎo)航地圖標注

HTML中表單可以用來搜集用戶各種類型的輸入信息。表單實際上是包含表單元素的區(qū)域,在這個區(qū)域中的各種元素的輸入信息最終都將通過表單提交到程序腳本中。例如常見的有用戶登錄、注冊、發(fā)布文章等等,都是通過表單提交到動態(tài)程序進行處理的。本節(jié)主要講述表單和表單的元素,關(guān)于如何提交表單信息到動態(tài)程序,將在以后的程序語言課中再來講述。
表單的區(qū)域是使用<form>標簽定義表單的范圍,在<form></form>中的元素的值會被通過這個表單提交到對應(yīng)的地址中。
 
輸入信息
一般表單內(nèi)多以使用<input>標簽收集用戶的輸入信息,其輸入類型是由type決定的。
多數(shù)情況下被用到的表單標簽是輸入標簽(<input>)。輸入類型是由類型屬性(type)定義的。常見的輸入類型有文本域、單選按鈕、復(fù)選框、下拉菜單等等。
 
文本域
文本域可以為用戶提供輸入文字的功能,瀏覽器會將文本域解譯為一個矩形框,用戶將光標移動到該框體,并點擊即可將光標移動到框體內(nèi)。用戶可以在表單中鍵入字母、數(shù)字等內(nèi)容。
文本域的定義方法是在<input>標簽中為type屬性設(shè)置text值

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <form>  
  2. 文本域1:<input type=”text” name=”firstname” />  
  3. 文本域2:<input type=”text” name=”lastname” />  
  4. </form>  

瀏覽器顯示如下:

單選按鈕
單選按鈕多數(shù)情況下出現(xiàn)在用戶注冊時錄入資料的選項中,該類型多用戶只允許用戶選擇一項結(jié)果時使用。
單選按鈕的定義方法是在<input>標簽中將type屬性的值設(shè)置為radio

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <form>  
  2. <input type=”radio” name=”sex” value=”male” /> 男生   
  3. <input type=”radio” name=”sex” value=”female” /> 女生   
  4. </form>  

瀏覽器中的顯示為:

復(fù)選框
復(fù)選框可讓用戶勾選某些對應(yīng)的一個或多個選項。常見的一般是在用戶登錄時,為用戶提供記住登錄帳號等功能。也可以在用戶調(diào)查的頁面中,搜集用戶的多項意見。
復(fù)選框定義方法是在<input>標簽中將type屬性的值設(shè)置為checkbox

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <form>  
  2. <input type=”checkbox” name=”val1″ />  
  3. 前端開拓者不錯   
  4. <input type=”checkbox” name=”val2″ />  
  5. 前端開拓者一般   
  6. </form>  

瀏覽器顯示如下:

下拉菜單
下拉菜單在信息選擇上與單選類似,但是下拉菜單可以容納更多的信息。并且下拉菜單在選擇菜單值后可以執(zhí)行額外的腳本。
下拉菜單以<select>為起始標簽,在select標簽中的每一個option標簽都是下拉菜單中的一個值。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <form>  
  2. <select name=”cars”>  
  3. <option value=”volvo”>Volvo</option>  
  4. <option value=”saab”>Saab</option>  
  5. <option value=”fiat”>Fiat</option>  
  6. <option value=”audi”>Audi</option>  
  7. </select>  
  8. </form>  

瀏覽器顯示:

提交按鈕
提交按鈕是每個表單的必要組成部分。用戶將對應(yīng)的信息錄入完畢后,需要通過點擊提交按鈕觸發(fā)動作,將表單的值提交到下一個頁面。當<form>標簽中的action屬性設(shè)置了對應(yīng)的提交地址時,提交按鈕會將該表單中獲得的所有數(shù)據(jù)提交到這個地址的頁面中。
提交按鈕的定義方法是在input標簽中將type的值設(shè)置為submit。下面以前端開拓者的搜索框為例,將提交地址設(shè)置為搜索頁面。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <form name=”input” action=”http://www.frontopen.com/” method=”get”>  
  2. 關(guān)鍵字:   
  3. <input type=”text” name=”s” id=”s” />  
  4. <input type=”submit” value=”搜索” />  
  5. </form>  

瀏覽器顯示如下:

結(jié)語:本節(jié)只是對常用的表單前端布局元素進行基本的演示與講解。真正的表單運用多在服務(wù)器程序語言中運用,并且需要設(shè)置更多的參數(shù)與規(guī)則。本課中大家只需要了解表單的各元素實現(xiàn)排列即可,多數(shù)情況下已經(jīng)基本可以配合后臺程序員完成網(wǎng)站開發(fā)。

標簽:阿拉善盟 福建 那曲 揭陽 沈陽 銅陵 湖南 健身房

巨人網(wǎng)絡(luò)通訊聲明:本文標題《HTML的form表單標簽用法學習教程》,本文關(guān)鍵詞  HTML,的,form,表單,標簽,用法,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《HTML的form表單標簽用法學習教程》相關(guān)的同類信息!
  • 本頁收集關(guān)于HTML的form表單標簽用法學習教程的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章