bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

HTML5中form表單標簽使用方法-創新互聯

HTML5中form表單標簽使用方法？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！

我們提供的服務有：成都網站設計、成都網站制作、微信公眾號開發、網站優化、網站認證、合作ssl等。為1000多家企事業單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的合作網站制作公司

語法： <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 = "健身" />

  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>

  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>

  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>

  21. </body>

  22. </html>

結果：

你對什么運動感興趣：
慢跑
登山
籃球

感謝各位的閱讀！看完上述內容，你們對HTML5中form表單標簽使用方法大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注創新互聯網站制作公司行業資訊頻道。

當前題目：HTML5中form表單標簽使用方法-創新互聯
轉載注明：http://vcdvsql.cn/article0/didioo.html

成都網站建設公司_創新互聯，為您提供網站設計、手機網站建設、靜態網站、網站維護、營銷型網站建設、品牌網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

成都網頁設計公司