一、表單的基本介紹
表單：就是互聯網上用於收集用戶信息的一種結構，在HTML當中事先定義好了一種標簽來完成此事，標簽名稱為form,它是一個雙標簽<form action="" method=""><form/>，稱之為表單域
默認情況下form只是在聲明當前結構是一個表單，它里面沒有任何供用戶去輸入信息的框，看起來就像一張白紙。
這時候如果想通過表單來收集用戶信息，就必須在這張白紙上准備上供用戶輸入的框，這些框稱之為表單元素，應用比較多的就是input
action屬性值是指定表單中的內容提交到哪里，在生產階段一般用#站位或空着不寫
method屬性是來定義當前表單以何種形式提交到網站后台，常見方法為get、post、put
get是指通過URL地址進行傳輸，這種方式是明文，所以相對不安全
post請求是將請求內容寫到請求體當中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>form表單基本介紹</title> </head> <body> <!-- 默認情況下form只是在聲明當前結構是一個表單，它里面沒有任何供用戶去輸入信息的框，看起來就像一張白紙。 這時候如果想通過表單來收集用戶信息，就必須在這張白紙上准備上供用戶輸入的框，這些框稱之為表單元素 --> <form action="" method=""> 用戶名：<input type="text" name="" id="" value="" /> 密碼：<input type="password" name="" id="" value="" /> <input type="submit" /> <form/> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>form表單基本介紹</title> </head> <body> <!-- 默認情況下form只是在聲明當前結構是一個表單，它里面沒有任何供用戶去輸入信息的框，看起來就像一張白紙。 這時候如果想通過表單來收集用戶信息，就必須在這張白紙上准備上供用戶輸入的框，這些框稱之為表單元素 action屬性值是指定表單中的內容提交到哪里，在生產階段一般用#站位或空着不寫 method屬性是來定義當前表單以何種形式提交到網站后台，常見方法為get、post、put get是指通過URL地址進行傳輸 --> <form action="#" method="get"> 用戶名：<input type="text" name="username" id="" value="" /> 密碼框：<input type="password" name="password" id="" value="" /> <input type="submit" /> <form/> </body> </html>
二、表單元素的基本介紹
form表單只負責定義具體的表單整體，它里面如果想要收集用戶數據，就必須在有一些供用戶提交數據的模塊，此時，HTML就定義了許多表單標簽，讓用戶進行輸入，最常見的標簽就是input標簽，因為標簽名都叫input，所以HTML中就通過設置type屬性進行區分
1.文本輸入框text，格式是 <input type="text" />
2.密碼輸入框password，格式是 <input type="password" />
3.提交按鈕submit,格式是 <input type="submit" />
4.單選框radio,格式是 <input type="radio" name="sex"/>男
5.復選框checked,格式是 <input type="checkbox" />春天
6.文本域 格式是 <textarea name="" rows="行數" cols="列數"> </textarea>
7.下拉框 格式是
<select>
<option value ="給后台看的">選項1</option>
<option value ="value中的值是給后台看的">選項2</option>
........
</select>
8.重置按鈕 reset 格式是 <input type="reset" />
9.普通按鈕 button 格式是 <input type="button" value="按鈕上方書寫的內容" />
三、表單元素的注意事項
1.name屬性：form通過不同的表單元素來收集數據，在這個過程中有很多的表單元素名稱都叫input，此時如果直接將這些數據傳到后台，后台將無法區分這些數據對應的后台中是那個元素的值，此時為了區分哪個數屬於什么樣的表單項，我們就認為的在input身上設置了name屬性
2.value:他的作用就是定義某些表單元素的默認顯示內容（文本輸入框、提交按鈕、重置按鈕、普通按鈕）
3.checked：這是一個屬性，他的屬性值等於屬性名，用來設置單選框和復選框中默認被選中的選項
4.selected:這是一個屬性，他的屬性值等於屬性名,添加在下拉框選項身上，實現某個選項被默認選中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>常見的表單元素</title> </head> <body> <form action="#" method="get"> 用戶名：<input type="text" name="username" id="" value="" /> <br /> 密碼：<input type="password" name="password" id="" value="" /> <br /> 單選框：<input type="radio" name="sex"/>男 <input type="radio" name="sex" checked="checked"/>女 <br /> 復選框： <input type="checkbox" checked />春天 <input type="checkbox" />夏天 <input type="checkbox" />秋天 <input type="checkbox" />冬天 <br /> 文本域：<textarea name="" rows="5" cols="20"> </textarea> <br /> 下拉菜單： <select> <option value ="給后台看的" selected="selected">一季度</option> <option value ="value中的值是給后台看的">二季度</option> <option value ="">三季度</option> <option value ="">四季度</option> </select> <br /> 重置按鈕：<input type="reset" /> <br /> 普通按鈕：<input type="button" value="重置" /> <br /> 提交按鈕：<input type="submit" value="提交" /> </form> </body> </html>
四、作業練習
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>作業練習</title> </head> <body> <form action="#" method="get"> 郵箱地址：<input type="text" class="mui-input-clear" placeholder="請輸入郵箱號碼">@ <select name="email"> <option value="">163.com</option> <option value="">126.com</option> <option value="">yeah.com</option> </select> <br /><br /> 密碼：<input type="password" /> <br /><br /> 性別：<input type="radio" />男 <input type="radio" checked/>女 <br /><br /> 驗證碼：<input type="text" class="mui-input-clear" placeholder="請輸入驗證碼"> <img src="t014c45eaaa2508bc3e.webp" width="50px" title="驗證碼圖片"> <br /><br /> <input type="button" value="免費獲取驗證碼" /> <br /><br /> 備注：<textarea name="" id="" cols="20" rows="10"></textarea> <br /><br /> <input type="checkbox"/>同意 <a href="#">"服務協議"</a>和"隱私相關政策" <br /><br /> <input type="submit" value="提交"/> <br /><br /> <input type="reset" value="重置按鈕" /> </form> </body> </html>
