當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

4、表单和高级选择器

發(fā)布時(shí)間：2024/1/23 编程问答 42 豆豆

生活随笔收集整理的這篇文章主要介紹了 4、表单和高级选择器小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

表單和高級(jí)選擇器

1、什么是表單

表單用于收集用戶(hù)的信息，是瀏覽器和用戶(hù)之間溝通的橋梁。

就是你在注冊(cè)賬號(hào)時(shí)，讓你輸手機(jī)號(hào)，輸密碼那個(gè)小框框，明白了吧

還不明白？來(lái) 給你個(gè)圖

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-CGdfat5P-1629718059913)(.\assetis\表單.png)]

現(xiàn)實(shí)中的表單，類(lèi)似我們?nèi)ャy行辦理信用卡填寫(xiě)的單子。如下圖

目的是為了收集用戶(hù)信息。

在我們網(wǎng)頁(yè)中，我們也需要跟用戶(hù)進(jìn)行交互，收集用戶(hù)資料，此時(shí)也需要表單。

在HTML中，一個(gè)完整的表單通常由表單控件（也稱(chēng)為表單元素）、提示信息和表單域3個(gè)部分構(gòu)成。

表單控件：

? 包含了具體的表單功能項(xiàng)，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、重置按鈕等。

提示信息：

? 一個(gè)表單中通常還需要包含一些說(shuō)明性的文字，提示用戶(hù)進(jìn)行填寫(xiě)和操作。

表單域：

? 他相當(dāng)于一個(gè)容器，用來(lái)容納所有的表單控件和提示信息，可以通過(guò)他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無(wú)法傳送到后臺(tái)服務(wù)器。

2、input 控件(重點(diǎn))

在上面的語(yǔ)法中，<input />標(biāo)簽為單標(biāo)簽，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類(lèi)型。除了type屬性之外，<input />標(biāo)簽還可以定義很多其他的屬性，其常用屬性如下表所示。

3、radio單選框多個(gè)選項(xiàng)只能選擇一個(gè)的

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-Lfj2Ztp5-1629718059915)(.\assetis\radio.png )]

解決方法，給兩個(gè)input框添加一個(gè)相同的name,關(guān)聯(lián)起來(lái)，這樣就只能選擇一個(gè)了

4、label標(biāo)簽(理解)

label 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)簽）。

作用：用于綁定一個(gè)表單元素, 當(dāng)點(diǎn)擊label標(biāo)簽的時(shí)候, 被綁定的表單元素就會(huì)獲得輸入焦點(diǎn)

如何綁定元素呢？

for 屬性規(guī)定 label 與哪個(gè)表單元素綁定。

type=”checkbox”的時(shí)候，復(fù)選框。可重復(fù)選擇，應(yīng)用場(chǎng)景，接受協(xié)議

type=”button”的時(shí)候，是登陸框。想讓文字出現(xiàn)在登陸框里面，需要在input里面添加value屬性，value后面跟要添加的文字。

例：

效果：[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-NJUQUdcu-1629718059917)(.\assetis\wps1.jpg)]

? 按鈕效果也可以直接用butto雙標(biāo)簽，效果一樣，注冊(cè)

? input框設(shè)置提醒字符，打字的時(shí)候會(huì)自動(dòng)消失，比如某些輸入框會(huì)提醒，請(qǐng)輸入賬號(hào)等

? 語(yǔ)法：在input標(biāo)簽內(nèi)添加placeholder=”要提示的內(nèi)容”

請(qǐng)輸入姓名：<input type="text" placeholder="請(qǐng)輸入用戶(hù)名:">

5、textarea控件(文本域了解)

如果需要輸入大量的信息，就需要用到<textarea></textarea>標(biāo)簽。通過(guò)textarea控件可以輕松地創(chuàng)建多行文本輸入框，其基本語(yǔ)法格式如下：

開(kāi)發(fā)中評(píng)論輸入框一般使用可編輯的div進(jìn)行操作

<div contenteditable="true">這是一個(gè)div標(biāo)簽，點(diǎn)擊可以編輯</div>

6、下拉菜單

使用select控件定義下拉菜單的基本語(yǔ)法格式如下

<select><option>選項(xiàng)1</option><option>選項(xiàng)2</option><option>選項(xiàng)3</option>... </select>

注意：

<select></select>中至少應(yīng)包含一對(duì)<option></option>。

在option 中定義selected =" selected "時(shí)，當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)。

7、表單域

在HTML中，form標(biāo)簽被用于定義表單域，即創(chuàng)建一個(gè)表單，以實(shí)現(xiàn)用戶(hù)信息的收集和傳遞，form中的所有內(nèi)容都會(huì)被提交給服務(wù)器。創(chuàng)建表單的基本語(yǔ)法格式如下：

<form action="url地址" method="提交方式" name="表單名稱(chēng)">各種表單控件 </form>

常用屬性：

Action
在表單收集到信息后，需要將信息傳遞給服務(wù)器進(jìn)行處理，action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。

method
用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。

name
用于指定表單的名稱(chēng)，以區(qū)分同一個(gè)頁(yè)面中的多個(gè)表單。

注意：每個(gè)表單都應(yīng)該有自己表單域。

8、表單的高級(jí)應(yīng)用

在表單內(nèi)部添加disabled，即禁用該表單，或者禁用按鈕

例子：

? 提交

