HTML表單3（下拉列表、多行文字輸入）-零基礎自學網頁制作

有下拉列表的表單

題目只能有30個字，不能寫全，其實今天我們要學習的內容有三個，第一，下拉列表表單，第二，多行文字輸入表單，第三，數據集表單。

開始學習吧！

前天和昨天我們在《HTML表單元素初識1——零基礎自學網頁制作》和《HTML表單元素初識2——零基礎自學網頁制作》中基本上把<input/>標簽的type屬性里不同的值進行了講解與實踐，今天我們來學習其他包含在<form></form>之間的元素。

帶有下拉列表的表單

我們在一些網站填寫注冊信息時，經常會遇到選擇"生活所在地"的操作，因為中國的地名是固定的，因此頁面會為我們提供一個下拉列表選項，我們直接點選即可，就不需要輸入文字了，這樣操作的好處在于不會出現拼寫錯誤。例如：

寫這個功能我們需要介紹一組新標簽<select></select>。"select"（選擇）。在這個標簽中再添加<option></option>。"option"（選項）。這樣就可以寫出帶有下拉列表的表單了，示例代碼如下：

<select><option></option></select>

這段代碼我們繼續在昨天的"表單.html"文件中添加即可，在<input type = "image" src = "img/示例圖片/submit.jpg"/><br>這段代碼之前即可！與這個圖片提交按鈕共用一個<form></form>標簽！

下面我們為多選表單添加名稱，示例代碼如下：

請選擇省份<select><option></option></select>

下面我們添加不同選項，示例代碼如下：

請選擇省份
  <select >
  <option >河北</option>
  <option >山東</option>
  <option >河南</option>
  <option >海南</option>
  <option >江蘇</option>
  <option >安徽</option>
  </select>
  <br><br>

為了規范起見，我們為表單信息添加name和value屬性，示例代碼如下：

請選擇省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山東</option>
  <option value="Henan">河南</option>
  <option value="Hainan">海南</option>
  <option value="Jiangsu">江蘇</option>
  <option value="Anhui">安徽</option>
  </select>
  <br><br>

大家要注意的是，在下拉列表表單中，name寫在<select>中，value寫在<option>中。

頁面效果如下：

這里告訴大家一個規律，下拉列表表單默認顯示第一個<option></option>中的文字內容。

如果您想改變這個默認顯示，請在需要顯示的<option>中添加selected屬性，并賦值為"selected"。

示例代碼如下：

請選擇省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山東</option>
  <option value="Henan" selected="selected">河南</option>
 <!--選中這個選項--><option value="Hainan">海南</option><option value="Jiangsu">江蘇</option><option value="Anhui">安徽</option></select><br><br>

頁面效果如圖：

多行文字輸入表單

我們在西瓜視頻上發布視頻時會被要求填寫視頻描述，頁面中的輸入框不是像下圖這么短的單行輸入框。

而是多行輸入框，如圖：

使用<textarea></textarea>標簽即可添加這樣的輸入框，不過要設置row（列）和cols（行）屬性的數值。示例代碼如下：

<br>請簡要描述您的劇本的情節<br><textarea row="3" cols="20"></textarea><br>

這段代碼添加到</select><br><br>之后，與其共同使用一個<form></form>標簽。

下面我們為這個多行輸入框添加一些提示和限制。

首先，添加提示文字，和type="text"的<input/>標簽一樣，都是使用placeholder屬性。

第二，我們限制一下字數，使用maxlength（最大長度）屬性。

第三，在頁面加載完成后，直接讓光標停留在輸入框中，使用autofocus屬性。

下面看看如何寫吧，示例代碼如下：（不要忘記寫好name屬性?。?/p>

<br>
請簡要描述您的劇本的情節<br>
<textarea row="3" cols="20" name ="storyOutLine"placeholder="最多輸入80字"maxlength="80"autofocus></textarea><br>

頁面效果如圖：

如果刷新頁面不能正確顯示，請嘗試關閉后重新打開！

數據集表單

數據集表單實際上就是一個將不同選項或信息打包上傳的設置。

當一組表單元素放到 <fieldset> 標簽內時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D 效果，或者甚至可創建一個子表單來處理這些元素。（W3school）

