HTML+CSS：常用表單控件之單選框、多選框、下拉框的介紹

一篇文章我們說了單行文本框和多行文本框，今天呢我們繼續(xù)看一下表單的其它控件：單選框、復(fù)選框、下拉框。

（1）單選框和復(fù)選框

在我們表單頁面中，經(jīng)常會(huì)有選擇性別或者選擇愛好這類的內(nèi)容，使用選擇框是一個(gè)好主意，html中有兩種選擇框，即單選框和復(fù)選框，兩者的區(qū)別是單選框中的選項(xiàng)用戶只能選擇一項(xiàng)，而復(fù)選框中用戶可以任意選擇多項(xiàng)，甚至全選。

使用語法：

單選框：<input type="radio" value="值" name="名稱" checked="checked"/>

復(fù)選框：<input type="checkbox" value="值" name="名稱" checked="checked"/>

詳細(xì)講解：

1、type: 當(dāng) type="radio" 時(shí)，控件為單選框；當(dāng) type="checkbox" 時(shí)，控件為復(fù)選框

2、value：提交數(shù)據(jù)到服務(wù)器的值（后臺(tái)程序使用）

3、name：為控件命名，這里要注意同一組的單選按鈕，name 取值一定要一致（具體可見下邊的參考練習(xí)）。

4、checked：當(dāng)設(shè)置 checked="checked"（也可以直接簡寫成checked）時(shí)，該選項(xiàng)被默認(rèn)選中

使用練習(xí)：

我們創(chuàng)建一個(gè)表單，表單里邊包含姓別（男、女）選擇的單選框，默認(rèn)選中男以及愛好（唱歌、打游戲、繪畫、旅游）選擇的多選框，默認(rèn)選中唱歌。具體的代碼如下圖所示：

在網(wǎng)頁中的顯示效果就如下圖所示：

（2）下拉框

下拉框也是我們常用的一個(gè)表單控件，多用于選擇城市地區(qū)等。

使用語法：

<option value="向服務(wù)器提交的內(nèi)容" selected="selected">網(wǎng)頁顯示的內(nèi)容</option>

</select>

詳細(xì)講解：

1、option：option為select下拉子元素，可以有一個(gè)或多個(gè)，寫法類似ul和li，其中的value內(nèi)容為提交數(shù)據(jù)到服務(wù)器的值（后臺(tái)程序使用）

2、selected：當(dāng)設(shè)置 selected="selected"（也可以直接簡寫成selected）時(shí)，該選項(xiàng)被默認(rèn)選中

使用練習(xí)：

我們創(chuàng)建一個(gè)表單，表單里邊包含一個(gè)城市的下拉框，下拉框中有北京、上海、天津這三個(gè)城市，其中默認(rèn)選中天津。具體的代碼如下圖所示：

在網(wǎng)頁中的顯示效果就如下圖所示：

好了，本篇文章就先給大家介紹這幾個(gè)表單控件的語法以及使用，下篇文章我們將介紹按鈕的語法及使用以及完整的表單練習(xí)演示，記得平時(shí)要多加練習(xí)才是王道。

每日金句：做人要像竹子一樣每前進(jìn)一步，都要做一次小結(jié)。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。

elenium的定位元素方式是基于html語言構(gòu)建的，所以學(xué)習(xí)web自動(dòng)化是很有必要去學(xué)習(xí)html

HTML

HTML 全名 HyperText Markup Language(超文本標(biāo)記語言),是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。常常和css js一起使用來構(gòu)建漂亮的頁面。

HTML構(gòu)成

HTML的元素的以標(biāo)簽、屬性、text、內(nèi)嵌標(biāo)簽構(gòu)成

下面以百度為例

在我們看到的頁面上展示的內(nèi)容都在內(nèi)嵌標(biāo)簽有（head 頭部信息、body 體信息）

在web自動(dòng)化測試中重要的是body里內(nèi)嵌標(biāo)簽中，因?yàn)檎故镜捻撁娌僮鞫际窃赽ody 中完成的

html腦圖結(jié)構(gòu)

常見HTML標(biāo)簽

p : 段落文本，代表進(jìn)行換行

h1-h6:標(biāo)題從H1（最大）到H6（最小） ,標(biāo)題大小

