整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          HTML表單標(biāo)簽詳解:如何用HTML標(biāo)簽打造互動(dòng)網(wǎng)頁(yè)?

          這里是云端源想IT,幫你輕松學(xué)IT”

          嗨~ 今天的你過得還好嗎?

          世界微塵里

          吾寧愛與憎


          - 2024.03.18 -

          在互聯(lián)網(wǎng)的世界中,表單是用戶與網(wǎng)站進(jìn)行互動(dòng)的重要橋梁。無(wú)論是注冊(cè)新賬號(hào)、提交反饋、還是在線購(gòu)物,表單都扮演著至關(guān)重要的角色。在網(wǎng)頁(yè)中,我們需要跟用戶進(jìn)行交互,收集用戶資料,此時(shí)就需要用到表單標(biāo)簽。

          HTML提供了一系列的表單標(biāo)簽,使得開發(fā)者能夠輕松地創(chuàng)建出功能豐富的表單。今天我們就來(lái)深入探討這些標(biāo)簽,了解它們的作用以及如何使用它們來(lái)構(gòu)建一個(gè)有效的用戶界面。



          一、表單的組成

          在HTML中,一個(gè)完整的表單通常由表單域、表單控件(表單元素)和提示信息三個(gè)部分構(gòu)成。

          表單域

          • 表單域是一個(gè)包含表單元素的區(qū)域
          • 在HTML標(biāo)簽中,<form>標(biāo)簽用于定義表單域,以實(shí)現(xiàn)用戶信息的收集和傳遞
          • <form>會(huì)把它范圍內(nèi)的表單元素信息提交給服務(wù)器


          表單控件

          這些是用戶與表單交云的各種元素,如<input>(用于創(chuàng)建不同類型的輸入字段)、<textarea>(用于多行文本輸入)、<button>(用于提交表單或執(zhí)行其他操作)、<select>和<option>(用于創(chuàng)建下拉列表)等。



          提示信息

          這些信息通常通過<label>標(biāo)簽提供,它為表單控件提供了描述性文本,有助于提高可訪問性。<label>標(biāo)簽通常與<input>標(biāo)簽一起使用,并且可以通過for屬性與<input>標(biāo)簽的id屬性關(guān)聯(lián)起來(lái)。


          這三個(gè)部分共同構(gòu)成了一個(gè)完整的HTML表單,使得用戶可以輸入數(shù)據(jù),并通過點(diǎn)擊提交按鈕將這些數(shù)據(jù)發(fā)送到Web服務(wù)器進(jìn)行處理。


          二、表單元素

          在表單域中可以定義各種表單元素,這些表單元素就是允許用戶在表單中輸入或者選擇的內(nèi)容控件。下面就來(lái)介紹HTML中常用的表單元素。


          1、<form>標(biāo)簽:基礎(chǔ)容器

          作用:定義一個(gè)表單區(qū)域,用戶可以在其中輸入數(shù)據(jù)進(jìn)行提交。

          <form action="submit.php" method="post">

          其中action屬性指定了數(shù)據(jù)提交到的服務(wù)器端腳本地址,method屬性定義了數(shù)據(jù)提交的方式(通常為GET或POST)。


          2、<input>標(biāo)簽:數(shù)據(jù)輸入

          <input>標(biāo)簽是一個(gè)單標(biāo)簽,用于收集用戶信息。允許用戶輸入文本、數(shù)字、密碼等。

          <input type="text" name="username" placeholder="請(qǐng)輸入用戶名">

          type屬性決定了輸入類型,name屬性定義了數(shù)據(jù)的鍵名,placeholder屬性提供了輸入框內(nèi)的提示文本。


          <input>標(biāo)簽的屬性

          下面舉個(gè)例子來(lái)說明:

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          </head>
          
          <body>
          <form>
          用戶名:<input type="text" value="請(qǐng)輸入用戶名"><br>
          密碼:<input type="password"><br>
          性別:男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
          愛好:吃飯<input type="checkbox"> 睡覺<input type="checkbox"> 打豆豆<input type="checkbox"><br>
          <input type="submit" value="免費(fèi)注冊(cè)">
          <input type="reset" value="重新填寫">
          <input type="button" value="獲取短信驗(yàn)證碼"><br>
          上傳頭像:<input type="file">
          </form>
          </body>
          </html>


          3、<label>標(biāo)簽:關(guān)聯(lián)說明

          它與輸入字段如文本框、單選按鈕、復(fù)選框等關(guān)聯(lián)起來(lái),以改善網(wǎng)頁(yè)的可用性和可訪問性。<label>標(biāo)簽有兩種常見的用法:


          1)包裹方式:

          在這種用法中,<label>標(biāo)簽直接包裹住關(guān)聯(lián)的表單元素。例如:

          <label>用戶名:<input type="text" name="username"></label>

          這樣做的好處是用戶點(diǎn)擊標(biāo)簽文本時(shí),關(guān)聯(lián)的輸入字段會(huì)自動(dòng)獲取焦點(diǎn),從而提供更好的用戶體驗(yàn)。



          2)使用for屬性關(guān)聯(lián):

          在這種用法中,<label>標(biāo)簽通過for屬性與目標(biāo)表單元素建立關(guān)聯(lián),for屬性的值應(yīng)與目標(biāo)元素的id屬性相匹配。例如:

          <label for="username">用戶名:</label><input type="text" id="username" name="username">

          這樣做的優(yōu)勢(shì)是單擊標(biāo)簽時(shí),相關(guān)的表單元素會(huì)自動(dòng)選中(獲取焦點(diǎn)),從而提高可用性和可訪問性。


          4、<select>和<option>標(biāo)簽:下拉選擇

          在頁(yè)面中,如果有多個(gè)選項(xiàng)讓用戶選擇,并且想要節(jié)約頁(yè)面空間時(shí),我們可以使用標(biāo)簽控件定義下拉列表。


          注意點(diǎn):

          • <select>中至少包含一對(duì)<option>
          • 在<option>中定義selected=“selected”時(shí),當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)
          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          </head>
          <body>
          <form>
          籍貫:
          <select>
          <option>山東</option>
          <option>北京</option>
          <option>西安</option>
          <option selected="selected">火星</option>
          </select>
          </form>
          </body>
          </html>


          5、<textarea>標(biāo)簽:多行文本輸入

          當(dāng)用戶輸入內(nèi)容較多的情況下,我們可以用表單元素標(biāo)簽替代文本框標(biāo)簽。

          • 允許用戶輸入多行文本。
          <textarea name="message" rows="5" cols="30">默認(rèn)文本</textarea>

          rows和cols屬性分別定義了文本區(qū)域的行數(shù)和列數(shù)。


          代碼示例:

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          </head>
          <body>
          <form>
          今日反饋:
          <textarea>請(qǐng)?jiān)诖溯斎雰?nèi)容</textarea>
          </form>
          </body>
          </html>



          6、<button>標(biāo)簽:按鈕控件

          創(chuàng)建一個(gè)可點(diǎn)擊的按鈕,通常用于提交或重置表單。它允許用戶放置文本或其他內(nèi)聯(lián)元素(如<i>、<b>、<strong>、<br>、<img>等),這使得它比普通的<input type="button">具有更豐富的內(nèi)容和更強(qiáng)的功能。

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

          type屬性為submit時(shí)表示這是一個(gè)提交按鈕。


          7、<fieldset>和<legend>標(biāo)簽:分組和標(biāo)題

          通常用于在HTML表單中對(duì)相關(guān)元素進(jìn)行分組,并提供一個(gè)標(biāo)題來(lái)描述這個(gè)組的內(nèi)容。



          <fieldset>標(biāo)簽:該標(biāo)簽用于在表單中創(chuàng)建一組相關(guān)的表單控件。它可以將表單元素邏輯分組,并且通常在視覺上通過圍繞這些元素繪制一個(gè)邊框來(lái)區(qū)分不同的組。這種分組有助于提高表單的可讀性和易用性。

          <legend>標(biāo)簽:它總是與<fieldset>標(biāo)簽一起使用。<legend>標(biāo)簽定義了<fieldset>元素的標(biāo)題,這個(gè)標(biāo)題通常會(huì)出現(xiàn)在瀏覽器渲染的字段集的邊框上方。<legend>標(biāo)簽使得用戶更容易理解每個(gè)分組的目的和內(nèi)容。

          代碼示例:

          <form>
          <fieldset>
          <legend>個(gè)人信息</legend>
          <label for="name">姓名:</label>
          <input type="text" id="name" name="name"><br><br>
          <label for="email">郵箱:</label>
          <input type="email" id="email" name="email"><br><br>
          </fieldset>
          <fieldset>
          <legend>興趣愛好</legend>
          <input type="checkbox" id="hobby1" name="hobby1" value="music">
          <label for="hobby1">音樂</label><br>
          <input type="checkbox" id="hobby2" name="hobby2" value="sports">
          <label for="hobby2">運(yùn)動(dòng)</label><br>
          <input type="checkbox" id="hobby3" name="hobby3" value="reading">
          <label for="hobby3">閱讀</label><br>
          </fieldset>
          <input type="submit" value="提交">
          </form>

          在這個(gè)示例中,我們使用了兩個(gè)<fieldset>元素來(lái)組織表單的不同部分。第一個(gè)<fieldset>包含姓名和郵箱字段,而第二個(gè)<fieldset>包含三個(gè)復(fù)選框,用于選擇用戶的興趣愛好。每個(gè)<fieldset>都有一個(gè)<legend>元素,用于提供標(biāo)題。這樣,用戶在填寫表單時(shí)可以更清晰地了解每個(gè)部分的內(nèi)容。

          想要快速入門前端開發(fā)嗎?推薦一個(gè)前端開發(fā)基礎(chǔ)課程,這個(gè)老師講的特別好,零基礎(chǔ)學(xué)習(xí)無(wú)壓力,知識(shí)點(diǎn)結(jié)合代碼,邊學(xué)邊練,可以免費(fèi)試看試學(xué),還有各種輔助工具和資料,非常適合新手!點(diǎn)這里前往學(xué)習(xí)哦!云端源想

          8、<datalist>標(biāo)簽:預(yù)定義選項(xiàng)列表

          <datalist>標(biāo)簽是HTML5中引入的一個(gè)新元素,它允許開發(fā)者為輸入字段提供預(yù)定義的選項(xiàng)列表。當(dāng)用戶在輸入字段中輸入時(shí),瀏覽器會(huì)顯示一個(gè)下拉菜單,其中包含與用戶輸入匹配的預(yù)定義選項(xiàng)。


          使用<datalist>標(biāo)簽可以提供更好的用戶體驗(yàn),因?yàn)樗梢詭椭脩暨x擇正確的選項(xiàng),而不必手動(dòng)輸入整個(gè)選項(xiàng)。此外,<datalist>還可以與<input>元素的list屬性結(jié)合使用,以將預(yù)定義的選項(xiàng)列表與特定的輸入字段關(guān)聯(lián)起來(lái)。



          下面是一個(gè)使用<datalist>標(biāo)簽的代碼示例:

          <form>
          <label for="color">選擇你喜歡的顏色:</label>
          <input type="text" id="color" name="color" list="colorOptions">
          <datalist id="colorOptions">
          <option value="紅色">
          <option value="藍(lán)色">
          <option value="綠色">
          <option value="黃色">
          <option value="紫色">
          </datalist>
          <input type="submit" value="提交">
          </form>


          9、<output>標(biāo)簽:計(jì)算結(jié)果輸出

          <output>標(biāo)簽是HTML5中引入的一個(gè)新元素,它用于顯示計(jì)算結(jié)果或輸出。該標(biāo)簽通常與JavaScript代碼結(jié)合使用,通過將計(jì)算結(jié)果賦值給<output>元素的value屬性來(lái)顯示結(jié)果。


          <output>標(biāo)簽可以用于各種類型的計(jì)算和輸出,例如數(shù)學(xué)運(yùn)算、字符串處理、數(shù)組操作等。它可以與<input>元素一起使用,以實(shí)時(shí)更新計(jì)算結(jié)果。



          下面是一個(gè)使用<output>標(biāo)簽的示例:

          <form>
          <label for="num1">數(shù)字1:</label>
          <input type="number" id="num1" name="num1" oninput="calculate()"><br><br>
          <label for="num2">數(shù)字2:</label>
          <input type="number" id="num2" name="num2" oninput="calculate()"><br><br>
          <label for="result">結(jié)果:</label>
          <output id="result"></output>
          </form>
          
          <script>
          function calculate() {
          var num1 = parseInt(document.getElementById("num1").value);
          var num2 = parseInt(document.getElementById("num2").value);
          var result = num1 + num2;
          document.getElementById("result").value = result;
          }
          </script>


          10、<progress>標(biāo)簽:任務(wù)進(jìn)度展示

          <progress>標(biāo)簽是HTML5中用于表示任務(wù)完成進(jìn)度的一個(gè)新元素。它通過value屬性和max屬性來(lái)表示進(jìn)度,其中value表示當(dāng)前完成的值,而max定義任務(wù)的總量或最大值。

          示例:

          <!DOCTYPE html>
          <html>
          <head>
          <title>Progress Example</title>
          </head>
          <body>
          <h1>File Download</h1>
          <progress id="fileDownload" value="0" max="100"></progress>
          <br>
          <button onclick="startDownload()">Start Download</button>
          
          <script>
          function startDownload() {
          var progress = document.getElementById("fileDownload");
          for (var i = 0; i <= 100; i++) {
          setTimeout(function() {
          progress.value = i;
          }, i * 10);
          }
          }
          </script>
          </body>
          </html>

          在上面的示例中,我們創(chuàng)建了一個(gè)名為"fileDownload"的<progress>元素,并設(shè)置了初始值為0,最大值為100。我們還添加了一個(gè)按鈕,當(dāng)用戶點(diǎn)擊該按鈕時(shí),會(huì)觸發(fā)名為"startDownload"的JavaScript函數(shù)。這個(gè)函數(shù)模擬了一個(gè)文件下載過程,通過循環(huán)逐步增加<progress>元素的value屬性值,從而顯示下載進(jìn)度。


          11、<meter>標(biāo)簽:度量衡指示器

          <meter>標(biāo)簽在HTML中用于表示度量衡指示器,它定義了一個(gè)已知范圍內(nèi)的標(biāo)量測(cè)量值或分?jǐn)?shù)值,通常用于顯示磁盤使用情況、查詢結(jié)果的相關(guān)性等。例如:

          <p>CPU 使用率: <meter value="0.6" min="0" max="1"></meter> 60%</p>
          <p>內(nèi)存使用率: <meter value="0.4" min="0" max="1"></meter> 40%</p>

          在這個(gè)示例中,我們使用了兩個(gè)<meter>標(biāo)簽來(lái)分別顯示CPU和內(nèi)存的使用率。value屬性表示當(dāng)前的測(cè)量值,min和max屬性分別定義了測(cè)量范圍的最小值和最大值。通過這些屬性,<meter>標(biāo)簽?zāi)軌蚯逦仫@示出資源的使用情況。



          需要注意的是,<meter>標(biāo)簽不應(yīng)該用來(lái)表示進(jìn)度條,對(duì)于進(jìn)度條的表示,應(yīng)該使用<progress>標(biāo)簽。


          12、<details>和<summary>標(biāo)簽:詳細(xì)信息展示

          <details>和<summary>標(biāo)簽是HTML5中新增的兩個(gè)元素,用于創(chuàng)建可折疊的詳細(xì)信息區(qū)域。

          <details>標(biāo)簽定義了一個(gè)可以展開或折疊的容器,其中包含一些額外的信息。它通常與<summary>標(biāo)簽一起使用,<summary>標(biāo)簽定義了<details>元素的標(biāo)題,當(dāng)用戶點(diǎn)擊該標(biāo)題時(shí),<details>元素的內(nèi)容會(huì)展開或折疊。

          示例:

          <details>
          <summary>點(diǎn)擊查看詳細(xì)信息</summary>
          <p>這里是一些額外的信息,用戶可以點(diǎn)擊標(biāo)題來(lái)展開或折疊這些信息。</p>
          </details>

          在這個(gè)示例中,我們使用了<details>標(biāo)簽來(lái)創(chuàng)建一個(gè)可折疊的容器,并在其中添加了一個(gè)<summary>標(biāo)簽作為標(biāo)題。當(dāng)用戶點(diǎn)擊這個(gè)標(biāo)題時(shí),容器的內(nèi)容會(huì)展開或折疊。


          總結(jié):

          HTML表單標(biāo)簽是構(gòu)建動(dòng)態(tài)網(wǎng)頁(yè)的基石,它們使得用戶能夠與網(wǎng)站進(jìn)行有效的交互。


          通過合理地使用這些標(biāo)簽,開發(fā)者可以創(chuàng)建出既美觀又功能強(qiáng)大的表單,從而提升用戶體驗(yàn)和網(wǎng)站的可用性。所以說,掌握這些標(biāo)簽的使用,對(duì)于前端開發(fā)者來(lái)說是至關(guān)重要的。


          我們下期再見!


          END

          文案編輯|云端學(xué)長(zhǎng)

          文案配圖|云端學(xué)長(zhǎng)

          內(nèi)容由:云端源想分享

          evExpress WinForm擁有180+組件和UI庫(kù),能為Windows Forms平臺(tái)創(chuàng)建具有影響力的業(yè)務(wù)解決方案。DevExpress WinForm能完美構(gòu)建流暢、美觀且易于使用的應(yīng)用程序,無(wú)論是Office風(fēng)格的界面,還是分析處理大批量的業(yè)務(wù)數(shù)據(jù),它都能輕松勝任!

          注意:目前基于HTML & CSS的控件正在積極研發(fā)中,可以作為技術(shù)預(yù)覽提供,如果需要使用請(qǐng)下載最新版組件體驗(yàn)哦~

          DevExpress WinForms Subscription官方最新版免費(fèi)下載試用,歷史版本下載,在線文檔和幫助文件下載-慧都網(wǎng)

          一組控件和組件允許開發(fā)人員構(gòu)建HTML格式的UI,并使用CSS樣式自定義UI元素的外觀設(shè)置、大小、填充和布局選項(xiàng),不再需要處理自定義繪制事件或更改大量屬性來(lái)修改控件以匹配UI規(guī)范,可以使用HTML和CSS標(biāo)記的知識(shí)為桌面應(yīng)用程序構(gòu)建布局。

          在上文中,我們?yōu)榇蠹医榻B了HTML-CSS標(biāo)記的,本文將為大家介紹DevExpress中的HTML-CSS感知控件,有興趣的小伙伴可以下載相關(guān)組件體驗(yàn)。

          HTML-CSS-aware控件

          HtmlContentControl

          HtmlContentControl可以從HTML-CSS標(biāo)記構(gòu)建UI的界面。

          HtmlContentPopup

          HtmlContentPopup是HtmlContentControl的彈出窗口版本,該組件從HTML-CSS代碼生成UI,并將其顯示為彈出或模態(tài)窗口。

          GridControl的ItemsView

          新的ItemsView沒有默認(rèn)的數(shù)據(jù)表示,它僅從開發(fā)者用屬性或動(dòng)態(tài)地用事件指定的HTML-CSS模板中呈現(xiàn)它的項(xiàng)(數(shù)據(jù)記錄)。

          GridControl的TileView

          TileView從模板生成它的項(xiàng)(tiles),開發(fā)者可以在常規(guī)模板和基于HTML-CSS的模板之間進(jìn)行選擇。

          GridControl的WinExplorerView

          WinExplorerView支持HTML-CSS模板來(lái)構(gòu)建卡片的布局,開發(fā)者可以為每種顯示樣式(超大、大、中、列表、貼片等等)指定HTML-CSS模板,或者動(dòng)態(tài)地使用一個(gè)事件。

          GanttControl

          GanttControl允許開發(fā)者使用HTML-CSS標(biāo)記來(lái)渲染許多元素:

          • 任務(wù)、摘要和里程碑
          • 定期和匯總?cè)蝿?wù)進(jìn)度
          • 常規(guī)、摘要和里程碑任務(wù)基線
          • 文本標(biāo)簽
          • 交互工具提示
          • 分割的任務(wù)

          Scheduler Control

          您可以在SchedulerControl中使用基于HTML-CSS的模板來(lái)呈現(xiàn)約會(huì)。

          DirectX Form

          標(biāo)準(zhǔn)Visual Studio表單的替代品,為其子控件啟用DirectX硬件加速,并支持基于HTML-CSS的模板。

          Alert Controls

          AlertControl的模板允許呈現(xiàn)現(xiàn)代應(yīng)用程序通知。

          列表框控件和組合框編輯器

          開發(fā)人員可以使用基于HTML-CSS的模板來(lái)呈現(xiàn)以下控件中的項(xiàng):

          • ListBoxControl, CheckedListBoxControl和 ImageListBoxControl
          • ComboBoxEdit

          Accordion Control

          AccordionControl允許開發(fā)人員使用HTML-CSS模板來(lái)渲染它的UI元素:

          • 項(xiàng)目和組
          • 頁(yè)腳的元素
          • 處于最小化狀態(tài)的元素等

          豬腳本(原飛豬腳本)以按鍵精靈教學(xué)為主,涉及UiBot,Python,Lua等腳本編程語(yǔ)言,教學(xué)包括全自動(dòng)辦公腳本,游戲輔助腳本,引流腳本,網(wǎng)頁(yè)腳本,安卓腳本,IOS腳本,注冊(cè)腳本,點(diǎn)贊腳本,閱讀腳本以及網(wǎng)賺腳本等各個(gè)領(lǐng)域。想學(xué)習(xí)按鍵精靈的朋友可以添加金豬腳本粉絲交流群:554127455 學(xué)習(xí)路上不再孤單,金豬腳本伴你一同成長(zhǎng)

          1.什么是網(wǎng)頁(yè)元素特征字符串?

          請(qǐng)參考網(wǎng)頁(yè)特征字符串詳解;

          2.Html系列命令

          2.1.HtmlSelect命令

          1)HtmlSelect命令只能夠根據(jù)Select項(xiàng)的值來(lái)進(jìn)行選擇,注意這里不是顯示在Select項(xiàng)上的文字,而是該項(xiàng)的value。

          一個(gè)典型的下拉框HTML代碼如下:

          <select name="city">

          <option value="1">北京</option>

          <option value="2">上海</option>

          <option value="3">廣州</option>

          </select>

          這里如果要選擇上海,需要選擇值為2的項(xiàng);

          2)級(jí)聯(lián)的下拉列表組合。

          在有的網(wǎng)頁(yè)中,會(huì)有幾個(gè)級(jí)聯(lián)的下拉列表,后一個(gè)下拉框會(huì)隨前一個(gè)框的值變化而發(fā)生變化,典型的有注冊(cè)頁(yè)面上的省份城市選擇,HtmlSelect命令能夠觸發(fā)Onchange事件,會(huì)導(dǎo)致后一個(gè)下拉框值發(fā)生變化,但是如果執(zhí)行腳本太快,而導(dǎo)致后一個(gè)未能選中正確的值,可以在前一個(gè)HtmlSelect后加上適當(dāng)?shù)难訒r(shí);

          3)多選表單中的列表控件;有的列表支持多選,在有一些個(gè)求職網(wǎng)站中,職業(yè)是可以多選的,這時(shí)候可以用%將多個(gè)需要選擇的值連接起來(lái)傳遞給HtmlSelect命令實(shí)現(xiàn)多選;

          2.2.HtmlExists命令

          HtmlExists命令,能夠判斷指定特征的元素是否存在,并能夠返回具備該特征的元素的個(gè)數(shù)。這個(gè)命令能夠用來(lái)判斷某個(gè)元素是否存在,如果為0證明不存在;

          2.3.HtmlGet命令

          HtmlGet命令比較復(fù)雜,但是功能也非常強(qiáng)大,該命令具備兩個(gè)參數(shù),第一個(gè)參數(shù)為獲取類型,目前支持的值如下所示:

          序號(hào) 值 適用對(duì)象

          1 text 得到指定元素的文本值,對(duì)應(yīng)DOM屬性innerText

          2 html 得到指定元素內(nèi)部的HTML代碼,對(duì)應(yīng)DOM屬性innerHTML

          3 outerHtml 得到元素整體的HTML代碼,對(duì)應(yīng)DOM屬性的outerHTML

          4 value 得到元素的Value值,用于獲取表單元素內(nèi)部的值

          5 src 得到圖像元素的src屬性,用于IMG標(biāo)簽對(duì)象

          6 href 得到鏈接元素的鏈接地址,用于A標(biāo)簽

          7 …其他名稱 其他屬性,如果您使用的是合法的屬性名稱,就能夠返回對(duì)應(yīng)的值。如何才是合法的屬性?請(qǐng)參閱HTML標(biāo)準(zhǔn)。

          第二個(gè)參數(shù)為特征字符串,如果匹配多個(gè),只能返回第一個(gè)元素的值;

          例如,獲得淘寶貨物價(jià)格:

          Plugin price=Web.HtmlGet("text","id:id_Price")

          獲取某個(gè)表單文本的值

          Plugin email=Web.HtmlGet("value","name:Email")

          2.4.RunJS命令

          RunJS命令提供了直接運(yùn)行Javascript的功能,如果您對(duì)JS非常熟悉,就能夠極大的擴(kuò)展WQM的功能。

          RunJS命令支持兩中執(zhí)行方式,第一個(gè)參數(shù)設(shè)置為0時(shí),能夠執(zhí)行一段沒有返回值的Javascript,

          例如:

          RunJS(0,"alert('hello');")

          第一個(gè)參數(shù)設(shè)置為1時(shí),能執(zhí)行一段js并返回由return語(yǔ)句返回的值,返回值為字符串類型;

          例如:返回Html文檔的title;

          RunJS(1,"var t=document.title;return t;")

          如果您分析到網(wǎng)頁(yè)中某個(gè)按鈕實(shí)際上就是執(zhí)行了一個(gè)函數(shù),例如

          <input type="Button" … />

          您就可以直接調(diào)用

          RunJS(0,"dosomething();")

          JQuery的支持,網(wǎng)頁(yè)按鍵精靈集成了Jquery1.3.2,為了不與其他JQ的庫(kù)發(fā)生沖突,使用了wqmjq來(lái)代替$操作符,如果您需要直接使用JQ來(lái)操作網(wǎng)頁(yè),可使用wqmjq來(lái)執(zhí)行Jquery語(yǔ)句:

          RunJS(0,"wqmjq('#test').click();")


          主站蜘蛛池模板: 武侠古典一区二区三区中文| 久久久久久综合一区中文字幕| 另类一区二区三区| 无码喷水一区二区浪潮AV| 91秒拍国产福利一区| 波多野结衣一区二区三区88| 高清一区高清二区视频| 国产午夜精品一区理论片| 蜜桃臀无码内射一区二区三区| 亚洲欧美国产国产综合一区| 午夜视频久久久久一区| 无码少妇一区二区性色AV| 精品国产一区二区麻豆| 精品无码AV一区二区三区不卡| 色窝窝免费一区二区三区 | 一区二区三区四区无限乱码| 免费精品一区二区三区在线观看| 精品久久久中文字幕一区| 在线观看国产一区| 国产美女一区二区三区| 大香伊蕉日本一区二区| 亚洲综合色自拍一区| 国产微拍精品一区二区| 日韩一区二区久久久久久| 色偷偷一区二区无码视频| 国偷自产视频一区二区久| 无人码一区二区三区视频 | 日本精品高清一区二区2021| 国产精品亚洲高清一区二区| 中文字幕精品一区二区日本| 一区二区三区免费视频网站| 日韩免费一区二区三区在线播放| 日韩精品无码一区二区视频 | 日韩国产一区二区| 日本国产一区二区三区在线观看 | 精品日本一区二区三区在线观看| 无码精品人妻一区二区三区免费| 亚洲熟妇AV一区二区三区浪潮| 久久se精品动漫一区二区三区| 亚洲熟妇av一区二区三区 | 久久久久人妻一区精品果冻|