HTML網(wǎng)頁設計(表單元素)1_第1頁
HTML網(wǎng)頁設計(表單元素)1_第2頁
HTML網(wǎng)頁設計(表單元素)1_第3頁
HTML網(wǎng)頁設計(表單元素)1_第4頁
HTML網(wǎng)頁設計(表單元素)1_第5頁
已閱讀5頁，還剩4頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

HTML網(wǎng)頁設計（表單元素）1.什么是表單表單（form）是由一個或多個文本輸入框、可單擊的按鈕、多選框、下拉菜單和圖像按鈕等組成，所有這些都放在＜form＞標簽在。一個文檔中可以包含多個表單，而且每個表單可以放置通常的主體內容（包括文字和圖像在內）Form標簽設計者可以將表單放在文檔主體中的任何位置，但前提是將表單的緣故都放在＜form＞標簽和＜/form＞結束標簽之間?；菊Z法<form>包含表單元素</form>功能定義表單屬性及說明屬性說明Dir文本方向Lang語言信息Align對齊方式Class用一個名稱來標記表單，給標記名稱指向一個預定義的類，而該類是在文檔級聲明的或者在外部定義的樣式表Id為表單創(chuàng)建一個標記，將來超鏈接可以用這個標記明確的引用該表單，以便作為樣式表選擇器和使用其他程序來執(zhí)行自動搜索Style創(chuàng)建表單內容的內聯(lián)樣式Title給表單加上說明性的文字Name表單的名稱Method定義表單結果從瀏覽器傳送到服務器的方法，一般由兩種方法：get、postAction用來定義表單處理程序（一個asp、cgi等程序）的位置（相對地址或絕對地址）Enctype設置表單資料的編碼方式Target設置返回信息的顯示方式Enctype屬性值及說明Enctype屬性值說明Text/plain以純文本形式傳輸信息Application/x-www-form=urlencoded默認的編碼形式Multipart/form-data事要忙會mine編碼

Target屬性值及說明Target屬性值說明Blank將返回信息顯示在心的瀏覽器窗口中Parent將返回信息顯示在父級瀏覽器窗口中Selt將返回信息顯示在當前瀏覽器窗口中Top將返回信息顯示咋頂級瀏覽器窗口中2.表單元素在＜form＞標簽中，可以包含以下5個標簽。標簽描述<inptu>表單輸入標記<select>菜單和列表標記<option>菜單和列表項目標記<textarea>文字域標記<optgroup>子菜單標記Input標簽對于大量通常的表單內元素，可以使用＜input＞標簽來進行定義，其中包括文本字段、多選列表、可單擊的圖像和提交按鈕等。雖然＜input＞標簽中有許多屬性，但對每個元素來說，只有type和name屬性是必須的。當然，根據(jù)指定的比哦啊單元素類型，也可以設置一些其他的＜input＞屬性?；菊Z法<inputname="filed_name“type="type_name”功能定義表單的輸入元素屬性及說明屬性說明Dir文本方向Lang語言信息Align對齊方式Class用一個名稱來標記輸入元素，該標記名稱指向一個預定義的類，而該類是在文檔級聲明的或者在外部定義的樣式表Id為輸入元素創(chuàng)建一個標記，應用超鏈接的時候可也用這個標記來明確的應用該輸入元素，以便作為

樣式選擇器或只用其他應用程序來執(zhí)行自動搜索Stylr創(chuàng)建輸入元素內的內聯(lián)樣式Title給輸入元素加上說明性的文字Name輸入元素的名稱Type輸入元素的類型Alt圖像的替換文字Accesskey連接熱鍵Accept文件上傳的mime類型列表Checked已選中Disabled禁用某個輸入元素Maxlength輸入元素的最大輸入字符數(shù)Size輸入元素的寬度（以字符為單位）Src輸入元素的圖像源文件Tabindex對瀏覽器窗口中的對象重新排序Value輸入元素的默認值可以使用＜input＞標簽中的name屬性來為字段命名（表單提交到處理過程中使用的字段，這種字段的說明可以參閱前面介紹）。從技術角度上講，name屬性的值是任意的一個字符串，但是我們建議最好采用沒有嵌入空格或標點的字符串。＜input＞標簽中必須的type屬性可以用來選擇控件的類型，其屬性值如下表所示。Type屬性值及說明Type屬性值說明Text文字域Password密碼域File文件域Checkbox復選框Radio單選框Button普通按鈕Submit提交按鈕Reset重置按鈕Hidden因此域Image圖像域（圖像提交按鈕）文字域最有用也是最常見的表單輸入元素時文字域，在瀏覽器窗口中顯示為一行的空框，它接收用輸入的一行信息，當你用戶將表單提交給服務器時，這些信息就變成了元素值。范例代碼：