這個數據集有三個部分組成，首先是<fliedset></fliedset>,這個標簽不會顯示，只是告訴瀏覽器這里的數據要打包。

第二是<legend></legend>,"legend"(說明)，這里添加數據集名稱。

第三就是我們之前學到的那些標簽了。

示例代碼如下：

<fliedset> <legend>信息打包</legend> </fliedset>

下面我們使用這段代碼把form2打包一下吧。示例代碼如下：

<form>
  <fieldset><!--開始-->
  <legend>信息打包</legend><br>
  <!--標題-->興趣愛好：<br>
  <input type = "checkbox" name = "hobby" value = "reading"/>讀書
  <input type = "checkbox" name = "hobby" value = "film"/>電影
  <input type = "checkbox" name = "hobby" value = "painting"/>繪畫
  <input type = "checkbox" name = "hobby" value = "music"/>音樂
  <br>
  最高學歷：<br>
  <input type = "radio" name = "education" value = "highSchool"/>高中
  <input type = "radio" name = "education" value = "bachelor"/>本科
  <input type = "radio" name = "education" value = "master"/>碩士
  <input type = "radio" name = "education" value = "doctor"/>博士
  <br>
  請選擇省份
  <select name = "province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山東</option>
  <option value="Henan" selected="selected">河南</option><!--選中這個選項-->
  <option value="Hainan">海南</option>
  <option value="Jiangsu">江蘇</option>
  <option value="Anhui">安徽</option>
  </select>
  <br><br><br>
  請簡要描述您的劇本的情節<br>
  <textarea row="3" cols="20" name ="storyOutLine"placeholder="最多輸入80字"maxlength="80"autofocus></textarea>
  <br>
  </fieldset><!--結尾-->
  <input type = "image" src = "img/示例圖片/submit.jpg"/><br>
  <input type="reset" /><br>
  <input type = "submit" value = "submit"/>
  </form>

頁面效果如下：

今天的內容結束了！

如果您喜歡我的教程請關注我，點贊也能讓我充滿動力！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

TML如何制作在透明輸入框里面添加圖標

最近在寫一個律師推薦前臺的網站，在上面搜索框這里出現了問題，我想把搜索的圖標放在搜索框里面，但是弄了半天都不大如意……

話不多說，我們直接進入主題：

基本思路

其實就把輸入框與后面的圖標一起放在一個div里面，然后將輸入框的border設置為0px，最后設置div的border為最終的外邊框

我們最直接上代碼：HTML：

<div class="search">
        <form action="http://baidu.com">
           <input type="text" placeholder="請輸入查找的律師或專長">
               <span>
                 <a href="#"><img src="img/icon1.png" alt=""></a>
               </span>
          </form>
</div>

CSS:這里是設置外面整個div的樣式

.search {
    width: 250px;
    height: 35px;
    border: 1px solid white;
    border-radius: 30px;
}

這里是設置里面的輸入框的長寬、boder為0px、里面的字體大小、點擊不會亮邊框(outline:none)設置透明度這里使用rgba()，最后一個屬性就是透明度（在0-1之間）

elenium的定位元素方式是基于html語言構建的，所以學習web自動化是很有必要去學習html

HTML

HTML 全名 HyperText Markup Language(超文本標記語言),是一種用于創建網頁的標準標記語言。常常和css js一起使用來構建漂亮的頁面。

HTML構成

HTML的元素的以標簽、屬性、text、內嵌標簽構成

下面以百度為例

在我們看到的頁面上展示的內容都在內嵌標簽有（head 頭部信息、body 體信息）

在web自動化測試中重要的是body里內嵌標簽中，因為展示的頁面操作都是在body 中完成的

html腦圖結構

常見HTML標簽

p : 段落文本，代表進行換行

h1-h6:標題從H1（最大）到H6（最?。?,標題大小

div：對html頁面進行布局，填充數據，容器，也有換行作用

span：對html頁面進行布局，填充數據，容器，在一行獨立設置樣式

ul: 將 <ul> 標簽與 <li> 標簽一起使用，創建無序列表組合：<ul><li></li></ul>

web自動化測試的重點

