亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 29
粉絲 0
評論 0
訪問量 18847
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
HTML 表單基礎
尹輝
原創(chuàng)
742人瀏覽過

HTML 表單基礎

一、表單域

HTML <form> 元素表示文檔中的一個區(qū)域，此區(qū)域包含交互控件，用于收集用戶的信息和數(shù)據(jù)，向 Web 服務器提交信息。
常見的表單域如用戶登錄界面：

表單域由<form>標簽創(chuàng)建，格式如下：

  1. <form name="表單名稱" method="發(fā)送數(shù)據(jù)的方法（get/post）" action="后端處理頁面">
  2.     表單元素（標簽、輸入框、按鈕等）
  3. </form>

其中：

  1. name 屬性：表單名稱，后端處理頁面根據(jù)這個名稱確定是哪個表單提交的數(shù)據(jù)

  2. method 屬性：發(fā)送表單數(shù)據(jù)的方法，常用的有 get、post：

    • get 方法：用于數(shù)據(jù)較少，安全性要求低的情況，傳輸?shù)臄?shù)據(jù)會顯示在瀏覽器的地址欄
    • post 方法：用于數(shù)據(jù)較多，安全性要求高的情況

  3. action 屬性：指定處理表單數(shù)據(jù)的后端頁面（向何處發(fā)送表單數(shù)據(jù)）

二、表單元素

1，<input> 表單輸入元素

HTML<input>元素用于為基于 Web 的表單創(chuàng)建交互式控件，以便接受來自用戶的數(shù)據(jù)。<input>元素是目前是 HTML 中最強大、最復雜的元素之一，因為它有大量的輸入類型和屬性組合。

  • 基本格式
    1. <input type="類型" name="名稱" 其他可選屬性 >
    其中：
    • type 屬性：指定<input>的類型，如文本框、密碼框、單選框、提交按鈕等，默認為 “text”。
    • name 屬性：用于后端處理頁面識別是哪個表單元素提交的數(shù)據(jù)。
    • 其他可選屬性：如 disabled（不可用）、required（必填/選）、readonly（只讀）等
  • 常用類型
    • text：單行文本框
      代碼：
      1. <form>
      2.     <input type="text" name="userName" value="" placeholder="請輸入內(nèi)容">
      3. </form>
      頁面顯示效果：
    • password：密碼框
      代碼：
      1. <form>
      2.     <input type="password" name="userpassword" value="123456">
      3. </form>
      頁面顯示效果：

      注釋：password 字段中的字符會被做掩碼處理（顯示為星號或?qū)嵭膱A）。
    • submit：提交按鈕
      代碼：
      1.   <form>
      2.       <input type="submit" name="submit1" value="提交">
      3.   </form>
      頁面顯示效果：
    • reset：重置按鈕，數(shù)據(jù)不提交，重置所有組件為初始值
      代碼：
      1.   <form>
      2.       <input type="reset" value="重置">
      3.   </form>
      頁面顯示效果：
    • radio：單選框
      代碼：
      1. <form>
      2.     男孩<input type="radio" name="gender" value="boy" checked>
      3.     女孩<input type="radio" name="gender" value="girl">
      4. </form>
      頁面顯示效果：

      注意：同一組單選框的 name 屬性值要相同
    • checkbox：復選框
      代碼：
      1. <form>
      2. 愛好：
      3. <input type="checkbox" name="music" value="1" checked>音樂
      4. <input type="checkbox" name="sport" value="2">體育
      5. <input type="checkbox" name="reading" value="3">閱讀
      6. </form>
      頁面顯示效果：
    • 其他類型參考 mdn web docs：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input

2，<label>標簽

HTML <label>元素（標簽）表示用戶界面中某個元素的說明。通常與<input>輸入元素一起使用，為<input>定義標注。
當點擊標簽文字是，關聯(lián)的<input>元素會被激活獲取焦點，就像直接點擊<input>元素一樣。這擴大了元素的可點擊區(qū)域，讓包括使用觸屏設備在內(nèi)的用戶更容易激活這個元素。
將一個 <label> 和一個 <input> 元素匹配在一起方法有兩種：

  • 給 <input> 一個 id 屬性。而 <label> 需要一個 for 屬性，其值和 <input> 的 id 一樣：
    代碼：
    1. <form>
    2.     <label for="inputText1">用戶名：</label>
    3.     <input type="text" name="userName" id="inputText1" value="" placeholder="請輸入用戶名">
    4. </form>
    頁面顯示效果：
  • 將 <input> 直接放在 <label> 里，此時則不需要 for 和 id 屬性，因為關聯(lián)已隱含存在：
    代碼：
    1. <form>
    2.     <label>
    3.         用戶名：
    4.         <input type="text" name="userName" value="" placeholder="請輸入用戶名">
    5.     </label>
    6. </form>
    頁面顯示效果：

3，<select>下拉列表

