web前端入门学习 html5（2）
生活随笔
收集整理的這篇文章主要介紹了
web前端入门学习 html5（2）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
https://www.bilibili.com/video/BV1pE411q7FU?p=50&spm_id_from=pageDriver
文章目錄
- 表單標簽
- 為什么需要表單？
- 表單的組成（表單域、表單控件【表單元素】、提示信息）
- 表單域標簽form 基礎班不詳細講，就業班講服務器編程的時候再詳細講
- 表單控件（表單元素）input表單元素、select表單元素、textarea文本域元素
- input表單元素 "text"文本輸入框 "password"密碼輸入框 "radio"單選框 "checkbox"復選框
- input表單元素的name屬性 預置值value 預選屬性checked 最大長度限制maxlength
- 表單提交按鈕submit和重置按鈕reset
- 獲取短信驗證碼按鈕button和上傳文件按鈕file（文件域）
- label標簽（擴大選擇區域，將文本或圖片綁定控件）
- 表單控件（表單元素）input輸入表單元素 select下拉表單元素 textarea文本域元素
- select下拉列表
- textarea文本域（可以輸入大量文字）
- 表單元素使用注意事項
- 綜合案例：注冊頁面
表單標簽
為什么需要表單？
表單的組成（表單域、表單控件【表單元素】、提示信息）
表單域標簽form 基礎班不詳細講，就業班講服務器編程的時候再詳細講
表單控件（表單元素）input表單元素、select表單元素、textarea文本域元素
input表單元素 "text"文本輸入框 "password"密碼輸入框 "radio"單選框 "checkbox"復選框
input表單元素的name屬性 預置值value 預選屬性checked 最大長度限制maxlength
name value屬性目的是讓后臺能夠區分框對應的值
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><form action="">用戶名：<input type="text" name="username" value="請輸入用戶名"><br>密碼：<input type="password" name="pwd" value="請輸入密碼"><br>性別：男<input type="radio" name="sex" value="男">女<input type="radio" name="sex" value="女"><br>愛好：吃飯<input type="checkbox" name="hobby" value="吃飯">睡覺<input type="checkbox" name="hobby" value="睡覺">打豆豆<input type="checkbox" name="hobby" value="打豆豆"><br></form> </body> </html>
表單提交按鈕submit和重置按鈕reset
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><form action="xxx.php" method="GET">用戶名：<input type="text" name="username" value="請輸入用戶名ffff" maxlength="6"><br>密碼：<input type="password" name="pwd" value="請輸入密碼"><br>性別：男<input type="radio" name="sex" value="男" checked="checked">女<input type="radio" name="sex" value="女"><br>愛好：吃飯<input type="checkbox" name="hobby" value="吃飯" checked="checked">睡覺<input type="checkbox" name="hobby" value="睡覺" checked="checked">打豆豆<input type="checkbox" name="hobby" value="打豆豆"><br><input type="submit" value="免費注冊"><input type="reset" value="重置信息"></form> </body> </html>
https://www.bilibili.com/video/BV1pE411q7FU?p=50&spm_id_from=pageDriver
獲取短信驗證碼按鈕button和上傳文件按鈕file（文件域）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><form action="xxx.php" method="GET">用戶名：<input type="text" name="username" value="請輸入用戶名ffff" maxlength="6"><br>密碼：<input type="password" name="pwd" value="請輸入密碼"><br>性別：男<input type="radio" name="sex" value="男" checked="checked">女<input type="radio" name="sex" value="女"><br>愛好：吃飯<input type="checkbox" name="hobby" value="吃飯" checked="checked">睡覺<input type="checkbox" name="hobby" value="睡覺" checked="checked">打豆豆<input type="checkbox" name="hobby" value="打豆豆"><br><input type="submit" value="免費注冊"><input type="reset" value="重置信息"><br><input type="button" value="獲取短信驗證碼"><br><input type="file" value="上傳文件"><br></form> </body> </html>label標簽（擴大選擇區域，將文本或圖片綁定控件）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><form action="xxx.php" method="GET"><label for="text">用戶名：</label><input type="text" name="username" value="請輸入用戶名ffff" maxlength="6" id="text"><br><input type="radio" id="nan" name="sex"><label for="nan">男</label><input type="radio" id="nv" name="sex"><label for="nv">女</label></form> </body> </html>點擊用戶名即可將光標定位到輸入框
點擊文本男即可選中按鈕
表單控件（表單元素）input輸入表單元素 select下拉表單元素 textarea文本域元素
select下拉列表
textarea文本域（可以輸入大量文字）
表單元素使用注意事項
綜合案例：注冊頁面
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>綜合案例-注冊頁面</title> </head> <body><h4>青春不常在，抓緊談戀愛</h4><table width="600" ><!-- 第一行 --><tr><td>性別:</td><td><input type="radio" name="sex" id="nan"> <label for="nan"> <img src="images/man.jpg" > 男 </label> <input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/women.jpg" > 女</label> </td></tr><!-- 第二行 --><tr><td>生日:</td><td><select><option>--請選擇年份--</option><option>2001</option><option>2002</option><option>2003</option></select><select><option>--請選擇月份--</option><option>1</option><option>2</option><option>3</option></select><select><option>--請選擇日--</option><option>1</option><option>2</option><option>3</option></select></td></tr><!-- 第三行 --><tr><td>所在地區</td><td><input type="text" value="北京思密達"></td></tr><!-- 第四行 --><tr><td>婚姻狀況:</td><td><input type="radio" name="marry" checked="checked">未婚 <input type="radio" name="marry"> 已婚 <input type="radio" name="marry"> 離婚</td></tr><!-- 第五行 --><tr><td>學歷:</td><td><input type="text" value="博士后"></td></tr><!-- 第六行 --><tr><td>喜歡的類型:</td><td><input type="checkbox" name="love" > 嫵媚的 <input type="checkbox" name="love" > 可愛的 <input type="checkbox" name="love" > 小鮮肉 <input type="checkbox" name="love" > 老臘肉 <input type="checkbox" name="love" checked="checked"> 都喜歡 </td></tr><!-- 第七行 --><tr><td>個人介紹</td><td><textarea>個人簡介</textarea></td></tr><!-- 第八行 --><tr><td></td><td><input type="submit" value="免費注冊" ></td></tr><tr><td></td><td><input type="checkbox" checked="checked"> 我同意注冊條款和會員加入標準</td></tr><tr><td></td><td><a href="#" > 我是會員，立即登錄</a></td></tr><tr><td></td><td><h5>我承諾</h5><ul><li>年滿18歲、單身</li><li>抱著嚴肅的態度</li><li>真誠尋找另一半</li></ul></td></tr></table> </body> </html>總結
以上是生活随笔為你收集整理的web前端入门学习 html5（2）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网页HTTP协议 get和post请求区
- 下一篇： web前端入门学习 css（1）