div：對html頁面進(jìn)行布局，填充數(shù)據(jù)，容器，也有換行作用

span：對html頁面進(jìn)行布局，填充數(shù)據(jù)，容器，在一行獨(dú)立設(shè)置樣式

ul: 將 <ul> 標(biāo)簽與 <li> 標(biāo)簽一起使用，創(chuàng)建無序列表組合：<ul><li></li></ul>

web自動(dòng)化測試的重點(diǎn)

a：超鏈接跳轉(zhuǎn)到頁面，需要配合 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標(biāo)簽：組合<form><selevct></select> </form>

select的作用下拉選擇框

form標(biāo)簽：

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

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

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

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

代表輸入，基本web自動(dòng)化測試都必須要測的內(nèi)容

<input name> ：默認(rèn)屬性輸入框

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

input name屬性的作用：

當(dāng)我們選擇（輸入）的數(shù)據(jù)傳遞給后端時(shí)會(huì)進(jìn)行接收

input value值的作用：

后端接收的數(shù)據(jù)如果是json格式的話就會(huì)以接收{(diào)"name（123）"="value（number）"}

input type 的作用：

設(shè)定輸入格式，不設(shè)置格式，默認(rèn)是text 文本輸入

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

type='password'：代表輸入內(nèi)容帶*號，用于設(shè)置密碼框

type="text"：默認(rèn)是text 文本輸入

type="checkbox"：代表多選

type="radio"：代表單選框

type="file"：選擇文件

type="submit" 提交按鈕（配合form表單使用，將form內(nèi)的數(shù)據(jù)提交到后端）

input placeholder的作用：輸入框提示

input disable 的作用：

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

input readonly 的作用：只讀輸入框

樣式代碼與演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web自動(dòng)化</title>
</head>
<form action="http://httpbin.org/post" method="post">
<div>div也是個(gè)容器，對html頁面進(jìn)行布局
    <h4>標(biāo)題h4<span>對html頁面進(jìn)行布局，這是個(gè)容器</span></h4>
    <a href="http://www.toutiao.com">點(diǎn)擊我，跳轉(zhuǎn)頭條<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頁面中嵌套另一個(gè)html頁面-->
</div>
<div></div>
<iframe src="http://www.toutiao.com" width="400" height="500"></iframe>
<!-- 段落-->
<p>這是第一行段落</p>
<p>這是第二行段落</p>
<p>菜單標(biāo)題</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="只能復(fù)制框內(nèi)文字" readonly>
<p>choice you like color</p>
<div>

    <!--        radio代表的意思是單選-->
    <input type="radio" name="like_color" value="紅色">red
    <input type="radio" name="like_color" value="藍(lán)色">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="點(diǎn)擊提交">
</form>
</html>

作為web自動(dòng)化測試，了解具體是什么意思，以及如何進(jìn)行元素的定位調(diào)用即可，當(dāng)然全能弄懂那當(dāng)然是更好的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style-type: none;
}
ul{
width: 1200px;
height: 40px;
line-height: 40px;
margin: 50px auto;
}
ul>li{
float: left;
width: 120px;
height: 40px;
cursor: pointer;
text-align: center;
position: relative; /* 相對定位 */
}
ul>li:hover{
background-color: deepskyblue;
}
/* 豎線 */
li:after{
    content: '';
    width: 1px;
    height: 16px;
    display: inline-block;
    background-color: #000;
    position: absolute;
    right: 0;
    top: 12px;
}
li.last:after{
display: none;
}
</style>
</head>
<body>
<ul>
<li>首頁</li>
<li>
公司動(dòng)態(tài)
</li>
<li>新聞中心
</li>
<li>企業(yè)風(fēng)采</li>
<li class="last">關(guān)于我們</li>
</ul>
</body>
</html>

用content: '';樣式實(shí)現(xiàn)

在線咨詢

上一篇：文章采集網(wǎng)站源碼（php采集系統(tǒng)）
下一篇：簡單小程序：登錄頁面（html）

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML+CSS：常用表單控件之單選框、多選框、下拉框的介紹

（1）單選框和復(fù)選框

（2）下拉框

您的項(xiàng)目需求

HTML+CSS：常用表單控件之單選框、多選框、下拉框的介紹