整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML 表單標簽

          單屬性匯總:

          1 name屬性

          服務器會識別不同的name屬性,并根據name屬性來捕獲不同元素內的數據。

          2 value屬性

          value 屬性為 input 元素設定值。

          對于不同的輸入類型,value 屬性的用法也不同:

          type="button", "reset", "submit" - 定義按鈕上的顯示的文本

          type="text", "password", "hidden" - 定義輸入字段的初始值

          type="checkbox", "radio", "image" - 定義與輸入相關聯的值

          注釋:<input type="checkbox"> 和 <input type="radio"> 中必須設置 value 屬性。

          注釋:value 屬性無法與 <input type="file"> 一同使用。

          注意:單選框和復選框傳遞數據到數據庫時一定要設置value, 否則插入數據失敗;

          3 type屬性

          它決定了<input>標簽在頁面中的表現樣式和功能

          text 文本框

          password 密碼框

          radio 單選框

          checkbox 復選框

          file 文件域

          hidden 隱藏域

          image 圖像域

          submit 提交按鈕

          reset 重置按鈕

          button 普通按鈕

          4 size屬性

          列表框中size屬性用來設置列表框顯示的行數;

          文本框和密碼框會使用size屬性設置域的顯示寬度;

          5 disabled屬性

          定義disabled屬性可以禁止使用該元素;

          無法將數據提交到服務器處理;

          6 readonly屬性

          常用在輸入性表單對象中(如文本框、密碼框、文本區域),用來禁止輸入任何信息;

          可以將數據提交到服務器處理;

          7 checked屬性

          它與disabled屬性一樣沒有屬性值,常用在選擇性表單對象中,定義對象處于被選中狀態(如單選按鈕和復選框)

          但在列表框或者下拉式菜單中,為了表示被選中的項目,可使用selected屬性;

          7 placeholder屬性

          規定幫助用戶填寫輸入字段的提示。

          表單對象:

          1 文本框

          <input type="text" name="textfield" id="textfield" value="單行文本框" size="20" maxlength="20">

          必需的屬性:name type

          2 密碼域

          <input type="password" name="passwordfield" id="passwordfield">

          必需的屬性:name type

          3 文本域

          <textarea name="textarea" cols="20" rows="5" wrap="physical"></textarea>

          必需的屬性:name cols rows

          wrap屬性 默認值:輸入的文本會自動換行。當數據提交到服務器被處理時, 換行符不會隨輸入的文本一同被提交到服務器;

          off(也可寫成wrap):不自動換行, 當輸入的內容超出文本區域右邊界時, 文本將向左滾動, 并顯示滾動條。

          如果希望換行,必須手動輸入回車鍵才能將插入點移到下一行;

          virtual:文本能夠自動換行, 當數據提交到服務器被處理時, 換行符不會隨輸入文本一同提交到服務器;(默認值)

          physical:文本能夠自動換行, 當數據提交到服務器被處理時, 換行符將會隨輸入的文本一同被提交到服務器進行處理;

          關于如何限制文本域輸入字符串的長度 見javascript|語法|設置文本框

          HTML5中wrap中屬性值修改為hard|soft

          soft 當在表單中提交時, textarea 中的文本不換行, 默認值。

          hard 當在表單中提交時, textarea 中的文本換行(包含換行符)。

          當使用 "hard" 時, 必須規定 cols 屬性

          4 單選按鈕

          單選按鈕傳遞的信息簡單,如1或0、True或False。

          <input type="radio" name="radio" value="1"/>選項1
          <input type="radio" name="radio" value="2"/>選項2
          <input type="radio" name="radio" value="3"/>選項3

          多個單選按鈕通過定義相同的name屬性, 以實現捆綁在一起;

          必需的屬性:type name value

          5 復選框

          <input type="checkbox" name="checkbox[]" value="1"/>選項2
          <input type="checkbox" name="checkbox[]" value="2"/>選項2
          <input type="checkbox" name="checkbox[]" value="3"/>選項2

          通過設置相同的name屬性可以把多個復選框捆綁在一起;

          必需的屬性:type name value

          6 列表框/下拉菜單

          <select name="select" size=1>
          <option value="1">1</option>
          <option value="2" selected="selected">2</option>
          <option value="3">3</option>
          </select>

          如果select元素中不設置size屬性,則該元素會顯示為下拉菜單樣式

          <select name="select" size="1" multiple="multiple">
          <option value="1">1</option>
          <option value="2" selected="selected">2</option>
          <option value="3">3</option>
          </select>

          如果希望以列表框形式顯示,則可以使用size屬性指定列表框的高度(顯示幾個選項);

          還可以通過mutiple屬性定義列表框是否為多選(默認是單選);

          通過<optgroup>標簽把相關的選項組合在一起:

          <select>
          <optgroup label="PHP版塊">
          <option value ="resource">資源共享</option>
          <option value ="study">學習交流</option>
          <option value ="salary">薪酬待遇</option>
          </optgroup>
          <optgroup label="IOS版塊">
          <option value ="resource">資源共享</option>
          <option value ="study">學習交流</option>
          <option value ="salary">薪酬待遇</option>
          </optgroup>
          </select>

          注意:其中PHP版塊和IOS版塊不能被選中

          所有主流瀏覽器都支持 <optgroup> 標簽。

          7 文件域

          <input type="file" name="file"/>
          <input type="file" name="file" multiple/>

          8 按鈕

          提交按鈕

          <input type="submit" name="" value="提交"/>

          name值必須給出

          重置按鈕

          <input type="reset" name="" value="重置"/>

          普通按鈕

          <input type="button" name="" value="普通按鈕"/>

          它一般是配合javascript來使用;

          關于控制表單提交按鈕見: javascript|語法|控制表單提交

          9 圖像域

          <input type="image" name="image" value="提交" src="images/vote_d.gif" alt="提交" align="middle"/>

          10 隱藏域

          限制上傳文件大小

          <input type="hidden" name="MAX_FILE_SIZE" value="1000000" />

          傳遞ID值

          <input type="hidden" name="id" value="<?php echo $result['id'];?>" />

          11 button標簽

          在 button 元素內部,您可以放置內容,比如文本或圖像。這是該元素與使用 input 元素創建的按鈕之間的不同之處。

          <button type="button" name="button" value="按鈕"><img src="hw001.jpeg"/></button>

          普通按鈕<button type="button">普通按鈕</button> 它一般是配合javascript來使用, 默認值

          提交按鈕<button type="submit">提交按鈕</button>

          重置按鈕<button type="reset">重置按鈕</button>

          提交表單

          enctype屬性

          該屬性包含兩種方式:

          application/x-www-form-urlencoded 是默認編碼類型

          multipart/form-data

          multipart/form-data編碼方式可以用來傳輸二進制數據或者非ASCII字符的文本(如圖片、不同格式的文件等),上傳文件必須使用此屬性

          multipart: 多部件的

          multiple: 多重的

          text/plain

          text/plain將表單屬性發送到電子郵箱時,enctype的值必須設為"text/plain",否則將會出現亂碼。

          發送電子郵件的表單程序

          <form name="form1" method="post" action="mailto:marker@broadview.com.cn" enctype="text/plain">
          </form>

          action 表單提交的腳本

          如果傳遞到本頁面,則直接輸入控制 action=""

          表單提交方式method:post/get

          <form action="test.php?id=5" method="post" >
          name: <input type="text" name="name" value="100">
          </form>

          id=5是get傳, name="100" 是post傳! //高洛峰解釋

          action="" 表示傳遞到當前腳本文件

          target 指定提交到哪一個窗口

          _blank 打開新窗口

          _self 當前的窗口,默認值

          _parent 上一層窗口

          _top 最上層窗口

          框架名稱 指定指定窗口或框架名稱

          label標簽

          作用: 擴大觸控區域, 為了提升用戶體驗, 點擊文字也能選中表單

          <form action=" method="get" accept-charset="utf-8">
          <label>電子郵箱: <input type="text" name="email" value="" placeholder="請輸入電子郵箱"/></label><br/>
          <label>密碼: <input type="password" name="password"/></label><br/>
          <label for="address">地址</label>
          <input type="text" name="address" id="address" placeholder="請輸入地址" />
          </form>

          for與id一致

          <input type="radio" id="sec" name="sex"> <label for="sex">男</label>

          簡化寫法:

          <label><input type="checkbox"/>周杰倫-晴天</label>

          注意: "for" 屬性可把 label 綁定到另外一個元素。請把"for"屬性的值設置為相關元素的 id 屬性的值。

          PHP實例:創建發送郵件信息的html表單

          代碼:

          <html>
          <head>
          <title>簡單郵件發送表單</title>
          </head>
          <body>
          <h1>Mail Form</h1>
          <form name="form1" method="post" action="simpleEmail.php">
          <table>
          <tr><td><b>To</b></td><td><input type="text" name="mailto" size="35"></td></tr>
          <tr><td><b>郵件主題:</b></td>
          <td><input type="text" name="mailsubject" size="35"></td></tr>
          <tr><td><b>郵件內容</b></td>
          <td><textarea name="mailbody" cols="50" rows="7"></textarea></td>
          </tr>
          <tr><td colspan="2">
          <input type="submit" name="Submit" value="發送">
          </td>
          </tr>
          </table>
          </form>
          </body>
          </html>


          simpleEmail.php

          、鏈接標簽

          鏈接標簽是HTML頁面中最為常見,而且用途最廣的一個標簽,只要我們瀏覽網頁,就會有超鏈接。比如,通過點擊新聞標題鏈接到新聞詳情頁面,通過點擊商品名稱鏈接到商品列表或者詳情頁等等。

          • 縮寫

          anchor , 錨

          • 說明

          在HTML中創建超鏈接,只需用a標簽包括被鏈接的對象

          • 語法

          <a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>

          href:用于指定鏈接目標的url地址,必須屬性

          target:用于指定鏈接頁面的打開方式,其取值有 self和 _blank兩種,其中 _self為默認值,_blank為在新窗口中打開方式

          • 注意

          (1)當需要鏈接到 外部鏈接時,需要添加 http://

          (2)當需要內部鏈接時,直接鏈接內部頁面名稱即可 如 < a href=“index.html”> 首頁

          (3)如果暫時沒確定鏈接目標時,一般將href屬性值定義為“#”,表示暫時為一個空鏈接

          (4)不僅可以創建文本超鏈接,在網頁中各種網頁元素,如圖像、表格、音頻、視頻等都可以添加超鏈 接, 只要用a標簽包括即可

          錨點定位

          在當前html頁面上,通過創建錨點鏈接,用戶能夠快速定位到指定內容。

          適用于內容較多的頁面,通過點擊關鍵詞,可以快速到達指定區域。

          • 步驟

          (1)使用唯一的id標注目標位置

          (2)使用<a href="#id名“>鏈接文本創建鏈接

          二、特殊字符標簽(了解)

          在html頁面中,有些符號直接添加是無法正常顯示的,這個時候就用一些特殊的標簽來表示這類符號,而這類特殊的標簽,我們就叫做特殊字符標簽。

          • 常用的特殊字符標簽

          d屬性 - 賦予網頁元素個性化標識的關鍵所在

          在HTML中,Id屬性是一個非常重要的元素,它可以為網頁上的每個元素提供一個獨特的標識符。通過Id屬性,您可以精準地定位和操作特定的HTML元素,從而實現更細致的樣式控制和交互功能。本文將為您揭示Id屬性的魔力,教您如何利用它來打造出與眾不同的網頁體驗。

          1. Id屬性的基本用法

          Id屬性的值必須在整個HTML文檔中是唯一的,這使它成為定位和操作特定元素的理想選擇。通常情況下,我們會為頁面中的重要元素如頁頭、導航欄、主內容區域等分別設置Id。

          <header id="header">
            <nav id="nav">
              <ul>
                <li><a href="#">首頁</a></li>
                <li><a href="#">產品</a></li>
                <li><a href="#">關于我們</a></li>
              </ul>
            </nav>
          </header>
          
          <main id="main">
            <section id="hero">
              <h1>歡迎來到我的網站</h1>
              <p>這里是網站的主要內容區域</p>
            </section>
          </main>
          

          2. Id屬性與CSS的結合

          有了Id屬性,您可以在CSS中直接針對特定元素進行樣式定制。這種精準的選擇器使您能夠更好地控制網頁的視覺效果。

          #header {
            background-color: #333;
            color: #fff;
            padding: 20px;
          }
          
          #nav ul {
            list-style-type: none;
            display: flex;
          }
          
          #nav li a {
            color: #fff;
            text-decoration: none;
            padding: 10px 20px;
          }
          
          #hero {
            background-color: #f2f2f2;
            padding: 50px;
            text-align: center;
          }
          

          3. Id屬性與JavaScript的結合

          除了CSS,Id屬性在JavaScript中也扮演著重要的角色。通過Id,您可以快速地獲取和操作特定的HTML元素,實現各種交互效果。

          <button id="myButton">點擊我</button>
          
          const button = document.getElementById('myButton');
          
          button.addEventListener('click', () => {
            alert('您點擊了按鈕!');
          });
          

          4. Id屬性的最佳實踐

          在使用Id屬性時,有幾個需要注意的最佳實踐:

          1. Id值應該具有描述性,方便理解和維護
          2. 盡量避免在CSS中過度使用Id選擇器,保持CSS規則的靈活性
          3. 結合Class屬性使用,提高代碼的可讀性和可維護性
          4. 在JavaScript中謹慎使用Id,以免造成過度耦合

          總之,HTML Id屬性是一個非常強大的工具,它可以為網頁元素提供獨特的標識,從而幫助您實現精細化的樣式控制和交互功能。只要掌握好它的用法,相信您一定能打造出令人驚嘆的網頁作品。


          主站蜘蛛池模板: 国产婷婷色一区二区三区| 国产精品盗摄一区二区在线| 国产女人乱人伦精品一区二区| 国产成人片视频一区二区| 精品无人区一区二区三区在线| 狠狠爱无码一区二区三区| 国产福利无码一区在线| 少妇特黄A一区二区三区| 日韩人妻无码一区二区三区综合部| 国产微拍精品一区二区| 波多野结衣一区视频在线| 亚洲综合一区二区国产精品| 亚洲AV无码一区东京热| 亚洲成AV人片一区二区| 中文字幕精品一区| 国产亚洲日韩一区二区三区| 成人免费av一区二区三区| 亚州国产AV一区二区三区伊在| 国产亚洲福利精品一区二区| 在线免费观看一区二区三区| 国模大胆一区二区三区| 伊人色综合视频一区二区三区| 国产美女在线一区二区三区| 亚洲国产情侣一区二区三区 | 一区二区三区日本电影| 国产一区二区三区视频在线观看| 福利国产微拍广场一区视频在线 | 一区二区三区福利| 精品一区二区无码AV| 国产一区二区福利| tom影院亚洲国产一区二区 | 久久久久女教师免费一区| 波多野结衣的AV一区二区三区 | 日韩一区二区在线观看视频| 无码人妻久久一区二区三区| 日本视频一区在线观看免费| 精品国产一区二区三区久久影院 | 无码人妻一区二区三区免费视频 | 日韩一区二区三区四区不卡| 怡红院美国分院一区二区| 一区二区三区观看|