表單標簽元素

作用：

給用戶提供一個界面（前臺界面），讓用戶填寫相應的信息，對用戶提交的信息進行收集、分類、與用進行交互。

表單的工作流程：

1、用戶在具有表單的頁面填寫數據

2、將數據提交至後臺(.php) 例如uli.php

3、後臺(.php)接收數據後進行驗證，如果驗證通過，則寫入資料庫或從資料庫將數據讀出，再返回給客戶端。

語法格式：

<form 屬性="屬性值">

    <input type="type的類型" >

</form>

常用的屬性：

1、action        用於設置表單數據處理頁面(.php)

2、method        用於設置提交方式，有以下兩種方式

get        預設方式

特點：

    所有的數據都會被組織成名值對的形式使用url進行傳遞。

    不安全

    傳遞的數據類型單一

    傳遞的數據量小

post

特點：

    所有的數據都會被組織成名值對的形式放在協議內部傳遞

    相對安全

    傳遞的數據類型多樣

    傳遞的數據量大

3、enctype        用於設置數據的傳遞方式(可選)（此屬性只有在method屬性設置為post時才有效）

取值：

1、application/x-www-form-urlencode        (預設值是該選項，可以預設不寫)用於傳遞文本數據

2、multipart/form-data：如果表單包含用於文件上傳的控制項（input type="file"），那麼這個屬性值必須設為multipart/form-data

表單元素

就是為用戶提供一個可輸入的區域。

輸入類型控制項

    type： 設置不同類型的表單元素(輸入區域)

取值：

1. text:單行文本框

           作用：給用戶填寫用戶名等信息，填寫一些文本信息

   size：控制輸入框顯示的文字多少,控制了單行文本框寬度

       

    

2. password    

   ·主要用於，密碼等不方便顯示的信息的控制···

   會將我們輸入的文本相關的內容在顯示的時候替換成例如實心原點的表示方式

1. radio    單選按鈕：

   一組單選按鈕中，input的屬性name的值要保持統一

   註意：如果要預先設置顯示的選項，可以增加一個checked="checked"

   

   

   1. checkbox覆選按鈕

      input表單的屬性有：

      type:設置為checkbox

      註意：

      一組覆選按鈕中，所有的name屬性的屬性值設置為形同的值，並且要在屬性name的屬性值後面統一都分別加一個[]

       

       

1. submit        

1. file

   設置文件上傳

   <input type="file"name="uploadFile" />

       Type：指定上傳文件的類型，如：type="file"

       Name：指定該元素的名稱

    

   

    

2. hidden        

   不是給用戶填寫用的輸入框或者其他選擇等控制項

   作用是設置一個隱藏域，給接收程式提交一些數據，傳一些參數

1. image        用於設置一個圖片提交按鈕

   屬性說明：

   type：設置為image

   src：引入需要設置的圖片資源，

   width：設置寬度

   height：設置高度

   title：設置按鈕的提示信息

1. reset        

   重置按鈕：作用：如果當用戶填寫的內容有誤需要從新填寫時，將我們已經填寫或者選擇的內容進行初始化。

   

下拉列表

<select>

    <option></option>

    <option></option>

    <option></option>

</select>

註意：如果要改變預設展示的選項，就將這個選項上面的option增加一個屬性值，設置：selected='selected'

<textarea></textarea>文本域：

cols:設置合併的列數，控制文本域的寬度

rows:設置合併的行數，控制文本域的高度

disabled：屬性值：disabled，如果設置了該值，多行文本域將被禁用：

label標簽：

可以將我們的文字提示信息和我們的表單控制項的輸入框"捆綁"成一個整體，當我們點擊文字部分的內容的時候，會相應的選中我們在提示框中預先填好的預設信息，

label會觸發我們跟文字緊鄰的表單控制項

label可以看做一個容器

寫法一：

<form>

<lable for="input表單的id屬性的屬性值">請輸入用戶名：<lable>

<input type="text" name="username" id="username" value="請輸入用戶名"/>

</form>

寫法二：

<label>請輸入用戶名：<input type="text" name="username" value="請輸入用戶名"/>

<label>