設計表單樣式

參考書籍《HTML+CSS+JavaScript從入門到精通》

語法:

完整的表單結構:

表單框:<form>,屬性,action:設置數據提交至服務器的目標頁面,當屬性值爲#時表示爲當前頁面

enctype:定義發送表單數據HTTP字符編碼格式,屬性值爲application/x-www-form-urlencoded,默認值,數據編碼爲名稱/值對的形式發送至服務器。

multipart/form-data:將表單中數據編碼爲一條消息,表單中有上傳組件時,設置屬性值是必須的,不過上傳組件一般爲非文本文件,例如jpg\rar\mp3等。

text/plain:將表單中的數據以純文本方式進行編碼,發送郵件必須使用該編碼類型,否則會出現接收編碼時混亂的情況。

method:發送表單數據的HTTP請求方式,主要包括兩種方式,post\get。get方法傳輸的數據量少,執行效率高,在瀏覽器地址中可以看到提交的查詢字符串;post方法傳輸的數據量多,無法通過瀏覽器地址查看提交的數據,適合傳輸重要信息。

輸入框:

<input>

maxlength:輸入字符的最大長度,整數值,最小爲0;value:表示輸入框的默認值;size:表示輸入框的寬度,一般用CSS的width值代替;readonly:表單對象只讀狀態;disabled,定義對象爲不可用狀態。

type屬性,屬性值:hide(隱藏區域,value值爲傳輸到服務器的數據);type="file",將文件以二進制數據的形式上傳到服務器;text/checkbox/image/password/radio/submit:單行文本/複選框/定義圖像作爲提交按鈕/密碼/單選按鈕/提交按鈕,定義checked屬性定義默認選擇項。

<textarea>文本區域可以允許用戶輸入大容量信息,主要應用於用戶留言或者聊天窗口中。

<select>標籤和<option>配合使用可以設計下拉菜單或者列表框,<select>標籤包含<option>標籤或<optgroup>(選項分類)標籤,使用select屬性定義默認選項,multiple,定義下拉菜單可以多選。

<fieldset>爲表單對象進行分組,默認狀態下,區域分組外面會顯示一個包圍框,<legend>定義每組的標題,默認顯示在<fieldset>包含框的左上角。

<lable>和<input>配合使用,則點擊lable標籤中提示字時光標也會聚焦在<input>標籤內,注意lable中for的值應該等於input中id的值。

定義樣式:

部分表單對象是構造複雜的控件,不易使用CSS修飾,需要用JS實現。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章