<body>設置提交按鈕<input<body>設置提交按鈕<inputnHHK="nijxT,</body><zqeittarget=IR_blanklpa匚tiun="591754clei7@qq,匚cm"encti:pe=''text/plain1^<inpuzDiT.e="egk"IRtextIRsi2e=l,55IR><br>密碼域將type屬性值設置為password,就可以創(chuàng)建一個密碼域。傳統(tǒng)文本域的其他屬性和語義也可以應用于密碼域。應用呢密碼域時必須制定一個字段的名稱，這樣就可以為該段字段設置size和maxlength屬性，并可以設置一個初見時的vlaue。范例代碼：文件域（file）復選框（checked）單選框（ridio）普通按鈕（button）設置普通按鈕（button）代碼:重置按鈕（Reset）Textarea標簽作為表單的一部分，＜textarea＞標簽可在用戶瀏覽器中創(chuàng)建一個多行文字域，在此文本輸入?yún)^(qū)內,用戶幾乎可以輸入無線文字。提交表單之后后,瀏覽器將所有行中的文字都收集起來,行間距用回車/換行符分隔,并將它們作為表單元素的值發(fā)送給服務器,這個值需要使用name屬性中制定的名稱?；菊Z法vtextareaname="name”rows="rows"cols="value”value="value”</texteaea>功能定義表單多行文字域屬性及說明屬性說明Dir文本方向Lang語言信息Class用一個名稱來標記多行文字域，該標記名稱指向一個預定

義的類，而該類在文檔級聲明或在外部的樣式表Id為多行文字域創(chuàng)建一個標記，應用超鏈接時可以用這個標記明確的應用該多行文字域，以使樣式表選擇器或使應用程序來執(zhí)行自動搜索Style創(chuàng)建多行文字域內容的內聯(lián)樣式Title給多行文字域加上說明性的文字Name輸入元素的名稱Accesskey連接熱鍵Disabled禁用多行文字域Tabindex對瀏覽器窗口中的對象重新排序Rows多行文字域的行數(shù)Sols多行文字域的列數(shù)Wrap多行文字域的換行在＜.textarea＞標簽及其結束標簽＜/textarea＞之間可以包括純文本，它的默認文本必須是純文本（沒有標簽或其他特殊元素）。Wrap屬性值及說明Warp屬性值說明virtual虛擬換行Physical物理換行Off不換行范例代碼：Select標簽＜select＞提供了兩種簡潔的選擇：下拉菜單和下拉列表。將＜option＞標簽表的條目放到表單的＜select＞標簽中，這樣接創(chuàng)建了一個選項下拉式菜單。與其他表單標簽一樣，name屬性在這里也是必需的，它將＜select＞選項提交給服務器時，瀏覽器將使用它?；菊Z法〈selectname="namesize='value'”>選項</select>功能定義菜單或列表屬性及說明屬性說明

