python-form表單

form表單

form屬於塊級標簽

功能：

表單用於向服務器傳輸數據，從而實現用戶與web服務器的交互

表單能夠包含input系列標簽，比如文本字段。復選框。單選框。提交按鈕等等

表單還可以包含textarea select fieldset labl標簽

表單屬性：

屬性	描述
accept-charset	規定在提交表單時使用的字符集（默認：頁面字符集）
action	規定向何處提交表單的地址 URL（提交頁面）
autocomplete	規定瀏覽器應該自動完成表單（默認：開啟）
enctype	規定被提及的數據的編碼（默認：url-encoded）
methon	規定提交表單時所用的方法（默認：get）
name	規定識別表單的名稱（對於DOM 使用：document.forms.name）
novalidate	規定瀏覽器不驗證表單
target	規定action屬性中地址的目標（默認：_self）

表單元素：

基本概念：

        html表單是html里比較復雜的部分，表單往往和腳本 動態頁面 數據處理等功能結合 因此他是制作動態網站很重要的內容

        表單一般手機用戶的輸入信息

表單工作原理：

        訪問者在瀏覽表單網頁時，可填寫必須的信息，然后按某個按鈕提交。這些信息通過internet傳送的服務端

        服務器上專門的程序對這些數據進行處理，如果有錯誤會返回錯誤信息，並要求糾正錯誤。當服務器完整無誤后，服務器會反饋一個輸入完成的信息

屬性

• name：表單的名稱，用於js來操作控制表單時使用；
• id：表單的名稱，用於js來操作控制表單時使用；
• action：指定表單的處理程序，一般時php，如action="login.php"
• method：表單的提交方式，一般取值get（默認）和post

action屬性就是表示，表單提交到哪里

method屬性就是表示用什么方法提交，如：post get

get和post的區別：

GET方式：

將表單數據，以"name=value"形式追加到action指定的處理程序的后面，兩者間用"?"隔開，每一個表單的"name=value"間用"&"號隔開。
特點：只適合提交少量信息，並且不太安全(不要提交敏感數據)、提交的數據類型只限於ASCII字符。

POST方式：
將表單數據直接發送(隱藏)到action指定的處理程序。POST發送的數據不可見。Action指定的處理程序可以獲取到表單數據。
特點：可以提交海量信息，相對來說安全一些，提交的數據格式是多樣的(Word、Excel、rar、img)。

Enctype：
表單數據的編碼方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。

• Application/x-www-form-urlencoded：默認加密方式，除了上傳文件之外的數據都可以
• Multipart/form-data：上傳附件時，必須使用這種編碼方式.

input 輸入標簽（文本框）（內聯標簽）

type屬性值	表現形式	對應代碼
text	單行輸入文本	input type=text" /
password	密碼輸入框（不顯示明文）	input type="password" /
date	日期輸入框	input type="date" /
checkbox	復選框	input type="checkbox" checked="checked" name='x' /
radio	單選框	input type="radio" name='x' /
submit	提交按鈕	input type="submit" value="提交" / #發送瀏覽器上輸入標簽中的內容，配合form表單使用，頁面會刷新
reset	重置按鈕	input type="reset" value="重置" #頁面不會刷新，將所有輸入的內容清空
button	普通按鈕	input type="button" value="普通按鈕" /
hidden	隱藏輸入框	input type="hidden" /
file	文本選擇框	input type="file" /（等學了form表單之后再學這個）

用於接收用戶輸入。

<input type="text" />

用戶名 : <input type="text" name = 'username' value = 'alex' readonly>
密  碼 : <input type="password" name = 'passwd'>
<input type="radio" name = 'sex' value="m" checked> 男
<input type="radio" name = 'sex' value="f"> 女
<input type="checkbox" name = 'hobby' value="1" checked disabled> 抽煙
<input type="checkbox" name = 'hobby' value="2"> 喝酒
<input type="checkbox" name = 'hobby' value="3"> 燙頭
<input type="submit">

屬性

