溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
html使用表單向服務器提交請求，表單控件的主要作用就是收集用戶的輸入，當用戶提交表單時，用戶輸入內容將被作為請求參數提交到遠程服務器上
html原有的表單及表單控件
| form屬性 | 說明 |
| action | 指定當單擊表單的確認按鈕，該表單被提交到哪個地址，可以是相對/絕對地址 |
| method | 指定提交表單時發送何種類型的請求 屬性值可以為get post |
| enctype | 對表單內容進行編碼所使用的字符集 |
| name | 指定表單的唯一名稱，建議該屬性值與id屬性值保持一致 |
| target | 使用哪種方式打開目標URL，該屬性值可以是_blank _parent _self _top |
| post:傳送的數據量比較大，用戶在地址欄里看不到參數，安全性較高 | |
get:直接在地址欄中輸入訪問地址所發送的請求 | |
使用input元素，input元素是表單空間當中功能最為豐富，如下幾種輸入元素都是通過<input>元素生成
| 單行文本框 text | 單行文本框用于接受用戶的輸入 |
| 密碼輸入框 password | 密碼框文字不可見 |
| 隱藏域 hidden | 不接受用戶輸入，也不能生成可視化部分 |
| 復選框 checkbox（radio 單選框） | 供用戶選擇 |
| 圖像域 p_w_picpath | 和提交按鈕的作用基本一樣，單擊表單被提交 |
| 文件上傳域 file | 允許用戶瀏覽本地磁盤文件，并將該文件上傳到服務器 |
| 提交 submit | 提交按鈕 |
| 重設 reset | 重置按鈕 |
input核心屬性
| checked | 設置單選框、復選框初識狀態是否處于選中狀態，該屬性只能是checked,選中 |
| disabled | b表示該元素禁用，該元素無法獲得焦點 |
| maxlength | 該屬性值是一個數字，指定文本礦中允許輸入的最大字符字數 |
| size | 指定該元素的寬度 |
| readonly | 文本框中的值不允許用戶更改 |
| src | 指定圖像域所顯示圖像的URL |
代碼示例：
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 表單 </title> </head> <body> <form action="http://www.crazyit.org" method="get"> 單行文本框：<input id="username" name="username" type="text" /><br /> 不能編輯的文本框：<input id="username2" name="username" type="text" readonly="readonly" /><br /> 密碼框：<input id="password" name="password" type="password" /><br /> 隱藏域：<input id="hidden" name="hidden" type="hidden" /><br /> 第一組單選框：<br /> <input id="color" name="color" type="radio" value="red"/> <input id="color2" name="color" type="radio" value="green" /> <input id="color3" name="color" type="radio" value="blue"/><br /> 第二組單選框：<br /> <input id="gender" name="gender" type="radio" value="male"/> <input id="gender2" name="gender" type="radio" value="female" /><br /> 兩個復選框：<br /> <input id="website" name="website" type="checkbox" value="leegang.org" /> <input id="website2" name="website" type="checkbox" value="crazyit.org" /><br /> 文件上傳域：<input id="file" name="file" type="file"/><br /> 圖像域：<input type="p_w_picpath" src="p_w_picpaths/wjc.gif" alt="瘋狂Java聯盟"/><br /> 下面是四個按鈕：<br /> <input id="ok" name="ok" type="submit" value="提交" /> <input id="dis" name="dis" type="submit" value="提交" disabled="disabled" /> <input id="cancel" name="cancel" type="reset" value="重填"/> <input id="no" name="no" type="button" value="無動作" /> </form> </body> </html>
使用label定義標簽：
標簽與表單空間關聯有兩種方式
①隱式使用for屬性：指定<label>元素的for屬性值為所關聯表單空間的id屬性值
②顯示關聯：將普通文本、表單空間一起放在<label>元素內部即可
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> label元素 </title> </head> <body> <form action="http://www.crazyit.org" method="get"> <label for="username">單行文本框：</label> <input id="username" name="username" type="text" /><br /> <label>密碼框：<input id="password" name="password" type="password" /> </label><br /> <input id='ok' type="submit" value="登錄瘋狂Java聯盟" /> </form> </body> </html>
列表框和下拉菜單:
用于創建列表框或下拉菜單，該元素必須要和<option>元素結合使用，屬性：multiple設置是否可以多選，size 指定列表框內可以同時顯示多少個列表項
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> select元素 </title> </head> <body> <form action="http://www.crazyit.org" method="post"> 下面是簡單下拉菜單：<br /> <select id="skills" name="skills"> <option value="java">Java語言</option> <option value="c">C語言</option> <option value="ruby">Ruby語言</option> </select><br /><br /><br /> 下面是允許多選的列表框：<br /> <select id="books" name="books" multiple="multiple" size="4"> <option value="java">瘋狂Java講義</option> <option value="android">瘋狂Android講義</option> <option value="ee">輕量級Java EE企業應用實戰</option> </select><br /> 下面是允許多選的列表框：<br /> <select id="leegang" name="leegang" multiple="multiple" size="6"> <optgroup label="瘋狂Java體系圖書"> <option value="java" label="aaaaaaaa">瘋狂Java講義</option> <option value="android">瘋狂Android講義</option> <option value="ee">輕量級Java EE企業應用實戰</option> </optgroup> <optgroup label="其他圖書"> <option value="struts">Struts 2.1權威指南</option> <option value="ror">RoR敏捷開發最佳實踐</option> </optgroup> </select><br /> <button type="submit"><b>提交</b></button><br /> </form> </body> </html>
textarea定義文本域：
cols 指定文本域的寬度；
rows 指定文本域的高度；
disabled 指定禁用該文本域
readonly 指定該文本域只讀
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 多行文本域 </title> </head> <body> <form action="http://www.crazyit.org" method="post"> 簡單多行文本域：<br /> <textarea cols="20" rows="2"></textarea><br /> 只讀的多行文本域：<br /> <textarea cols="28" rows="4" readonly="readonly"> 瘋狂Java講義 輕量級Java EE企業應用實戰 </textarea><br /> <button type="submit"><b>提交</b></button><br /> </form> </body> </html>
html5新增的屬性與元素
| form屬性 指定屬于哪一個form | <textarea name="desc" form="addform"></textarea> |
| formaction 提交到不同的action | <input type="submit" value="注冊" formaction="regist"> |
| formxxx 與formaction相似 | <input type="submit" formaction="regist" formmethod="get"> |
| autofocus 獲得焦點 | <input type="text" autofocus> |
| placeholder 提示信息 | <input type="text" placeholder="請輸入用戶名"> |
| list 必須與datalist結合使用 | list用法見下 |
| autocomplete 與list結合使用 | on 打開antocomplete 文本框下方會顯示下拉菜單 |
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> list屬性 </title> </head> <body> <form method="post" action="buy"> 請輸入圖書：<input type="text" name="name" list="books"/><br/> <input type="submit" value="購買"/> </form> <datalist id="books"> <option value="java">瘋狂Java講義</option> <option value="ee">輕量級Java EE企業應用實戰</option> <option value="android">瘋狂Android講義</option> </datalist> </body> </html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
