文章目錄
- 表單
- 1. 基本結構
- 2. 常用表單控件
- 2.1 文本輸入框
- 2.2 密碼輸入框
- 2.3 單選框
- 2.4 復選框
- 2.5 隱藏域
- 2.6 提交按鈕
- 2.7 重置按鈕
- 2.8 普通按鈕
- 2.9 文本域
- 2.10 下拉框
- 2.11 示例
- 3. 禁用表單控件
- 4. lable標簽
- 5. fieldset與legend標簽
- 6. 總結
表單
概念：一種包含交互的區域，用于手機用戶提供的數據。
1. 基本結構
例：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>表單_基本結構</title>
</head>
<body><form action="https://www.baidu.com/s"><input type="text" name="wd"><button>去百度搜索</button></form><hr><form action="https://search.jd.com/search" target="_self" method="get"><input type="text" name="keyword"><button>去京東搜索</button></form><hr><a href="https://search.jd.com/search?keyword=手機">搜索手機</a>
</body>
</html>
2. 常用表單控件
2.1 文本輸入框
<input type="text">
2.2 密碼輸入框
<input type="password">
2.3 單選框
<input type="radio" name="sex" value="female">女
<input type="ratio" name="sex" value="male">男
2.4 復選框
<input type="checkbox" name="hobby" value="smoke">抽樣
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">燙頭
2.5 隱藏域
<input type="hidden" name="tag" value="100">
2.6 提交按鈕
<!--方法一-->
<input type="submit" value="點我提交表單"><!--方法二-->
<button>點我提交表單</button>
2.7 重置按鈕
<!--方法一-->
<input type="reset" value="點我重置"><!--方法二-->
<button type="reset">點我重置</button>
2.8 普通按鈕
<!--方法一-->
<input type="button" value="普通按鈕"><!--方法二-->
<button type="button">普通按鈕</button>
2.9 文本域
<textarea name="msg" rows="22" cols="3">我是文本域</textarea>
2.10 下拉框
<select name="from"><option value="黑">黑龍江</option><option value="遼">遼寧</option><option value="吉">吉林</option><option value="粵" selected>廣東</option>
</select>
2.11 示例
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>表單_常用控件</title>
</head>
<body><form action="https://search.jd.com/search"><!-- 文本輸入框 -->賬戶：<input type="text" name="account" value="zhangsan" maxlength="10"><br><!-- 密碼輸入框 -->密碼：<input type="password" name="pwd" value="123" maxlength="6"><br><!-- 單選框 -->性別：<input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female" checked>女<br><!-- 多選框 -->愛好：<input type="checkbox" name="hobby" value="smoke" checked>抽煙<input type="checkbox" name="hobby" value="drink">喝酒<input type="checkbox" name="hobby" value="perm" checked>燙頭<br>其他：<textarea name="other" cols="23" rows="3"></textarea><br>籍貫：<select name="place"><option value="冀">河北</option><option value="魯">山東</option><option value="晉" selected>山西</option><option value="粵">廣東</option></select><!-- 隱藏域 --><input type="hidden" name="from" value="toutiao"><br><!-- 確認按鈕_第一種寫法 --><button type="submit">確認</button><!-- 確認按鈕_第二種寫法 --><!-- <input type="submit" value="確認"> --><!-- 重置按鈕_第一種寫法 --><!-- <button type="reset">重置</button> --><!-- 重置按鈕_第二種寫法 --><input type="reset" value="點我重置"><!-- 普通按鈕_第一種寫法 --><input type="button" value="檢測賬戶是否被注冊"><!-- 普通按鈕_第二種寫法 --><!-- <button type="button">檢測賬戶是否被注冊</button> --></form>
</body>
</html>
3. 禁用表單控件
例：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>表單_禁用表單控件</title>
</head>
<body><form action="https://search.jd.com/search"><!-- 文本輸入框 -->賬戶：<input disabled type="text" name="account" value="zhangsan" maxlength="10"><br><!-- 密碼輸入框 -->密碼：<input type="password" name="pwd" value="123" maxlength="6"><br><!-- 單選框 -->性別：<input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female" checked>女<br><!-- 多選框 -->愛好：<input type="checkbox" name="hobby" value="smoke" checked>抽煙<input type="checkbox" name="hobby" value="drink">喝酒<input type="checkbox" name="hobby" value="perm" checked>燙頭<br>其他：<textarea name="other" cols="23" rows="3"></textarea><br>籍貫：<select name="place"><option value="冀">河北</option><option value="魯">山東</option><option value="晉" selected>山西</option><option value="粵">廣東</option></select><!-- 隱藏域 --><input type="hidden" name="from" value="toutiao"><br><!-- 確認按鈕_第一種寫法 --><button type="submit">確認</button><!-- 確認按鈕_第二種寫法 --><!-- <input type="submit" value="確認"> --><!-- 重置按鈕_第一種寫法 --><!-- <button type="reset">重置</button> --><!-- 重置按鈕_第二種寫法 --><input type="reset" value="點我重置"><!-- 普通按鈕_第一種寫法 --><input disabled type="button" value="檢測賬戶是否被注冊"><!-- 普通按鈕_第二種寫法 --><!-- <button type="button">檢測賬戶是否被注冊</button> --></form>
</body>
</html>
4. lable標簽
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>表單_label標簽</title>
</head>
<body><form action="https://search.jd.com/search"><label for="zhanghu">賬戶：</label><input id="zhanghu" type="text" name="account" maxlength="10"><br><label>密碼：<input id="mima" type="password" name="pwd" maxlength="6"></label><br>性別：<input type="radio" name="gender" value="male" id="nan"><label for="nan">男</label> <label><input type="radio" name="gender" value="female" id="nv">女</label><br>愛好：<label><input type="checkbox" name="hobby" value="smoke">抽煙</label><label><input type="checkbox" name="hobby" value="drink">喝酒</label><label><input type="checkbox" name="hobby" value="perm">燙頭</label><br><label for="qita">其他：</label><textarea id="qita" name="other" cols="23" rows="3"></textarea><br>籍貫：<select name="place"><option value="冀">河北</option><option value="魯">山東</option><option value="晉">山西</option><option value="粵">廣東</option></select><input type="hidden" name="from" value="toutiao"><br><input type="submit" value="確認"><input type="reset" value="點我重置"><input type="button" value="檢測賬戶是否被注冊"></form>
</body>
</html>
5. fieldset與legend標簽
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>表單_fieldset與legend</title>
</head>
<body><form action="https://search.jd.com/search"><!-- 主要信息 --><fieldset><legend>主要信息</legend><label for="zhanghu">賬戶：</label><input id="zhanghu" type="text" name="account" maxlength="10"><br><label>密碼：<input id="mima" type="password" name="pwd" maxlength="6"></label><br>性別：<input type="radio" name="gender" value="male" id="nan"><label for="nan">男</label> <label><input type="radio" name="gender" value="female" id="nv">女</label></fieldset><br><fieldset><legend>附加信息</legend>愛好：<label><input type="checkbox" name="hobby" value="smoke">抽煙</label><label><input type="checkbox" name="hobby" value="drink">喝酒</label><label><input type="checkbox" name="hobby" value="perm">燙頭</label><br><label for="qita">其他：</label><textarea id="qita" name="other" cols="23" rows="3"></textarea><br>籍貫：<select name="place"><option value="冀">河北</option><option value="魯">山東</option><option value="晉">山西</option><option value="粵">廣東</option></select></fieldset><input type="hidden" name="from" value="toutiao"><br><input type="submit" value="確認"><input type="reset" value="點我重置"><input type="button" value="檢測賬戶是否被注冊"></form>
</body>
</html>
6. 總結
)