• type="屬性值"：文本類型。屬性值可以是：
• text（默認）
  • password：密碼類型
• radio：單選按鈕，名字相同的按鈕作為一組進行單選（單選按鈕，天生是不能互斥的，如果想互斥，必須要有相同的name屬性。name就是“名字”。
  ）。非常像以前的收音機，按下去一個按鈕，其他的就抬起來了。所以叫做radio。
  • checkbox：多選按鈕，名字相同的按鈕作為一組進行選擇。
  • checked：將單選按鈕或多選按鈕默認處於選中狀態。當``標簽的type="radio"時，可以用這個屬性。屬性值也是checked，可以省略。
  • hidden：隱藏框，在表單中包含不希望用戶看見的信息
  • button：普通按鈕，結合js代碼進行使用。
  • submit：提交按鈕，傳送當前表單的數據給服務器或其他程序處理。這個按鈕不需要寫value自動就會有“提交”文字。這個按鈕真的有提交功能。點擊按鈕后，這個表單就會被提交到form標簽的action屬性中指定的那個頁面中去。
  • reset：重置按鈕，清空當前表單的內容，並設置為最初的默認值
  • image：圖片按鈕，和提交按鈕的功能完全一致，只不過圖片按鈕可以顯示圖片。
  • file：文件選擇框。
    提示：如果要限制上傳文件的類型，需要配合JS來實現驗證。對上傳文件的安全檢查：一是擴展名的檢查，二是文件數據內容的檢查。
• value="內容"：文本框里的默認內容（已經被填好了的）
• size="50"：表示文本框內可以顯示五十個字符。一個英文或一個中文都算一個字符。
  注意size屬性值的單位不是像素哦。
• readonly：文本框只讀，不能編輯。因為它的屬性值也是readonly，所以屬性值可以不寫。
  用了這個屬性之后，在google瀏覽器中，光標點不進去；在IE瀏覽器中，光標可以點進去，但是文字不能編輯。
• disabled：文本框只讀，不能編輯，光標點不進去。屬性值可以不寫。
• name : 提交數據之后以name屬性為依據
• placeholder : 給text或者password框添加提示,當輸入框獲取到焦點時提示自動消失

示例：

 <form>
        姓名：<input value="呵呵" >逗比<br>
        昵稱：<input value="哈哈" readonly=""><br>
        名字：<input type="text" value="name" disabled=""><br>
        密碼：<input type="password" value="pwd" size="50"><br>
        性別：<input type="radio" name="gender" value="male" checked="">男 
              <input type="radio" name="gender" value="female" >女<br>
        愛好：<input type="checkbox" name="love" value="eat">吃飯
              <input type="checkbox" name="love" value="sleep">睡覺
              <input type="checkbox" name="love" value="bat">打豆豆
    </form>

4種按鈕的舉例:

<form>
        <input type="button" value="普通按鈕"><br>
        <input type="submit"  value="提交按鈕"><br>
        <input type="reset" value="重置按鈕"><br>
        <input type="image" src="images/bojie.jpeg" width="400" value="圖片按鈕2"><br>
        <input type="file" value="文件選擇框">
</form>

select：下拉列表標簽（內聯標簽）

select標簽的屬性

• multiple：可以對下拉列表中的選項進行多選。沒有屬性值。
• size="3"：如果屬性值大於1，則列表為滾動視圖。默認屬性值為1，即下拉視圖。

option標簽的屬性

• selected：預選中。沒有屬性值。

示例：

 <form>    
        <select>
            <option>小學</option>
            <option>初中</option>
            <option>高中</option>
            <option>大學</option>
            <option selected="">研究生</option>
        </select>
        <br><br><br>

        <select size="3">
            <option>小學</option>
            <option>初中</option>
            <option>高中</option>
            <option>大學</option>
            <option>研究生</option>
        </select>
        <br><br><br>

        <select multiple="">
            <option>小學</option>
            <option>初中</option>
            <option selected="">高中</option>
            <option selected="">大學</option>
            <option>研究生</option>
        </select>
        <br><br><br>
    </form>    