a：超鏈接跳轉到頁面，需要配合 href，一般都是<a href='www.baidu.com'> </a>使用

img： 圖片的超鏈接，組合<img src="#圖片鏈接#">

iframe：

在html頁面里面嵌套html頁面，src 頁面鏈接 width 寬度 height 長度

組合 <iframe src="http://www.toutiao.com" width="400" height="500"></iframe>

select標簽：組合<form><selevct></select> </form>

select的作用下拉選擇框

form標簽：

form的作用form表單是前端和后端進行用戶數據交互的一種方式，前端編寫的數據可以通過form表單傳遞給后端

action:接口地址，根據需求更改請求的接口地址 method：請求方法

input： input:通常有name和value屬性

格式：<input type="" name="" value="">

代表輸入，基本web自動化測試都必須要測的內容

<input name> ：默認屬性輸入框

組合：name 屬性 <input name="123" value=“number”>

input name屬性的作用：

當我們選擇（輸入）的數據傳遞給后端時會進行接收

input value值的作用：

后端接收的數據如果是json格式的話就會以接收{"name（123）"="value（number）"}

input type 的作用：

設定輸入格式，不設置格式，默認是text 文本輸入

<input name='password' type='password'>：

type='password'：代表輸入內容帶*號，用于設置密碼框

type="text"：默認是text 文本輸入

type="checkbox"：代表多選

type="radio"：代表單選框

type="file"：選擇文件

type="submit" 提交按鈕（配合form表單使用，將form內的數據提交到后端）

input placeholder的作用：輸入框提示

input disable 的作用：

禁用輸入框，輸入框置灰，如果想輸入在F12找到該元素并且去除

input readonly 的作用：只讀輸入框

樣式代碼與演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web自動化</title>
</head>
<form action="http://httpbin.org/post" method="post">
<div>div也是個容器，對html頁面進行布局
    <h4>標題h4<span>對html頁面進行布局，這是個容器</span></h4>
    <a href="http://www.toutiao.com">點擊我，跳轉頭條<img
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANgAAAA2CAMAAACSsKctAAAANlBMVEVHcEzuQEDwRETyRUX3TEzvQkLuQEDuQUHuQUHvQEDuQUHuQEDvQkLuQEDuQUHwQUHxQkLtQEDKaksGAAAAEXRSTlMAxiweDlyo49Nri/F5+bhLOapXaIgAAATMSURBVGje7ZrpsqQqDIAb2VEE3/9lx263AAmu3XVv1cn8mFOtIh+JIQuvFyFSzdK8/jsSrbg7BG+HSdjPZi3iJPTchR7a7iYam7mGNvwKTM5vlOQd6n3Z37IhN6zSNhW1TsJqMt/TwQk6G3gxmt0DC5/LfpxS9U38wOJ9RJN38uG4KGBR0wRNxrcHtn4dlPjpv4pCYzqEEffBfAG2XDC9sxyCUbbfH3wVDdbkS2P4FzQGRR4As8NdsEYXy01Y4xMa28C6KljT3gUDXNtYOn5fY3UwNtwEA9+XA397+zONxR03fQ1MerjG0Is4QYK5riLzEMDdC4+CuQoY99sKoW9R20z5zsKwN0gAczDFUohdPzSKRpw4j9Yp0+Jg2GgCrHBf3sAVuIytC8u4RjIwYmGOh8AMvTutfLtgydR8ZjzCgeV32M7eFlyZj2T8GY3lfHwNmChTGmcP5tECNNFBf4m4AqEGhGt8rYEj2i+AwUhwFCocgOs+ok383MFfMecdoGYUHFwkW76Jz5kiHlmQ4TtPY48+iNAnfqgX1a+vtNMueXyjvqox5WTkJFgthq3t0i2ydhY+4MsbYhKMtEu6dxFseqw1Gd+s2raasylPRgCluoJJgnnU3SYaHbS8Y4rJBv3h42AFdN1gGzwWZtgcMHD3Xk5BfYOz67qlsWKDnq3G1DP74DTCZVwQVbA1X57WpWWqk40od4svgInKBrtUPJSpfGPGyYYC6zma/OjJm0RzBcwcBONltAzKIVYxfyBObJlbFAHAtKSyOla4x+c1FiuhAxvOiDcpWBKo4GDbp3sLDA2CJR07EGCaUZYJwUys5OGgBhdYCRYFIWQQHKzrjU/AXCUdQ8C0e0+Y295XwbSsFhiS4qLUC9hePsZ2QqqVT4I3NvtgvrfbXQLxkwsYUoWsgI37uX4GbOXj231+J332DPHsXKb+cknCkC2gkZ1iLQE2RtRPgiVJq6mAadVtUKL5CAea69v9qGxxs/KTMLFrVaozYLLi7UcwrVxWY3XYtjfu32q07cOF/Ob7YKpWLm0Emewj+7m43Ud5EGzdAvjJKnz/jTbCg2B2OBIpXgBzZl9a/xFdhBChwYWXYIEYe1GYzn6fHlPIE3rJDhBBTPxIPHYng5bDObEXQqrEK34PTP+B/c/A/kzxD+wUWLB1AXVJd8cUm3Jkv1W/SpmGlsiVOUw32GxPbMVbZtA9WwneGjo+Xun/34s8hEGLqQ+AgUaVff0cDHCpJ7stSZvKTVW//vNPoXVuNV3rVQ7WVR+juRjRfLqtMeuzkWOtG2SxdtrnuehrSc9utyBpwjwB5sp23eqdI33Og5Wm6IZan3eXKz/wcc8UYdl87ZOsrUtDZmzz6xIwoU9nB2CHKw5FLGBWVkQXzrTsu4Fvw1K+JGRWmjoPiTjto6eqysMeF08NFA0chRVu8jNRyzpogXpF6rF9LuSw2MVzHtnphMxRNLgj6IasdpCBNef8B+CKj53zyI5tWOqdATsP0VP7GPoYJd1QDQuuagw2f30xj9URaFF6MM8pMPSxfa7w4FmqxtTb4YgjCOVPReQRanvgKa5TGuvQ7j9+rq5QD6aNMqRa/LffKb9JvQoR6Al9XCQyrCZCIL5eX5Z4+QEscJfekj/2D7KhSDEKe9jHAAAAAElFTkSuQmCC">
    </a>
    <!--    下面是html頁面中嵌套另一個html頁面-->
