表單項介紹

時間 2019-12-08

標籤表單介紹欄目 HTML 简体版

原文原文鏈接

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6     </head>
  7     <body>
  8         <!-- 
  9             表單的做用就是用來將用戶信息提交給服務器的
 10                 好比：百度的搜索框 註冊 登陸這些操做都須要填寫表單
 11         -->
 12         
 13         
 14         <!--
 15             使用form標籤建立一個表單
 16                 form標籤中必須指定一個action屬性，該屬性指向的是一個服務器的地址
 17                 當咱們提交表單時將會提交到action屬性對應的地址    
 18         -->
 19         <form action="target.html">
 20             <!-- 
 21                 使用form建立的僅僅是一個空白的表單，
 22                     咱們還須要向form中添加不一樣的表單項
 23             -->
 24             
 25             <!-- 
 26                 在表單中能夠使用fieldset來爲表單項進行分組，
 27                 能夠將表單項中的同一組放到一個fieldset中
 28             -->
 29             <fieldset>
 30                 
 31                 <!-- 在fieldset能夠使用legend子標籤，來指定組名 -->
 32                 <legend>用戶信息</legend>
 33                 
 34                 
 35                 <!-- 
 36                     使用input來建立一個文本框，它的type屬性是text
 37                         若是但願表單項中的數據會提交到服務器中，還必須給表單項指定一個name屬性
 38                         name表示提交內容的名字    
 39                         
 40                     用戶填寫的信息會附在url地址的後邊以查詢字符串的形式發送給服務器
 41                         url地址?查詢字符串
 42                     格式：
 43                         屬性名=屬性值&屬性名=屬性值&屬性名=屬性值&屬性名=屬性值
 44                     在文本框中也能夠指定value屬性值，該值將會做爲文本框的默認值顯示    
 45                 -->
 46                 <!-- 
 47                     在html中還爲咱們提供了一個標籤，專門用來選中表單中的提示文字的
 48                     label標籤
 49                     該標籤能夠指定一個for屬性，該屬性的值須要指定一個表單項的id值
 50                 -->
 51                 <label for="um">用戶名</label>
 52                 <input id="um" type="text" name="username"  /> <br /><br />
 53                 
 54                 <!--
 55                     密碼框
 56                         - 使用input建立一個密碼框，它的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來建立一個單選按鈕，它的type屬性使用radio
 69                     - 單選按鈕經過name屬性進行分組，name屬性相同是一組按鈕
 70                     - 像這種須要用戶選擇可是不須要用戶直接填寫內容的表單項，
 71                         還必須指定一個value屬性，這樣被選中的表單項的value屬性值將會最終提交給服務器
 72                         
 73                     若是但願在單選按鈕或者是多選框中指定默認選中的選項，
 74                         則能夠在但願選中的項中添加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建立一個多選框，它的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來建立一個下拉列表
 95                     下拉列表的name屬性須要指定給select，而value屬性須要指定給option
 96                     能夠經過在option中添加selected="selected"來將選項設置爲默認選中
 97                     
 98                     當爲select添加一個multiple="multiple"，則下拉列表變爲一個多選的下拉列表
 99             -->
100             你喜歡的明星 
101                 <select name="star">
102                     
103                     <!-- 
104                         在select中能夠使用optgroup對選項進行分組
105                             同一個optgroup中的選項是一組
106                         能夠經過label屬性來指定分組的名字    
107                     -->
108                     <optgroup label="女明星">
109                         <!-- 在下拉列表中使用option標籤來建立一個一個列表項 -->
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">潘長江</option>
119                     </optgroup>
120                     
121                 </select>
122             
123             <br /><br />
124             
125             <!--
126                 使用textarea建立一個文本域
127             -->
128             自我介紹  <textarea name="info"></textarea>
129             
130             <br /><br />
131             
132             <!-- 
133                 提交按鈕能夠將表單中的信息提交給服務器
134                 使用input建立一個提交按鈕,它的type屬性值是submit
135                 在提交按鈕中能夠經過value屬性來指定按鈕上的文字
136             -->
137             <input type="submit" value="註冊" />
138             
139             <!--
140                 <input type="reset" />能夠建立一個重置按鈕，
141                     點擊重置按鈕之後表單中內容將會恢復爲默認值
142             -->
143             <input type="reset" />
144             
145             <!-- 
146                 使用input type=button能夠用來建立一個單純的按鈕，
147                     這個按鈕沒有任何功能，只能被點擊
148             -->
149             <input type="button" value="按鈕" />
150             
151             <!--
152                 除了使用input，也能夠使用button標籤來建立按鈕
153                 這種方式和使用input相似，只不過因爲它是成對出現的標籤
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><form action="target.html"><fieldset><legend>用戶信息</legend><label for="um">用戶名</label><input id="um" type="text" name="username" /> <br /><br /><label for="pwd">密碼 </label><input id="pwd" type="password" name="password" /> <br /><br /></fieldset><fieldset ><legend>用戶愛好</legend>性別 <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 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 name="star"><optgroup label="女明星"><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">潘長江</option></optgroup></select><br /><br />自我介紹 <textarea name="info"></textarea><br /><br /><input type="submit" value="註冊" /><input type="reset" /><input type="button" value="按鈕" /><br /><br /><button type="submit">提交</button><button type="reset">重置</button><button type="button">按鈕</button></form></body></html>html

1. Django表單介紹
2. 跳錶的簡單介紹
3. 跳錶簡單介紹
4. HTML列表簡單介紹
5. Fixcel電子表單——介紹
6. 項目的簡單介紹
7. form表單結構的簡單介紹
8. 鏈表介紹
9. jquery validate表單驗證介紹
10. HTML table、form表單標籤的介紹
更多相關文章...
• jQuery Mobile 表單 - jQuery Mobile 教程
• Thymeleaf表單 - Thymeleaf 教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用
• TiDB 在摩拜單車在線數據業務的應用和實踐

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。