? 應(yīng)用場(chǎng)景：填寫(xiě)信息不完整，不同意服務(wù)選項(xiàng)等等，此時(shí)可以設(shè)置表單按鈕不可用

? readonly 只讀只能讀不能修改直接寫(xiě)在表單里面

? disable 禁用

? hidden 隱藏 (提交一些信息，想要保存在頁(yè)面中，但是不想讓用戶(hù)看到)

9、CSS復(fù)合選擇器

復(fù)合選擇器是由兩個(gè)或多個(gè)基礎(chǔ)選擇器，通過(guò)不同的方式組合而成的,目的是為了可以選擇更準(zhǔn)確更精細(xì)的目標(biāo)元素標(biāo)簽。

交集選擇器

交集選擇器由兩個(gè)選擇器構(gòu)成，其中第一個(gè)為標(biāo)簽選擇器，第二個(gè)為class選擇器，兩個(gè)選擇器之間不能有空格，如h3.special。

記憶技巧：

交集選擇器是并且的意思。即…又…的意思

h3.specila{} 比如： p.one 選擇的是：類(lèi)名為 .one 的段落標(biāo)簽。

用的相對(duì)來(lái)說(shuō)比較少，不太建議使用。

<head><meta charset="UTF-8"><title>交集選擇器</title><style>/* 標(biāo)簽名為.tag的p標(biāo)簽 */p.tag{color: red;}</style> </head> <body><p>我是p標(biāo)簽</p><p class="tag">我是類(lèi)名為tag的p標(biāo)簽</p> </body>

并集選擇器

并集選擇器（CSS選擇器分組）是各個(gè)選擇器通過(guò)逗號(hào)連接而成的，任何形式的選擇器（包括標(biāo)簽選擇器、class類(lèi)選擇器id選擇器等），都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。

記憶技巧：

并集選擇器和的意思，就是說(shuō)，只要逗號(hào)隔開(kāi)的，所有選擇器都會(huì)執(zhí)行后面樣式。

比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 這三個(gè)選擇器都會(huì)執(zhí)行顏色為紅色。通常用于集體聲明。

他和他，在一起，在一起一起的意思

<head><meta charset="UTF-8"><title>Document</title><style>h1,p{color: red;}</style> </head> <body><h1>老陳真帥</h1><p>樓上說(shuō)的對(duì)呀</p> </body>

后代選擇器

后代選擇器又稱(chēng)為包含選擇器，用來(lái)選擇元素或元素組的后代，其寫(xiě)法就是把外層標(biāo)簽寫(xiě)在前面，內(nèi)層標(biāo)簽寫(xiě)在后面，中間用空格分隔。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。

子孫后代都可以這么選擇。或者說(shuō)，它能選擇任何包含在內(nèi) 的標(biāo)簽。

示例：

子元素選擇器（子代選擇器）

子元素選擇器只能選擇作為某元素子元素的元素。其寫(xiě)法就是把父級(jí)標(biāo)簽寫(xiě)在前面，子級(jí)標(biāo)簽寫(xiě)在后面，中間跟一個(gè) > 進(jìn)行連接，注意，符號(hào)左右兩側(cè)各保留一個(gè)空格。

白話(huà)：這里的子指的是親兒子不包含孫子重孫子之類(lèi)。

子代和后代的區(qū)別，后代只要是后代的都發(fā)生變化，即爸爸選中后，兒子，孫子，只要名字一樣都發(fā)生變化。

子帶，爸爸選中后，只有兒子發(fā)生變化。

比如： .demo > h3 {color: red;} 說(shuō)明 h3 一定是demo 親兒子。 demo 元素包含著h3。 <head><meta charset="UTF-8"><title>Document</title><style>h1>strong{color: red;}</style> </head><body><h1>This is <strong>very</strong> <strong>very</strong> important.</h1><h1>This is <em>really <strong>very</strong></em> important.</h1> </body>

屬性選擇器

只要具備某個(gè)屬性，或者屬性=屬性值，就會(huì)被選中執(zhí)行某些操作。

語(yǔ)法：
[屬性]{

聲明；

}

也可以：

[屬性=”值”]{

聲明；

}

^= 以某某開(kāi)頭

$= 以某某結(jié)尾

*= 包含某某

<head><meta charset="UTF-8"><title>屬性選擇器</title><style>/* 只要包含href屬性的標(biāo)簽全部選中 */[href]{color: red;}/* href屬性的值必須完全是 'aqiyi.com' */[href='aqiyi.com']{color: rgb(161, 30, 30);}/* href屬性的值是以 h 開(kāi)頭的選中 */[href ^='h']{color: yellow;}/* href屬性的值是以 n 結(jié)束的選中 */[href$='n']{color: red;}/* href屬性值中包含baidu的選中 */[href *='baidu']{color: seagreen;}</style> </head> <body><p><a href="http://www.baidu.com">百度</a></p><p><a href="www.google.cn">谷歌</a></p><p><a href="aqiyi.com">愛(ài)奇藝</a></p></body> </html> [href ^='h']{color: yellow;}/* href屬性的值是以 n 結(jié)束的選中 */[href$='n']{color: red;}/* href屬性值中包含baidu的選中 */[href *='baidu']{color: seagreen;}</style>

百度

谷歌

愛(ài)奇藝

```

10、綜合練習(xí)-完成京東注冊(cè)頁(yè)

總結(jié)

以上是生活随笔為你收集整理的4、表单和高级选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。