Dir文本方向Lang語言版本Class用一個名稱來標記菜單或列表，該標記名稱指向一個預定義的類，而該類是在文檔中聲明的或者在外部定義的樣式表Id為菜單或列表創(chuàng)建一個標記，應用超鏈接時可以用這個標記來明確的引用該菜單或列表，以便作為樣式表選擇器或使用其他應用程序來執(zhí)行自動搜索Style創(chuàng)建菜單或列表內容的內聯(lián)樣式Title給菜單或列表加上說明性的文字Name菜單或列表的名稱Disabled禁^個菜單或列表Size菜單或列表的高度Tabindex對瀏覽器窗口中的對象重新排列Multipte列表中的多選項目如果希望一次運行選擇多個選項的話，可以在＜select＞標簽中加入multip屬性，這樣可以讓＜secect＞元素像(inputtype==checked)元素那樣起作用。如果沒有指定multiple，那么一次只能選定一個選項，如同單選按鈕組那樣。Size(大小)屬性決定了用戶一次性可以看見多少個選項。Size的值應該是一個正整數(shù)，沒有指定size值時，默認值是1、當size=1時，如果沒有指定multiple，了瀏覽器通常會將＜select＞列表顯示成一個彈出式菜單；當size的值超過1或者指定了multiple屬性，＜select＞會顯示為以個滾動列表。Option標簽使用＜option＞標簽可以定義一個＜select＞表單控件中的每個條目。瀏覽器將＜option＞標簽這個的內容作為＜select＞標簽的菜單或下拉列表中的一個元素顯示。這樣其內容只能是純文本，使用value屬性可以為每一個選項設置一個值，當用戶選中該選項時，瀏覽器會將其發(fā)發(fā)送給服務器。基本語法<option>選項＜/option＞（可省略）功能定義菜單或列表中的可選項屬性及說明屬性說明Dir文本方向Lang文本語言Class用一個名稱來標記可選項，該標記名稱指向一個預定義的類，而該類是在文檔級聲明的或者在外部定義的樣式表Id為可選項創(chuàng)建一個標記，將超鏈接可以用個標記來明確的引用該選項，以便作為樣式表選擇器或者使用其他應用程序來執(zhí)行自動搜索Style創(chuàng)建可選項內容的內聯(lián)式Title給可選項加上說明性的文字Disabled禁用某個可選項Value可選項的值Selected默認被選擇的可選項默認情況下，所有多選的,<select>標簽中的選項都是未選中狀態(tài)，因此當客戶端想服務器提交表單時，這些選項不會包括在參數(shù)列表中。<option>標簽中包括selected屬性后，就可以預選選定一個或多個選項，隨后用戶可以再取消選擇，selected屬性的HTML版本沒有值，如果沒有任何選項被預選選定，那么單選的<select>標簽會預先選擇第一個選項。范例代碼：<body><selectname="mjx"multiple="multiple"size="2">〈optionselected="selected">請選擇</option><optgrouplabel="選項組1">〈optionvalue="購物"〉購物</option>〈optionvalue="吃喝">吃喝</option>〈optionvalue="保健">保健</option>〈optionvalue="健身">健身〈/option〉〈/optgroup>〈optgrouplabel="選項組2"><optionvalue="教育">教育〈/option〉<optionvalue="服務"〉服務〈/option〉<optionvalue="娛樂"〉娛樂〈/option〉<optionvalue="其他"〉其他〈/option〉〈/optgroup〉〈/select〉〈/body〉〈/html〉Optgroup標簽比哦啊單中的選項菜單有可能非常長，這使得它們很難顯示和使用。這種情況下，可以將一些相關的選項分組，然后將這些\組作為一組嵌套的層疊式菜單呈現(xiàn)給用戶?；菊Z法〈optgrouplabel="value”選項〈/optgroup〉可省略功能將菜單或列表中的相關選項組織在一起屬性及說明屬性說明

Dir文本方向Lang語言信息Class用一個名稱來標記子菜單，該標記名稱指向一個預定義的類，而該類是在文檔級聲明的或者在外部定義的樣式表Id為子菜單創(chuàng)建一個標記i，應用超鏈接時可以用這個標記明確的引用該子菜單，以便作為樣式表選擇器或使用其他應用程序來執(zhí)行自動搜索Style創(chuàng)建子菜單內容的內聯(lián)樣式Title給子菜單加上說明性的文字Disabled禁^個子菜單Lable定義子菜單的標題Start設定avi文件播放方式使用label屬性可以定義一個＜opgroup＞子菜單的標題以顯示給用戶。其標記應簡短，這樣才能保證菜單在不同的顯示情況下都能顯示出啦。3.白丹元素分組<label>標簽元素標記<fieldset>元素區(qū)域分組標記<legend>分組區(qū)域的標題顯示標記Label標簽使用label標簽可以定義表單控制間的關系（如一個文本輸入字段和一個或多個文本標記之間的關系）?；菊Z法<labelfor>="value”元素</label>可省略功能為表單元素創(chuàng)建標簽屬性及說明屬性說明Dir文本方向Lang語言信息Class用一個名稱來標記標簽，該標記名稱指向一個預定義的類，而該類是在文檔級聲明的或者在外部定義的樣式表Id為標簽創(chuàng)建一個標記i，應用超鏈接時可以用這個標記明確的引用該子菜單，以便作為樣式表選擇器或使用其他應用程序來執(zhí)行自動搜索Style創(chuàng)建標簽內容的內聯(lián)樣式給標簽加上說明性的文字命名一個目標表單的ID鏈接熱鍵給標簽加上說明性的文字命名一個

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論