03. html表單標籤
阿新 • • 發佈：2021-08-09
html表單標籤
1. 表單作用
<!--能夠獲取前端使用者資料(使用者輸入的、使用者選擇、使用者上傳...)基於網路傳送給後端伺服器-->
2. 註冊小案例
show code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>form表單</title> </head> <body> <!--action 提交資料到後端的路徑（給哪個伺服器提交）--> <!-- 1.什麼都不寫 預設當前頁面所在的url 2.全路徑 www.baidu.com 百度 3.只寫路徑字尾 action='/index' 自動識別出服務端的ip和port拼接到前面 host:port/index --> <!--input 和 label一起使用--> <form action=""> <p><label for="d1"> username : <input type="text" id="d1"/> </label></p> <!--通過id連線即可--> <p><label for="d2"></label> password : <input type="password" id='d2' /></p> <p>birthday ： <label for="d3"><input type="date" id="d3"/></label> </p> <!-- 所有獲取使用者標籤輸入的標籤 都應該有name屬性 name類似於字典的key 使用者資料類似於字典的value --> <p>gender : <input type="radio" value="男" name="gender" checked="checked" /> <input type="radio" value="女" name="gender" /> <input type="radio" value="其他" name="gender" /> </p> <p>bobby : <input type="checkbox" /> 打球 <input type="checkbox" /> 音樂 </p> <p>province: <select name="" id=""> <option value="" >桂林</option> <option value="" selected>南寧</option> <option value="">梧州</option> </select> </p> <p>subject : <select name="" id="" multiple> <option value="">python</option> <option value="" selected>java</option> <option value="">js</option> </select> </p> <p> addr： <select name="" id=""> <optgroup label="桂林"> <option value="">臨桂</option> <option value="">龍勝</option> <option value="">恭城</option> </optgroup> <optgroup label="河池"> <option value="">宜州</option> <option value="">金城江</option> </optgroup> </select> </p> <p>上傳檔案: <input type="file" multiple/> </p> <p>自我介紹： <textarea name="" id="" cols="30" rows="10" maxlength="20"></textarea> </p> <!--提交form表單資料頁面重新整理--> <input type="submit" value="註冊" /> <!--普通按鈕，本身沒有功能，後面有用，學js之後自定義功能--> <input type="button" value="按鈕" /> <!--用來重置內容--> <input type="reset" value="重置" /> <!--button也可以提交表單資料--> <button>點我</button> </form> </body> </html>
3. 表單標籤詳解
3.1 form表單
格式：
<form action=""></form> 在該form標籤內部書寫的獲取使用者的資料都會被form標籤提交到後端（會有案例解釋）
action:控制資料提交的後端路徑(給哪個服務端提交資料)
1.什麼都不寫 預設就是朝當前頁面所在的url提交資料
2.寫全路徑:https://www.baidu.com 朝百度服務端提交
3.只寫路徑字尾action='/index/'，自動識別出當前服務端的ip和port拼接到前面
host:port/index/
3.2 input標籤
input標籤 就類似於前端的變形金剛 通過type屬性變形 text:普通文字 password:密文 date:日期 submit:用來觸發form表單提交資料的動作 button:就是一個普普通通的按鈕 本身沒有任何的功能 但是它是最有用的，學完js之後可以給它自定義各種功能 reset:重置內容 radio:單選 checkbox:多選 file:獲取檔案 也可以一次性獲取多個
3.2.1 type="text"&type="password"與label結合使用
- 標籤與label作用：原始的input標籤需要點選文字框/密碼框才能輸入，繫結之後可以點選繫結物（username、password）也能輸入
- 第一種：巢狀起來，通過id值連結
- 第二種：通過id值與label標籤中的for直接連結即可，不需要巢狀
<!--第一種--> <p><label for="d1"> username : <input type="text" id="d1"/> </label></p> <!--第二種--> <p><label for="d2"></label> password : <input type="password" id='d2' /></p>