HTML基礎-DAY2

標籤：資訊   樣本   htm   html元素   表單元素   唯讀   checkbox   ges   group   

表單標籤form

功能：表單用於向伺服器傳輸資料，從而實現使用者與Web伺服器的互動

表單能夠包含input系欄標籤，比如文字欄位、複選框、單選框、提交按鈕等等。

表單還可以包含textarea、select、fieldset和 label標籤。

表單屬性

action: 表單提交到哪.一般指向伺服器端一個程式,程式接收到表單提交過來的資料（即表單元素值）作相應處理，比如https://www.sogou.com/web

method: 表單的提交方式 post/get預設取值就是get

表單元素

HTML表單是HTML元素中較為複雜的部分，表單往往和指令碼、動態網頁面、資料處理等功能相結合，因此它是製作動態網站很重要的內容。

表單一般用來收集使用者的輸入資訊。

工作原理

訪問者在瀏覽有表單的網頁時，可填寫必需的資訊，然後按某個按鈕提交。這些資訊通過Internet傳送到伺服器上。 

伺服器上專門的程式對這些資料進行處理，如果有錯誤會返回錯誤資訊，並要求糾正錯誤。當資料完整無誤後，伺服器反饋一個輸入完成的資訊。

 

input系欄標籤

#類型text 文本輸入框password 密碼輸入框radio 單選框checkbox 多選框  submit 提交按鈕            button 普通按鈕無任何屬性，需要配合js使用賦予功能file 提交檔案，form表單需要加上屬性enctype="multipart/form-data"         上傳檔案注意兩點：            1 請求方式必須是post            2 enctype="multipart/form-data"#屬性name    表單提交項的鍵.        注意和id屬性的區別：name屬性是和伺服器通訊時使用的名稱；        而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便用戶端編程，而在css和javascript中使用的value   表單提交項的值.對於不同的輸入類型，value 屬性的用法也不同：                type="button", "reset", "submit" - 定義按鈕上的顯示的文本                type="text", "password", "hidden" - 定義輸入欄位的初始值                type="checkbox", "radio", "image" - 定義與輸入相關聯的值checked:  radio 和 checkbox 預設被選中readonly: 唯讀. text 和 passworddisabled: 對所用input都好使.

 

註：同服務端進行資料互動，資料是以key:value的形式提交的，在python裡就是字典的處理方式，key是name屬性定義的，value是一個列表，列表內的元素是表單的value屬性

 

樣本1：text和password類型

<form action="/index/" method="post">    <p>姓名：<input type="text" name="user" value="wangbadan"> </p>    #value是預設值    <p>使用者：<input type="text" placeholder="user"> </p>   #placeholder用於顯示提示，也可用於password類型    <p>密碼：<input type="password" name="password" > </p>     #密碼類型是加密顯示的</form>

 

樣本2：checkbox多選框和radio單選框

<form action="/index/" method="post">    #checkbox和radio的關聯是通過相同的name索引值關聯的    <p>愛好：<input type="checkbox" name="hobby" value="chi">吃             <input type="checkbox" name="hobby" value="piao" checked="checked">嫖      #cheched表示預設選中             <input type="checkbox" name="hobby" value="du">賭             <input type="checkbox" name="hobby" value="he">喝    </p>    <p>性別：<input type="radio" name="sex" value="1" checked="checked">男            <input type="radio" name="sex" value="0">女    </p></form>

 

註：複選框，選幾個，key:value的value列表裡就增加幾個元素

樣本3：reset重設按鈕、button普通按鈕、submit提交按鈕、file檔案上傳按鈕

<form action="/index/" method="post">    <p><input type="reset"></p>     #重設當前表單的輸入    <p><input type="button" value="按鈕"></p>     #普通按鈕，沒屬性    <p><input type="submit" value="submit"></p>     #將當前輸入的值提交給action定義的目標    <p><input type="file" value=""></p>      #檔案上傳標籤</form>

 

select下拉選擇標籤

#屬性name:表單提交項的鍵.size：選項個數multiple：multiple           <optgroup>為每一項加上分組           <option> 下拉選中的每一項 屬性：value:表單提交項的值.   selected: selected下拉選預設被選中

樣本：

<form action="/index/" method="post">    <p>籍貫        <select name="jiguan" size="1" multiple="multiple">        <!--<select name="jiguan" multiple="multiple">--> #不限制size最多顯示四個            <option value="hebei"> 河北省</option>            <option value="henan"> 河南省</option>            <option value="hubei"> 湖北省</option>            <option value="hunan" selected="selected">湖南省  </option>    #selected預設選中        </select>    </p></form>

 

 

textarea多行文本

<form action="/index/" method="post">    <p>簡介：<textarea name="personal" cols="30" rows="10" placeholder="簡歷"></textarea></p></form>

 

label標籤

<label> 標籤為 input 元素定義圖說文字（標記），主要為了增加對使用者的友好度。

說明：

1 label 元素不會向使用者呈現任何特殊效果。

2 <label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。

<form action="/index/" method="post">    <p>愛好：        <input type="checkbox" name="hobby" value="chi" id="chi"><label for="chi">吃</label>        <input type="checkbox" name="hobby" value="piao" checked="checked" id="piao"><label for="piao">嫖</label>        <input type="checkbox" name="hobby" value="du" id="du"><label for="du">賭</label>        <input type="checkbox" name="hobby" value="he" id="he"><label for="he">喝</label>    </p>    <p>性別：        <input type="radio" name="sex" value="1" checked="checked" id="nan"><label for="nan">男</label>        <input type="radio" name="sex" value="0" id="nv"><label for="nv">女</label>    </p></form>

 

fieldset標籤

<fieldset>    <legend>登入吧</legend>    <input type="text"></fieldset>

 

 

HTML基礎-DAY2