回覆列表
  • 1 # 乘風破浪小王子

    HTML表單標籤HTML 表單用於蒐集不同型別的使用者輸入。 一個完整的表單包含三個基本組成部分:表單標籤、表單域、表單按鈕。 1. 表單標籤HTML 表單用於收集使用者輸入,表單使用 標籤建立。表單可包含文字欄位、複選框、單選框、提交按鈕等等。 注意:元素是塊級元素,其前後會產生折行。

    1.1form表單的屬性

    action="url":請求地址,指定form表單向何處傳送資料。 name="login":作用是給表單起名,為了便於我們操作。 enctype ="string":規定在傳送表單資料之前,如何對錶單資料進行編碼。通常在使用檔案上傳時,我們會enctype="multipart/form-data",以二進位制傳輸。 method ="get/post":指定表單以何種方式傳送到指定的伺服器程式,該屬性定義瀏覽器將表單中的資料提交給伺服器處理程式的方式。關於method的取值,最常用的是get和post。 2. 表單域要提交資料的表單域必須加name屬性。不然,該表單域的資料不會提交到伺服器上。

    2.1 <input>標籤

    input用於收集使用者資訊,根據不同的型別顯示不同的形式。input是空標籤,它沒有結束標籤,在開始標籤中結束。 元素根據不同的type屬性,可以變化為多種形態。 元素設定name屬性,用於網路請求時提交對應輸入的欄位。 input="text" 文字框 定義單行的輸入欄位,使用者可在其中輸入文字。它是一個單行文字框,input的預設型別即是text型別。 input="password" 密碼框 型別為password時,它用於收集使用者輸入的密碼,在你輸入時,瀏覽器會把輸入的內容以符號來代替。 文字框和密碼框都可以新增placeholder屬性,用於設定輸入欄位預期值的提示資訊。該提示會在輸入欄位為空時顯示,並會在欄位獲得焦點時消失。 type="radio" 單選框 型別為radio時,用於定義單選按鈕,name屬性值相同的input單選框只能有一個被選中。 設定預設選中的單選框。 是提交到伺服器時給後臺程式設計師們看的。 type="checkbox" 複選框 型別為checkbox時,用於定義複選按鈕,複選框允許使用者在一定數目的選擇中選取一個或多個選項。 type="file" 檔案上傳 型別為file時,預設為單檔案上傳。 設定為多檔案上傳。 type="hidden" 隱藏欄位 隱藏欄位對於使用者是不可見的。隱藏欄位通常會儲存一個預設值,它們的值也可以由 JavaScript 進行修改。

    2.2 <select> 下拉列表

    <select> 元素定義下拉列表,<option>元素定義待選擇的選項。列表通常會把首個選項顯示為被選選項,透過新增 selected 屬性來定義預定義選項。 單選按鈕、複選框預設選中用:checked屬性。 下拉列表使用:selected屬性。 使用size屬性設定下拉列表展開,使用multiple屬性設定多選。

    2.3 <textarea> 文字域

    <textarea> 元素定義多行輸入欄位(文字域) cols:規定文字區內的可見寬度。 rows:規定文字區內的可見行數。 文字域可以新增placeholder屬性,用於設定輸入欄位預期值的提示資訊。

    2.4 <label> 標籤

    label是input的描述,它本身不會有特殊效果,但它和其它input標籤使用可以提升使用者的使用體驗,使用者不用非得點選到按鈕,而是點選文字即可選中,如“記住密碼”。 透過label的for指向按鈕的id來繫結,for和id屬性的值要相同。 3. 表單按鈕type="reset" 重置按鈕 重置按鈕會清除表單中的所有資料。 設定重置按鈕上顯示的文字。 type="submit" 提交按鈕 type="submit" 定義提交按鈕。提交按鈕用於向伺服器傳送表單資料,資料會發送到表單的 action 屬性中指定的頁面。 設定提交按鈕上顯示的文字。 type="button" 普通按鈕 button型別的只是一個普通的按鈕,而submit有一個提交的作用,在沒有加js程式碼的情況下,button只是個裝飾。 type="image" 提交按鈕 image型別的input也是具有一個提交的作用,不同的是可以指定一幅圖片來作為按鈕,不提倡使用image,因為它有時候會提交兩次。

  • 中秋節和大豐收的關聯?
  • 現在還有什麼新的投資方式?