生活随笔
收集整理的這篇文章主要介紹了
表单项介绍
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <!--
9 表單的作用就是用來將用戶信息提交給服務(wù)器的
10 比如：百度的搜索框 注冊(cè) 登錄這些操作都需要填寫表單
11 -->
12
13
14 <!--
15 使用form標(biāo)簽創(chuàng)建一個(gè)表單
16 form標(biāo)簽中必須指定一個(gè)action屬性，該屬性指向的是一個(gè)服務(wù)器的地址
17 當(dāng)我們提交表單時(shí)將會(huì)提交到action屬性對(duì)應(yīng)的地址
18 -->
19 <form action="target.html">
20 <!--
21 使用form創(chuàng)建的僅僅是一個(gè)空白的表單，
22 我們還需要向form中添加不同的表單項(xiàng)
23 -->
24
25 <!--
26 在表單中可以使用fieldset來為表單項(xiàng)進(jìn)行分組，
27 可以將表單項(xiàng)中的同一組放到一個(gè)fieldset中
28 -->
29 <fieldset>
30
31 <!-- 在fieldset可以使用legend子標(biāo)簽，來指定組名 -->
32 <legend>用戶信息
</legend>
33
34
35 <!--
36 使用input來創(chuàng)建一個(gè)文本框，它的type屬性是text
37 如果希望表單項(xiàng)中的數(shù)據(jù)會(huì)提交到服務(wù)器中，還必須給表單項(xiàng)指定一個(gè)name屬性
38 name表示提交內(nèi)容的名字
39
40 用戶填寫的信息會(huì)附在url地址的后邊以查詢字符串的形式發(fā)送給服務(wù)器
41 url地址?查詢字符串
42 格式：
43 屬性名=屬性值&屬性名=屬性值&屬性名=屬性值&屬性名=屬性值
44 在文本框中也可以指定value屬性值，該值將會(huì)作為文本框的默認(rèn)值顯示
45 -->
46 <!--
47 在html中還為我們提供了一個(gè)標(biāo)簽，專門用來選中表單中的提示文字的
48 label標(biāo)簽
49 該標(biāo)簽可以指定一個(gè)for屬性，該屬性的值需要指定一個(gè)表單項(xiàng)的id值
50 -->
51 <label for="um">用戶名
</label>
52 <input id="um" type="text" name="username" /> <br /><br />
53
54 <!--
55 密碼框
56 - 使用input創(chuàng)建一個(gè)密碼框，它的type屬性值是password
57 -->
58 <label for="pwd">密碼
</label>
59 <input id="pwd" type="password" name="password" /> <br /><br />
60 </fieldset>
61
62 <fieldset >
63
64 <legend>用戶愛好
</legend>
65
66 <!--
67 單選按鈕
68 - 使用input來創(chuàng)建一個(gè)單選按鈕，它的type屬性使用radio
69 - 單選按鈕通過name屬性進(jìn)行分組，name屬性相同是一組按鈕
70 - 像這種需要用戶選擇但是不需要用戶直接填寫內(nèi)容的表單項(xiàng)，
71 還必須指定一個(gè)value屬性，這樣被選中的表單項(xiàng)的value屬性值將會(huì)最終提交給服務(wù)器
72
73 如果希望在單選按鈕或者是多選框中指定默認(rèn)選中的選項(xiàng)，
74 則可以在希望選中的項(xiàng)中添加checked="checked"屬性
75 -->
76 性別
<input type="radio" name="gender" value="male" id="male" /><label for="male">男
</label>
77 <input type="radio" name="gender" value="female" checked="checked" id="female" /><label for="female">女
</label>
78 <br /><br />
79
80 <!--
81 多選框
82 - 使用input創(chuàng)建一個(gè)多選框，它的type屬性使用checkbox
83 -->
84 愛好
<input type="checkbox" name="hobby" value="zq" />足球
85 <input type="checkbox" name="hobby" value="lq" />籃球
86 <input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球
87 <input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球
88 <br /><br />
89
90 </fieldset>
91
92 <!--
93 下拉列表
94 - 使用select來創(chuàng)建一個(gè)下拉列表
95 下拉列表的name屬性需要指定給select，而value屬性需要指定給option
96 可以通過在option中添加selected="selected"來將選項(xiàng)設(shè)置為默認(rèn)選中
97
98 當(dāng)為select添加一個(gè)multiple="multiple"，則下拉列表變?yōu)橐粋€(gè)多選的下拉列表
99 -->
100 你喜歡的明星
101 <select name="star">
102
103 <!--
104 在select中可以使用optgroup對(duì)選項(xiàng)進(jìn)行分組
105 同一個(gè)optgroup中的選項(xiàng)是一組
106 可以通過label屬性來指定分組的名字
107 -->
108 <optgroup label="女明星">
109 <!-- 在下拉列表中使用option標(biāo)簽來創(chuàng)建一個(gè)一個(gè)列表項(xiàng) -->
110 <option value="fbb">范冰冰
</option>
111 <option value="lxr">林心如
</option>
112 <option value="zw">趙薇
</option>
113 </optgroup>
114
115 <optgroup label="男明星">
116 <option value="zbs" selected="selected">趙本山
</option>
117 <option value="ldh">劉德華
</option>
118 <option value="pcj">潘長(zhǎng)江
</option>
119 </optgroup>
120
121 </select>
122
123 <br /><br />
124
125 <!--
126 使用textarea創(chuàng)建一個(gè)文本域
127 -->
128 自我介紹
<textarea name="info"></textarea>
129
130 <br /><br />
131
132 <!--
133 提交按鈕可以將表單中的信息提交給服務(wù)器
134 使用input創(chuàng)建一個(gè)提交按鈕,它的type屬性值是submit
135 在提交按鈕中可以通過value屬性來指定按鈕上的文字
136 -->
137 <input type="submit" value="注冊(cè)" />
138
139 <!--
140 <input type="reset" />可以創(chuàng)建一個(gè)重置按鈕，
141 點(diǎn)擊重置按鈕以后表單中內(nèi)容將會(huì)恢復(fù)為默認(rèn)值
142 -->
143 <input type="reset" />
144
145 <!--
146 使用input type=button可以用來創(chuàng)建一個(gè)單純的按鈕，
147 這個(gè)按鈕沒有任何功能，只能被點(diǎn)擊
148 -->
149 <input type="button" value="按鈕" />
150
151 <!--
152 除了使用input，也可以使用button標(biāo)簽來創(chuàng)建按鈕
153 這種方式和使用input類似，只不過由于它是成對(duì)出現(xiàn)的標(biāo)簽
154 使用起來更加的靈活
155 -->
156 <br /><br />
157 <button type="submit">提交
</button>
158 <button type="reset">重置
</button>
159 <button type="button">按鈕
</button>
160
161 </form>
162 </body>
163 </html> ?
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><!--?表單的作用就是用來將用戶信息提交給服務(wù)器的比如：百度的搜索框 注冊(cè) 登錄這些操作都需要填寫表單--><!--使用form標(biāo)簽創(chuàng)建一個(gè)表單form標(biāo)簽中必須指定一個(gè)action屬性，該屬性指向的是一個(gè)服務(wù)器的地址當(dāng)我們提交表單時(shí)將會(huì)提交到action屬性對(duì)應(yīng)的地址--><form action="target.html"><!--?使用form創(chuàng)建的僅僅是一個(gè)空白的表單，我們還需要向form中添加不同的表單項(xiàng)--><!--?在表單中可以使用fieldset來為表單項(xiàng)進(jìn)行分組，可以將表單項(xiàng)中的同一組放到一個(gè)fieldset中--><fieldset><!-- 在fieldset可以使用legend子標(biāo)簽，來指定組名 --><legend>用戶信息</legend><!--?使用input來創(chuàng)建一個(gè)文本框，它的type屬性是text如果希望表單項(xiàng)中的數(shù)據(jù)會(huì)提交到服務(wù)器中，還必須給表單項(xiàng)指定一個(gè)name屬性name表示提交內(nèi)容的名字用戶填寫的信息會(huì)附在url地址的后邊以查詢字符串的形式發(fā)送給服務(wù)器url地址?查詢字符串格式：屬性名=屬性值&屬性名=屬性值&屬性名=屬性值&屬性名=屬性值在文本框中也可以指定value屬性值，該值將會(huì)作為文本框的默認(rèn)值顯示--><!--?在html中還為我們提供了一個(gè)標(biāo)簽，專門用來選中表單中的提示文字的label標(biāo)簽該標(biāo)簽可以指定一個(gè)for屬性，該屬性的值需要指定一個(gè)表單項(xiàng)的id值--><label for="um">用戶名</label><input id="um" type="text" name="username" ?/> <br /><br /><!--密碼框- 使用input創(chuàng)建一個(gè)密碼框，它的type屬性值是password--><label for="pwd">密碼 </label><input id="pwd" type="password" name="password" /> <br /><br /></fieldset><fieldset ><legend>用戶愛好</legend><!--單選按鈕- 使用input來創(chuàng)建一個(gè)單選按鈕，它的type屬性使用radio- 單選按鈕通過name屬性進(jìn)行分組，name屬性相同是一組按鈕- 像這種需要用戶選擇但是不需要用戶直接填寫內(nèi)容的表單項(xiàng)，還必須指定一個(gè)value屬性，這樣被選中的表單項(xiàng)的value屬性值將會(huì)最終提交給服務(wù)器如果希望在單選按鈕或者是多選框中指定默認(rèn)選中的選項(xiàng)，則可以在希望選中的項(xiàng)中添加checked="checked"屬性-->性別 ?<input type="radio" name="gender" value="male" id="male" /><label for="male">男</label><input type="radio" name="gender" value="female" checked="checked" id="female" /><label for="female">女</label>?<br /><br /><!--?多選框- 使用input創(chuàng)建一個(gè)多選框，它的type屬性使用checkbox-->愛好<input type="checkbox" name="hobby" value="zq" />足球<input type="checkbox" name="hobby" value="lq" />籃球<input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球<input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球<br /><br /></fieldset><!--?下拉列表- 使用select來創(chuàng)建一個(gè)下拉列表下拉列表的name屬性需要指定給select，而value屬性需要指定給option可以通過在option中添加selected="selected"來將選項(xiàng)設(shè)置為默認(rèn)選中當(dāng)為select添加一個(gè)multiple="multiple"，則下拉列表變?yōu)橐粋€(gè)多選的下拉列表-->你喜歡的明星?<select name="star"><!--?在select中可以使用optgroup對(duì)選項(xiàng)進(jìn)行分組同一個(gè)optgroup中的選項(xiàng)是一組可以通過label屬性來指定分組的名字--><optgroup label="女明星"><!-- 在下拉列表中使用option標(biāo)簽來創(chuàng)建一個(gè)一個(gè)列表項(xiàng) --><option value="fbb">范冰冰</option><option value="lxr">林心如</option><option value="zw">趙薇</option></optgroup><optgroup label="男明星"><option value="zbs" selected="selected">趙本山</option><option value="ldh">劉德華</option><option value="pcj">潘長(zhǎng)江</option></optgroup></select><br /><br /><!--使用textarea創(chuàng)建一個(gè)文本域-->自我介紹 ?<textarea name="info"></textarea><br /><br /><!--?提交按鈕可以將表單中的信息提交給服務(wù)器使用input創(chuàng)建一個(gè)提交按鈕,它的type屬性值是submit在提交按鈕中可以通過value屬性來指定按鈕上的文字--><input type="submit" value="注冊(cè)" /><!--<input type="reset" />可以創(chuàng)建一個(gè)重置按鈕，點(diǎn)擊重置按鈕以后表單中內(nèi)容將會(huì)恢復(fù)為默認(rèn)值--><input type="reset" /><!--?使用input type=button可以用來創(chuàng)建一個(gè)單純的按鈕，這個(gè)按鈕沒有任何功能，只能被點(diǎn)擊--><input type="button" value="按鈕" /><!--除了使用input，也可以使用button標(biāo)簽來創(chuàng)建按鈕這種方式和使用input類似，只不過由于它是成對(duì)出現(xiàn)的標(biāo)簽使用起來更加的靈活--><br /><br /><button type="submit">提交</button><button type="reset">重置</button><button type="button">按鈕</button></form></body></html>
?
轉(zhuǎn)載于:https://www.cnblogs.com/fuck1/p/7470809.html
總結(jié)
以上是生活随笔為你收集整理的表单项介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
