標籤:img lang action english submit tle 9.png name head
表單標籤的屬性:
用於向伺服器傳輸資料
表單能夠包含input元素,比如文字欄位,複選框,單選框,提交按鈕等等
表單還可以包含textarea(簡介之類的),select(下拉),fieldset和label元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link></head><body><form action="https://www.sogou.com/web"> <!--action後面跟資料的發送終端地址--> 使用者名稱<input type="text" name="query"> <!--name起的作用是將發送給服務端資料起索引值對的作用,方便提取--> <input type="submit" value="點擊提交"><!--submit起到提交作用,value起提示作用--></form></body></html>
結果
當點擊了提交之後,就彈到了
這是因為在搜狗搜尋引擎裡面提交的索引值對分別是query和一個搜尋字
2、提交方式
表單主要有兩種提交方式:post/get,預設是get
get:提交的索引值對,放在url後面,安全性較差,長度有限制
post:提交的索引值對不在地址欄,安全性相對較高,提交內容理論上無限制
3、input的其他標籤
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link></head><body><form action="https://www.sogou.com/web" method="post" enctype="multipart/form-data"> <!--action後面跟資料的發送終端地址,傳送檔案時要聲明multipart/form-data--> <p>使用者名稱:<input type="text" name="query"></p> <p>密碼:<input type="password" name="pwd"></p> <input type="submit" value="點擊提交"><!--submit起到提交作用,value起提示作用-->相別 <p>男<input type="radio" name="sex" value="1"></p><!--radio是單選框,value起提示作用,傳送到資料庫的資料--> <p>女<input type="radio" name="sex" value="2"></p>興趣 <p>籃球<input type="checkbox" name="hobby" value="1"></p> <p>足球<input type="checkbox" name="hobby" value="2"></p> <p>排球<input type="checkbox" name="hobby" value="3"></p> <p>看書<input type="checkbox" name="hobby" value="4"></p> <p>旅遊<input type="checkbox" name="hobby" value="5"></p><!--這是複選-->按鈕 <p> <input type="button" value="我是一個按鈕"> </p> <input type="file" value="I am a file"><!--file可以上傳檔案給服務端--></form></body></html>
結果
4、
其他表單標籤
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><select name="language" multiple="multiple" size="3" > <!--要放在option裡面,multiple表示可以多選,size means the most you can choose--> <optgroup label="語言學習1" > <!--這是分組了--> <option value="1">C</option> <option value="2">java</option> <option value="3">python</option> </optgroup> <!--要放在option裡面,multiple表示可以多選,size means the most you can choose--> <optgroup label="語言學習2"> <option value="1">Chinese</option> <option value="2">English</option> <option value="3">French</option> </optgroup> <!--要放在option裡面,multiple表示可以多選,size means the most you can choose--> <optgroup label="語言學習3"> <option value="1">mechine learning</option> <option value="2">deep learning</option> <option value="3">學個屁</option> </optgroup></select><br>備忘<textarea name="text" ></textarea><!--添加文檔--><br><label for="www">姓名</label><input id="www" type="text"><!--將文本和輸入框連結起來,點擊文本就可以進入輸入框--><fieldset> <legend>登入吧</legend> <!--加個框框--> <input type="text"></fieldset>
結果
html之表單標籤