<form id="hz9zz"></form>
    • <form id="hz9zz"></form>
    

      

      <nobr id="hz9zz"></nobr>
      <form id="hz9zz"></form>
      3.   
          
      明輝手游網中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！
                   
        
                           
        
                        		  
        
                 
              
                
      HTML5中form表單標簽用法詳細說明
                
                  發表時間：2023-09-16             來源：明輝站整理相關軟件相關文章人氣：          
              
      [摘要]本文主要和大家分享HTML5中form表單標簽用法詳解，會以代碼實例來和大家分享form的用法，希望能幫助到大家。語法： <form method = "傳送方式" action = "服務器文件">講解：1.<form>是成對出現的...
      本文主要和大家分享HTML5中form表單標簽用法詳解，會以代碼實例來和大家分享form的用法，希望能幫助到大家。
      語法： <form method = "傳送方式" action = "服務器文件">
      講解：1.<form>是成對出現的， 以<form> 開始， 以 </form>結束,表單都必須放在其之間。
        2.method 傳送方式，  get/post  是后端程序員考慮的問題
        3.action  瀏覽者輸入的數據被傳送到的地方，比如一個php頁面， (save.php)  
      1. <form    method="post"   action="save.php">  
      2.         <label for="username">用戶名:</label>  
      3.         <input type="text" name="username" />  
      4.         <label for="pass">密碼:</label>  
      5.         <input type="password" name="pass" />  
      6. </form>  
      文本輸入框，密碼輸入框
      當用戶需要在表單中鍵入字母，數據等，就要用到文本輸入框，文本輸入框也可以轉化為密碼輸入框
      語法：
      1. <form>  
      2.     <input type = "text/password" name = "名稱" value = "文本" />  
      3. </form>  

      講解：1.type ：
      當 type 為 text時，為文本輸入框
      當 type 為 password 時， 為密碼輸入框
      2.name ：為文本框命名，以備后臺asp php使用
      3.value ：為文本輸入框設置默認值（一般起提示作用）
      1. <!DOCTYPE HTML>  
      2. <html>  
      3. <head>  
      4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
      5.     <title>文本輸入框、密碼輸入框</title>  
      6. </head>  
      7. <body>  
      8. <form  method="post" action="save.php">  
      9.     賬戶:  
      10.     <input type = "text" name = "myName" />  
      11.     <br />  
      12.     密碼：  
      13.     <input type = "password "  name = "pass"/>  
      14. </form>  
      15. </body>  
      16. </html>  
      結果：
      賬戶:  
      密碼:  

      文本域：支持多行文本輸入
      當用戶需要在表單中輸入大段文字時，就要用到文本輸入域
      語法：
      <textarea rows = "行數" cols = "列數" > 文本  </textarea>  

      講解：1.文本輸入域以 <textarea>開始 ，以 </textarea>結束
      2.rows： 輸入文本輸入域的行數
      3.cols ： 輸入文本輸入域的列數
      4.在<textarea></textarea>標簽之間輸入默認值
      1. <!DOCTYPE HTML>  
      2. <html>  
      3. <head>  
      4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
      5.     <title>文本域</title>  
      6. </head>  
      7. <body>  
      8. <form method = "post" action = "save.php">  
      9.     <label>個人簡介</label>  
      10.     <textarea rows = "5" cols = "10">在這里輸入內容...</textarea></span>  
      11.     <input type = "submit" value = "確定" name = "submit" />  
      12.     <input type = "reset" value = "重置" name = "reset" />  
      13. </form>  
      14. </body>  
      15. </html>  
      結果：
      個人簡介   
      <lable>在后面會有詳解。

      使用單選框，復選框讓用戶選擇
      在使用表單設計調查表時，為了減少用戶的操作，使用選擇框是一個好辦法，在HTML中，有單選框和復選框，兩者的主要區別是 單選框中用戶的選項只能選擇一項，而復選框中用戶可以任意選擇多項，甚至全選。
      1. <input type = "radio/checkbox" value = "值" name = "名稱" checked = "checked" />  
      講解：

      1. type : radio :控件單選框
          checkbox : 控件復選框
      2. value: 提供數據到服務器的值
      3. name：為控件命名，以備后臺程序ASP，PHP使用
      4.checked： 當設置 checked = “checked”時，該選項被默認選中。
      1. <!DOCTYPE HTML>  
      2. <html>  
      3. <head>  
      4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
      5.     <title>單選框、復選框</title>  
      6. </head>  
      7. <body>  
      8. <form name = "iForm"  method = "post" action = "save.php">  
      9.     你是否喜歡旅游？<br />  
      10.     <input type = "radio" name = "radioLove" value = "喜歡" checked = "checked"/></span>  
      11.     <input type = "radio" name = "radioLove" value = "不喜歡"/>  
      12.     <input type = "radio" name = "radioLove" value = "無所謂"/>  
      13.     <br /> <br />  
      14.     你對那些運動感興趣？<br />  
      15.     <input type = "checkbox" name = "checkbox1" value = "跑步"/>  
      16.     <input type = "checkbox" name = "checkbox1" value = "打球" checked = "checked"/>  
      17.     <input type = "checkbox" name = "checkbox1" value = "登山" checked = "checked"/>  
      18.     <input type = "checkbox" name = "checkbox1" value = "健身" />  
      19.   
      20. </form>  
      21. </body>  
      22. </html>  

      結果：

      你是否喜歡旅游？
         

      你對那些運動感興趣？
         

      注意：同一組的單選按鈕，name的取值一定要一致，這樣同一組的單選按鈕才可以起到單選的作用。


      下拉列表框
      使用下拉列表框，節省空間，既可以單選，又可以多選。
      單選：
      1. <!DOCTYPE HTML>  
      2. <html>  
      3. <head>  
      4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
      5.     <title>下拉頁表框</title>  
      6. </head>  
      7. <body>  
      8. <form name = "iForm"  method = "post" action = "save.php">  
      9.     <label>愛好:</label>  
      10.     <select>  
      11.         <option value = "讀書">讀書</option></span>  
      12.         <option value = "運動">運動</option>  
      13.         <option value = "音樂">音樂</option>  
      14.         <option value = "旅游">旅游</option>  
      15.         <option value = "購物">購物</option>  
      16.     <span style="color:#ff0000;"></select></span>  
      17.   
      18. </form>  
      19. </body>  
      20. </html>  
      結果：愛好:  讀書運動音樂 旅游購物  (可以下拉）
      <option value =  "提交值" > 選項</option>
      提交值：是向服務器提交的值
      選項：是顯示的值
      設置 selected = "selected" 則該選項默認被選中。
      多選：
      就將上面的<select> 改為 <select multiple = "multiple" >就行，然后在widows下ctrl ,同時單擊，在Mac 下 Command + 單擊 
      使用提交按鈕，提交數據
      在表單中有兩種按鈕可以使用，提交按鈕和重置，當用戶需要提交信息到服務器時，需要用到提交按鈕。
      語法：
      <input type = "submit" value = "提交">
      講解：
      1.只有當type = "sumit"時，按鈕才有提交的作用
      2.value： 按鈕上顯示的字
      重置 
       當用戶需要重置表單信息到初始狀態時，可以使用重置按鈕，只要把type 改為 reset 就行。
      <input type = "reset" value = "重置">
      講解：
      1.同理提交按鈕，只有當type = "reset"時， 按鈕才有重置的作用
      2.value : 按鈕上顯示的文字
      label標簽
      label標簽不會向用戶呈現任何特殊的效果，它的作用是為鼠標用戶改進了可用性，如果你在label標簽內點擊文本，就會觸發此控件，也就是說，當用戶單擊選中該label標簽時，瀏覽器會自動將焦點轉到和 標簽相關的表單控件上(就自動選中和該label標簽相關聯的表單控件上);
      語法：
      <label  for = "控件id 的名稱" >
      注意：標簽中for 屬性的值應該與相關控件的id屬性值一定要相同；
      1. <form>  
      2.   <label for="male">男</label>  
      3.   <input type="radio" name="gender" <span style="color:#ff0000;">id="male"</span> />  
      4.   <br />  
      5.   <label for="female">女</label>  
      6.   <input type="radio" name="gender" <span style="color:#990000;">id="female"</span> />  
      7.   <label for="email">輸入你的郵箱地址</label>  
      8.   <input type="email" <span style="color:#ff6666;">id="email"</span> placeholder="Enter email">  
      9. </form>  

      結果：
      男  
      女  
      輸入你的郵箱地址 
      以下是自己仿寫的，可復選的：
      1. <!DOCTYPE HTML>  
      2. <html>  
      3. <head>  
      4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
      5.     <title>form中的lable標簽</title>  
      6. </head>  
      7.   
      8. <body>  
      9. <form>  
      10.     你對什么運動感興趣：<br/>  
      11.     <label for = "sport1">慢跑</label>  
      12.     <input type = "checkbox" name = "sports" id = "sport1"/>  
      13.     <br />  
      14.     <label for = "sport2">登山</label>  
      15.     <input type = "checkbox" name = "sports" id = "sport2"/>  
      16.     <br />  
      17.     <label for = "sport3">籃球</label>  
      18.     <input type = "checkbox" name = "sports" id = "sport3"/>                     <br />  
      19. </form>  
      20.   
      21. </body>  
      22. </html>  
      結果：
      你對什么運動感興趣：
      慢跑  
      登山  
      籃球 
      相關推薦：
      動態生成form表單實現方法 
      JavaScript實現動態添加Form表單元素的方法示例
      HTML Form表單元素的詳解
      以上就是HTML5中form表單標簽用法詳解的詳細內容，更多請關注php中文網其它相關文章！
      				
				
      網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。




              
              
                 
              
                                            
                              		       
                          
                           		  
        
                            
      
日韩精品一区二区三区高清