HTML <select>元素表示一個提供選項菜單的控件，可創(chuàng)建單選或多選菜單，<select>元素中的<option>標簽用于定義列表中的可用選項。

  • 默認為單選：
    代碼：
    1. <form>
    2.     <label>
    3.         城市：
    4.         <select name="city" id="city">
    5.             <option value="shanghai">上海</option>
    6.             <option value="beijing">北京</option>
    7.             <option value="suzhou" selected>蘇州</option>
    8.         </select>
    9.     </label>
    10. </form>
    頁面顯示效果：
  • 添加 multiple 屬性后為多選（按住ctrl鍵選取多個選項）。
    代碼：
    1. <form>
    2.     <label>
    3.         城市：
    4.         <select name="city" id="city" multiple>
    5.             <option value="shanghai">上海</option>
    6.             <option value="beijing">北京</option>
    7.             <option value="suzhou" selected>蘇州</option>
    8.         </select>
    9.     </label>
    10. </form>
    頁面顯示效果：

4，<button>按鈕

HTML<button>元素表示一個可點擊的按鈕，可以用在表單或文檔其他需要使用簡單標準按鈕的地方。示例：
代碼：

  1.   <form>
  2.       <button type="submit">提交</button>
  3.   </form>

頁面顯示效果：

<button> 元素比 <input> 元素更容易使用樣式?？梢栽?code><button> 元素內(nèi)添加 HTML 內(nèi)容（像 <em>、<strong> 甚至 <img>），而 <input> 只支持文本內(nèi)容。
注意：在<form>表單域中使用<button>時，需要始終指定 type 值（ button / submit ），因為在不同瀏覽器中，<button>的 type 默認值不一樣。

5，<textarea>文本域

HTML<textarea>元素表示一個多行純文本編輯控件，當希望用戶輸入一段相當長的、不限格式的文本，例如評論或反饋表單中的一段意見時，這很有用。
代碼：

  1.   <form>
  2.       <textarea name="textarea" rows="10" cols="50">Write something here</textarea>
  3.   </form>

頁面顯示效果：

可以通過 cols 和 rows 屬性來規(guī)定<textarea>的尺寸，不過更好的辦法是使用 CSS 的 height 和 width 屬性。

6，<fieldset>分組

HTML <fieldset> 元素用于對表單中的控制元素進行分組。用內(nèi)置的<legend>元素作為 <fieldset> 的標題。
代碼：

  1.   <form action="#">
  2.     <fieldset>
  3.       <legend>分組標題</legend>
  4.       <input type="radio" id="radio">
  5.       <label for="radio">單選框</label>
  6.     </fieldset>
  7.   </form>

頁面顯示效果：

三、實例

以下是應用上述知識點做的一個用戶注冊界面實例。
代碼：

  1. <h3>新用戶注冊</h3>
  2. <form name="userRegister" method="post" action="#">
  3.     <fieldset>
  4.         <legend>基本信息</legend>
  5.         <p>
  6.             <label for="userName">用戶名：</label>
  7.             <input id="userName" type="text" required>
  8.         </p>
  9.         <p>
  10.             <label for="userPassword">密碼：</label>
  11.             <input id="userPassword" type="password" placeholder="6~8位字母和數(shù)字" required>
  12.         </p>
  13.     </fieldset>
  14.     <fieldset>
  15.         <legend>詳細信息</legend>
  16.         <p>
  17.             <label for="email">郵箱：</label>
  18.             <input id="email" type="email">
  19.         </p>
  20.         <p>
  21.             性別：
  22.             <label for="male">男：</label>
  23.             <input name="sex" id="male" value="male" type="radio" checked>
  24.             <label for="female">女：</label>
  25.             <input name="sex" id="female" value="female" type="radio">
  26.         </p>
  27.         <p>
  28.             <label for="education">學歷：</label>
  29.             <select name="edu" id="education">
  30.                 <option value="1">初中</option>
  31.                 <option value="2">高中</option>
  32.                 <option value="3" selected>本科</option>
  33.                 <option value="4">碩士</option>
  34.                 <option value="5">博士</option>
  35.             </select>
  36.         </p>
  37.         <p>
  38.             愛好：
  39.             <input type="checkbox" name="program" value="1" checked>編程
  40.             <input type="checkbox" name="sport" value="2">體育
  41.             <input type="checkbox" name="reading" value="3">閱讀
  42.             <input type="checkbox" name="trip" value="4" checked>旅游
  43.             <input type="checkbox" name="other" value="5">其他
  44.         </p>
  45.         自我介紹：
  46.         <p>
  47.             <textarea name="textarea" rows="10" cols="50">
  48.             </textarea>
  49.         </p>
  50.     </fieldset>
  51.     <button type="submit">提交</button>
  52.     <button type="reset">重置</button>
  53. </form>

頁面顯示效果：

批改老師：PHPzPHPz

批改狀態(tài)：合格

老師批語：
本博文版權歸博主所有，轉(zhuǎn)載請注明地址！如有侵權、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務協(xié)議
0條評論
作者最新博文
關于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓，幫助PHP學習者快速成長！
關注服務號 技術交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學習！
    全站2000+教程免費學