<!--
         <select name="city" size="3" multiple>
            <option value="1">北京</option>
            <option value="2" selected>上海</option>
            <option value="3">天津</option>
            <option value="4">廣州</option>
        </select>
-->

textarea標簽：多行文本輸入框（內聯標簽）

text就是“文本”，area就是“區域”。

屬性

• value：提交給服務器的值。
• rows="4"：指定文本區域的行數。 表示的是文本域的高度
• cols="20"：指定文本區域的列數。 表示的是文本域的寬度
• readonly：只讀。
• name：提交數據之后以name屬性為依據

示例代碼

<form>
        <textarea name="txtInfo" rows="4" cols="20">路飛學城</textarea>
     	<textarea name="content" id="" cols="30" rows="10"></textarea>
</form>

表單的語義化

比如，我們在注冊一個網站的信息的時候，有一部分是必填信息，有一部分是選填信息，這個時候可以利用表單的語義化。

<form>

        <fieldset>
        <legend>賬號信息</legend>
        姓名：<input value="呵呵" >逗比<br>
        密碼：<input type="password" value="pwd" size="50"><br>
        </fieldset>

        <fieldset>
        <legend>其他信息</legend>
        性別：<input type="radio" name="gender" value="male" checked="">男 
              <input type="radio" name="gender" value="female" >女<br>
        愛好：<input type="checkbox" name="love" value="eat">吃飯
              <input type="checkbox" name="love" value="sleep">睡覺
              <input type="checkbox" name="love" value="bat">打豆豆
        </fieldset>

</form>

label標簽（內聯標簽）

我們先來看下面一段代碼：

<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女

lable 的 for關聯一個輸入款的id,如果點擊lable中的文字,這個輸入框會自動獲取到焦點

對於上面這樣的單選框，我們只有點擊那個單選框（小圓圈）才可以選中，點擊“男”、“女”這兩個文字時是無法選中的；於是，label標簽派上了用場。

本質上來講，“男”、“女”這兩個文字和input標簽時沒有關系的，而label就是解決這個問題的。我們可以通過label把input和漢字包裹起來作為整體。

解決方法如下：

<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
<input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>

上方代碼中，input元素要有一個id，然后label標簽有一個for屬性，和id相同，那么這個label和input就有綁定關系了。

當然了，復選框也有label：（任何表單元素都有label）

<input type="checkbox" id="kk" />
<label for="kk">10天內免登陸</label>  

button標簽

提交按鈕：form表單內部使用相當於提交，外部使用只普通按鈕

在form表單內部外部都可以使用
在內部表示提交
在外部只普通按鈕

<button>submit按鈕</button>

form表單示例：

<form action="http://127.0.0.1:9000">
    <!--用戶名 : <input type="text" name="username" placeholder="請輸入手機號或郵箱進行登錄">-->
    <div>
        <label for="user">用戶名 :</label>
         <input id="user" type="text" name = 'username' value = 'alex'></div>
    <div> 密  碼 : <input type="password" name = 'passwd'  readonly></div>
    <div>性別 :
        <input type="radio" name = 'sex' value="m" checked> 男
        <input type="radio" name = 'sex' value="f"> 女
    </div>
    <div>
        <input type="checkbox" name = 'hobby' value="1" checked disabled> 抽煙
        <input type="checkbox" name = 'hobby' value="2"> 喝酒
        <input type="checkbox" name = 'hobby' value="3"> 燙頭
    </div>
    <input type="submit">
    <input type="button" value="按鈕">
    <input type="reset">
    <input type="hidden">
    <input type="file">
    <input type="date">
    <button>submit按鈕</button>
    <textarea name="content" cols="30" rows="10"></textarea>

    <select name="" size="3" multiple>
        <option value="">北京</option>
        <option value="" selected>上海</option>
        <option value="">天津</option>
        <option value="">廣州</option>
    </select>
</form>