HTML學習-------表單

表單:

    是網頁上的一個特定的區域,這個區域是由一對<form>標記定義的。

    定義:<form>

              <input>元素

         </form>

   (form 元素是塊級元素,其前後會產生折行。)


    表單能夠包含 input 元素,比如文本字段、複選框、單選框、提交按鈕等等。

    表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。


    表單用於向服務器傳輸數據。


表單的屬性:


    action屬性:規定提交表單時,向何處發送數據

                語法:<form action="URL">...</form>

   

    name屬性:規定表單的名稱。

              form 元素的 name 屬性提供了一種在腳本中引用表單的方法。

              語法:<form name="form_name">...</form>


    method屬性:規定如何發送表單數據(表單數據發送到action所規定的頁面)

                可取值爲:get和post

                語法:<form method="method">...</form>

   

    enctype屬性:規定表單提交之前,如何對其進行編碼

                 語法:<form enctype="value">...</form>

    enctype的值:   

描述
application/x-www-form-urlencoded

在發送前編碼所有字符(默認)

{在發送到服務器之前,所有字符都會進行編碼(空格轉換爲 "+" 加號,特殊符號轉換爲 ASCII HEX 值)}


multipart/form-data

不對字符編碼。

在使用包含文件上傳控件的表單時,必須使用該值。

text/plain空格轉換爲 "+" 加號,但不對特殊字符編碼。

              

     target屬性:規定在何處打開 action URL。

                 語法:<form target="value">...</form>

描述
_blank在新窗口中打開。
_self默認。在相同的框架中打開。
_parent在父框架集中打開。
_top在整個窗口中打開。
framename在指定的框架中打開。


      accept-charset屬規定服務器用哪種字符集處理表單數據。

                         常用值:

                               UTF-8 - Unicode 字符編碼

                               ISO-8859-1 - 拉丁字母表的字符編碼

                               gb2312 - 簡體中文字符集


      autocomplete屬性:規定表單是否啓用自動完成功能。(是HTML5的新增屬性)

                        取值:on/off;


                        自動完成允許瀏覽器預測對字段的輸入。

                        當用戶在字段開始鍵入時,瀏覽器基於之前鍵入過的值,應該顯示出在字段

                        中填寫的選項。

       注:autocomplete 屬性適用於 <form>,

           以及下面的 <input> 類型:

           text, search, url, telephone, email, password, datepickers, range 以及 color。

       

      novalidate 屬性:規定當提交表單時不對其進行驗證。(是HTML5的新增屬性)


表單中的input標記:

    語法:<form>

              <input name="filed_name" type="type_name">

           </form>


   input中的屬性:

     accept屬性:accept 屬性只能與 <input type="file"> 配合使用。

                  它規定能夠通過文件上傳進行提交的文件類型

                  儘量避免使用該屬性,應該在服務器上驗證文件上傳。


     align屬性:定圖像輸入的對齊方式,與<input type="image">配合使用。

                避免使用該屬性;用css樣式代替。

                只有left和right值被所有瀏覽器支持。


     alt屬性:爲圖像輸入規定替代文本,alt 屬性只能與 <input type="image"> 配合使用。

              註釋:alt 屬性不是必需的屬性,但是當輸入類型爲 image 時,仍然應該設置該屬性。

                    如果不使用該屬性,就有可能對文本瀏覽器或非可視的瀏覽器造成使用障礙。


     checked屬性:規定在頁面加載時被預先選中的input元素。

                  與<input type="checkbox"> 與<input type="radio"> 配合使用。

                  這個值可以在頁面加載後,用Javascript動態指定。


     disable屬性:禁用input元素。

                  注:不能與<input type="hidden">一起使用。


     maxlength 屬性:規定輸入字段的最大長度,以字符個數計。

                     與 <input type="text"> 或 <input type="password"> 配合使用。


     name屬性規定input的名稱


     size屬性:規定輸入框的寬度

               用CSS代替:<input style="width:100px" />


     src屬性:規定圖片的URL,與<input type="image">配合使用。


     value屬性:爲 input 元素設定值。

           注:<input type="checkbox"> 和 <input type="radio"> 必須設置 value 屬性。

                注:value 屬性無法與 <input type="file"> 一同使用。


     type屬性

描述
button定義可點擊按鈕(多數情況下,用於通過 JavaScript 啓動腳本)。
checkbox定義複選框。
file定義輸入字段和 "瀏覽"按鈕,供文件上傳。
hidden定義隱藏的輸入字段。
image定義圖像形式的提交按鈕。
password定義密碼字段。該字段中的字符被掩碼。
radio定義單選按鈕。
reset定義重置按鈕。重置按鈕會清除表單中的所有數據。
submit定義提交按鈕。提交按鈕會把表單數據發送到服務器。
text定義單行的輸入字段,用戶可在其中輸入文本。默認寬度爲 20 個字符。

     

   HTML5中的input屬性:

     autocomplete:規定是否使用輸入字段的自動完成功能。

      autofocus屬性在頁面加載時獲取焦點。

      form屬性:規定input元素所屬的一個或者多個表單

      formaction屬性:覆蓋表單的 action 屬性。

      formenctype屬性:覆蓋表單的 enctype 屬性。

      formmethod 屬性:覆蓋表單的 method 屬性。

     formnovalidate屬性:覆蓋表單的 novalidate 屬性。

                            如果使用該屬性,則提交表單時不進行驗證。

      formtarget屬性: 覆蓋表單的 target 屬性。

      height和width屬性:定義input元素寬高,只是適用於type=image

      list屬性:引用數據列表,其中包含輸入字段的預定義選項。

      max 和 min 屬性:規定輸入字段所允許的最大值和最小值。

                       提示:max 屬性與 min 屬性配合使用,可創建合法值範圍。

                注:max 和 min 屬性適用於以下 <input> 類型:

                    number, range, date, datetime, datetime-local, month, time 以及 week。

           可以配合使用step屬性規定輸入字的的合法數字間隔)

      multiple屬性:允許選擇多個值,適用於type="file"

      pattern屬性:規定輸入字段的值的模式或格式。

      placeholder 屬性提供可描述輸入字段預期值的提示信息(hint)。

      readonly屬性:規定輸入字段爲只讀。    

      required屬性:指示輸入字段的值是必需的。    


表單中的textarea標記:

屬性描述
autofocusautofocus規定在頁面加載後文本區域自動獲得焦點。
colsnumber規定文本區內的可見寬度。
disableddisabled規定禁用該文本區。
formform_id規定文本區域所屬的一個或多個表單。
maxlengthnumber規定文本區域的最大字符數。
namename_of_textarea規定文本區的名稱。
placeholdertext規定描述文本區域預期值的簡短提示。
readonlyreadonly規定文本區爲只讀。
requiredrequired規定文本區域是必填的。
rowsnumber規定文本區內的可見行數。
wrap
  • hard

  • soft

規定當在表單中提交時,文本區域中的文本如何換行。。


表單中的select標記(option標記:)

屬性描述
autofocusautofocus規定在頁面加載後文本區域自動獲得焦點。
disableddisabled規定禁用該下拉列表。
formform_id規定文本區域所屬的一個或多個表單。
multiplemultiple規定可選擇多個選項。
namename規定下拉列表的名稱。
requiredrequired規定文本區域是必填的。
sizenumber規定下拉列表中可見選項的數目。


表單還可以包含 menustextareafieldsetlegend 和 label 元素


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