</div>
<div></div>
<iframe src="http://www.toutiao.com" width="400" height="500"></iframe>
<!-- 段落-->
<p>這是第一行段落</p>
<p>這是第二行段落</p>
<p>菜單標題</p>
<ul>無序列表
    <li>菜單1</li>
    <li>菜單2</li>
    <li>菜單3</li>
</ul>
<!--    用戶輸入-->
username:<input name="username" placeholder="輸入賬號" >
<p></p>
password:<input type="password" name="password" placeholder="輸入密碼">
    <p></p>
    禁用框 <input name="text"  disabled>
    <p></p>
    只讀框 <input name="text" placeholder="只能復制框內文字" readonly>
<p>choice you like color</p>
<div>

    <!--        radio代表的意思是單選-->
    <input type="radio" name="like_color" value="紅色">red
    <input type="radio" name="like_color" value="藍色">blue
    <input type="radio" name="like_color" value="綠色">green

</div>
<p>choice you not like color</p>
<div>
    <!--        checkbox代表的意思是多選-->
    <input type="checkbox" name="not_like_color">yellow
    <input type="radio" name="not_like_color">white
    <input type="radio" name="not_like_color">black
    <p>選擇文件</p>
    <input type="file" name="file" >
</div>
<p>choice you not like animal</p>

<select name="dog">
    <option>dog</option>
    <option>cat</option>
    <option>fish</option>
</select>
    <p></p>
    <input type="submit" width="50" height="20" value="點擊提交">
</form>
</html>

作為web自動化測試，了解具體是什么意思，以及如何進行元素的定位調用即可，當然全能弄懂那當然是更好的

在線咨詢

上一篇：亞馬遜運營必備技能，一分鐘學會HTML「附各HTML工具測評」
下一篇：弱電接地的真實情況是這樣的，別聽不靠譜的電工瞎掰

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。