表單標簽: <form>
阿新 • • 發佈：2018-01-12
select 方式 class span passwd 動態網站 form box name屬性
-
表單標簽: <form>
功能：表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互
表單能夠包含input系列標簽，比如文本字段、復選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label標簽。
表單屬性
action: 表單提交到哪.一般指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）作相應處理，比如https://www.sogou.com/web
method: 表單的提交方式 post/get默認取值就是get
表單元素
基本概念：
HTML表單是HTML元素中較為復雜的部分，表單往往和腳本、動態頁面、數據處理等功能相結合，因此它是制作動態網站很重要的內容。
表單一般用來收集用戶的輸入信息
表單工作原理：
訪問者在瀏覽有表單的網頁時，可填寫必需的信息，然後按某個按鈕提交。這些信息通過Internet傳送到服務器上。
服務器上專門的程序對這些數據進行處理，如果有錯誤會返回錯誤信息，並要求糾正錯誤。當數據完整無誤後，服務器反饋一個輸入完成的信息
- <input>系列標簽
‘‘‘ <1> 表單類型 type: text 文本輸入框 password 密碼輸入框 radio 單選框 checkbox 多選框 submit 提交按鈕 button 按鈕(需要配合js使用.) button和submit的區別？ file 提交文件：form表單需要加上屬性enctype="multipart/form-data" 上傳文件註意兩點： 1 請求方式必須是post 2 enctype="multipart/form-data" <2> 表單屬性 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 和 password disabled: 對所用input都好使.‘‘‘
-
姓名密碼
<p>
<label for="c1">姓名：</label>
<input type="text" name="username" placeholder="username" id="c1">
</p>
<p>密碼：<input type="password" name="pwd"></p>
效果如下：
密碼是密文顯示
密碼：
-
性別愛好
<p>性別: <input type="radio" name="gender" value="1">男<input type="radio" name="gender" value="0">女</p> <p>愛好：<input type="checkbox" name="hobby" value="football" checked>足球 <input type="checkbox" name="hobby" value="basktball">籃球<input type="checkbox" name="hobby" value="double2">雙色球</p>
默認選擇足球
性別: 男女
愛好：足球 籃球雙色球
-
其余的
<p>頭像：<input type="file"></p> <p><input type="reset" value="reset"></p> <p><input type="button" value="按鈕" onclick="alert(1234)"></p> <p><input type="hidden" name="key" value="v1"></p>
頭像：
-
select標簽
<p> 省份： <select name="province" size="3" multiple="multiple"> <option value="1">河北省</option> <option value="2" selected>河南省</option> <option value="3">湖北省</option> <option value="4">日本省</option> </select> </p>
效果如下：
multiple設置可以多選，size設置默認顯示3個
省份：
-
文本框
<p>
<textarea name="gerenjianjie" id="" cols="20" rows="10" placeholder="個人簡介"></textarea>
</p>
-
提交submit
<p><input type="submit" value="submit"></p>
練習：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>註冊頁面</title> </head> <body> <form action="" method="get" enctype="multipart/form-data"> <p> <label for="">姓名：</label> <input type="text" name="username" placeholder="username" id="c1" > </p> <p> <label for="">密碼：</label> <input type="text" name="pwd" placeholder="passwd"> </p> <p> 性別：<input type="radio" name="gender" value="1">男 <input type="radio" name="gender" value="0">女 </p> <p> 愛好： <input type="checkbox" name="hobby" value="football" checked>足球 <input type="checkbox" name="hobby" value="basketball">籃球 <input type="checkbox" name="hobby" value="JAPAN TV">日本電影 <input type="checkbox" name="hobby" value="pingpang">乒乓球 </p> <p> 頭像： <input type="file"> </p> <p> <input type="reset" name="reset" value="重置按鈕"> </p> <p> <input type="button" name="button" value="button按鈕" onclick="alert(1234)"> </p> <p> <input type="hidden" name="key" value="v1"> </p> <p> <select name="省份" id="province" size="2" multiple="multiple"> <option value="1">河北省</option> <option value="2">河南省</option> <option value="3">山東省</option> <option value="4">日本省</option> </select> </p> <p> <textarea name="gerenjianjie" id="g1" rows="30" cols="50" placeholder="個人簡介"></textarea> </p> <p> <input type="submit" value="submit"> </p> </form> </body> </html>
表單標簽: <form>