HTML/CSS学习笔记02【表单标签】
- w3cschool菜鳥教程.CHM（騰訊微云）：https://share.weiyun.com/c1FaX6ZD
目錄
第3節 表單標簽
今日內容
HTML標簽_表單標簽_概述
HTML標簽_表單標簽_表單項input1
radio
checkbox
label
HTML標簽_表單標簽_表單項input2
隱藏域
取色器
HTML標簽_表單標簽_表單項select
表單 代碼 匯總
HTML標簽_案例1_注冊頁面
第3節 表單標簽
今日內容
HTML標簽_表單標簽_概述
* 表單：
?? ?* 概念：用于采集用戶輸入的數據的（用于和服務器進行交互）。
?? ?* form：用于定義表單的。可以定義一個范圍，范圍代表采集用戶數據的范圍。
? ? ? ? * 屬性：
? ? ? ? ? ? * action：指定提交數據的URL
? ? ? ? ? ? * method：指定提交方式
? ? ? ? ? ? ? ? * 分類：一共7種，2種比較常用
? ? ? ? ? ? ? ? ? ?* get：
? ? ? ? ? ? ? ? ? ? ? ? 1. 請求參數會在地址欄中顯示。會封裝到請求行中(HTTP協議后講解)。
? ? ? ? ? ? ? ? ? ? ? ? 2. 請求參數大小是有限制的。
? ? ? ? ? ? ? ? ? ? ? ? 3. 不太安全。
? ? ? ? ? ? ? ? ? ?* post：
? ? ? ? ? ? ? ? ? ? ? ? 2. 請求參數不會再地址欄中顯示。會封裝在請求體中(HTTP協議后講解)。
? ? ? ? ? ? ? ? ? ? ? ? 2. 請求參數的大小沒有限制。
? ? ? ? ? ? ? ? ? ? ? ? 3. 較為安全。
? ? ? ? * 表單項中的數據要想被提交：必須指定其name屬性。
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>表單標簽</title></head><body><form action="#" method="post">用戶名：<input type="text" name="username"><br>密碼：<input name="password"><br><input type="submit" value="登錄"></form></body> </html>HTML標簽_表單標簽_表單項input1
??
radio
checkbox
label
HTML標簽_表單標簽_表單項input2
?? ?* 表單項標簽：
?? ??? ?* input：可以通過type屬性值，改變元素展示的樣式
?? ??? ??? ?* type屬性：
?? ??? ??? ??? ?* text：文本輸入框，默認值
?? ??? ??? ??? ??? ?* placeholder：指定輸入框的提示信息，當輸入框的內容發生變化，會自動清空提示信息?? ?
?? ??? ??? ??? ?* password：密碼輸入框
?? ??? ??? ??? ?* radio:單選框
?? ??? ??? ??? ??? ?* 注意：
?? ??? ??? ??? ??? ??? ?1. 要想讓多個單選框實現單選的效果，則多個單選框的name屬性值必須一樣。
?? ??? ??? ??? ??? ??? ?2. 一般會給每一個單選框提供value屬性，指定其被選中后提交的值
?? ??? ??? ??? ??? ??? ?3. checked屬性，可以指定默認值
?? ??? ??? ??? ?* checkbox：復選框
?? ??? ??? ??? ??? ?* 注意：
?? ??? ??? ??? ??? ??? ?1. 一般會給每一個單選框提供value屬性，指定其被選中后提交的值。
?? ??? ??? ??? ??? ??? ?2. checked屬性，可以指定默認值。
?? ??? ??? ??? ?* file：文件選擇框
?? ??? ??? ??? ?* hidden：隱藏域，用于提交一些信息。
?? ??? ??? ??? ?* 按鈕：
?? ??? ??? ??? ??? ?* submit：提交按鈕，可以提交表單
?? ??? ??? ??? ??? ?* button：普通按鈕
?? ??? ??? ??? ??? ?* image：圖片提交按鈕
?? ??? ??? ??? ??? ??? ?* src屬性指定圖片的路徑?? ?
?? ??? ? ? * label：指定輸入項的文字描述信息
?? ??? ??? ? ? * 注意：
?? ??? ??? ??? ? ? * label的for屬性一般會和 input 的 id屬性值 對應。如果對應了，則點擊label區域，會讓input輸入框獲取焦點。
隱藏域
取色器
HTML標簽_表單標簽_表單項select
?? ??? ?* select: 下拉列表
?? ??? ??? ?* 子元素：option，指定列表項
?? ??? ??? ?
?? ??? ?* textarea：文本域
?? ??? ??? ?* cols：指定列數，每一行有多少個字符
?? ??? ??? ?* rows：默認多少行。
表單 代碼 匯總
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>表單標簽</title></head><body><form action="#" method="get"><label for="username"> 用戶名 </label>：<input type="text" name="username" placeholder="請輸入用戶名" id="username"><br>密碼：<input type="password" name="password" placeholder="請輸入密碼"><br>性別：<input type="radio" name="gender" value="male"> 男<input type="radio" name="gender" value="female" checked> 女<br>愛好：<input type="checkbox" name="hobby" value="shopping"> 逛街<input type="checkbox" name="hobby" value="java" checked> Java<input type="checkbox" name="hobby" value="game"> 游戲<br>圖片：<input type="file" name="file"><br>隱藏域：<input type="hidden" name="id" value="aaa"> <br>取色器：<input type="color" name="color"><br>生日：<input type="date" name="birthday"> <br>生日：<input type="datetime-local" name="birthday"> <br>郵箱：<input type="email" name="email"> <br>年齡：<input type="number" name="age"> <br>省份：<select name="province"><option value="">--請選擇--</option><option value="1">北京</option><option value="2">上海</option><option value="3" selected>陜西</option></select><br>自我描述：<textarea cols="20" rows="5" name="des"></textarea><br><input type="submit" value="登錄"><input type="button" value="一個按鈕"><br><input type="image" src="img/regbtn.jpg"></form></body> </html>HTML標簽_案例1_注冊頁面
??
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>注冊頁面</title></head><body><!--定義表單 form--><form action="#" method="post"><table border="1" align="center" width="500"><tr><td><label for="username">用戶名</label></td><td><input type="text" name="username" id="username"></td></tr><tr><td><label for="password">密碼</label></td><td><input type="password" name="password" id="password"></td></tr><tr><td><label for="email">Email</label></td><td><input type="email" name="email" id="email"></td></tr><tr><td><label for="name">姓名</label></td><td><input type="text" name="name" id="name"></td></tr><tr><td><label for="tel">手機號</label></td><td><input type="text" name="tel" id="tel"></td></tr><tr><td><label>性別</label></td><td><input type="radio" name="gender" value="male"> 男<input type="radio" name="gender" value="female"> 女</td></tr><tr><td><label for="birthday">出生日期</label></td><td><input type="date" name="birthday" id="birthday"></td></tr><tr><td><label for="checkcode">驗證碼</label></td><td><input type="text" name="checkcode" id="checkcode"><img src="img/verify_code.jpg"></td></tr><tr><td colspan="2" align="center"><input type="submit" value="注冊"></td></tr></table></form></body> </html>加油~~~
總結
以上是生活随笔為你收集整理的HTML/CSS学习笔记02【表单标签】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML/CSS学习笔记01【概念介绍、
- 下一篇： HTML/CSS学习笔记03【CSS概述