4、表单和高级选择器
表單和高級(jí)選擇器
1、什么是表單
表單用于收集用戶的信息，是瀏覽器和用戶之間溝通的橋梁。
就是你在注冊(cè)賬號(hào)時(shí)，讓你輸手機(jī)號(hào)，輸密碼那個(gè)小框框，明白了吧
還不明白？ 來 給你個(gè)圖
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-CGdfat5P-1629718059913)(.\assetis\表單.png)]
現(xiàn)實(shí)中的表單，類似我們?nèi)ャy行辦理信用卡填寫的單子。 如下圖
目的是為了收集用戶信息。
在我們網(wǎng)頁中， 我們也需要跟用戶進(jìn)行交互，收集用戶資料，此時(shí)也需要表單。
在HTML中，一個(gè)完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個(gè)部分構(gòu)成。
表單控件：
? 包含了具體的表單功能項(xiàng)，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、重置按鈕等。
提示信息：
? 一個(gè)表單中通常還需要包含一些說明性的文字，提示用戶進(jìn)行填寫和操作。
表單域：
? 他相當(dāng)于一個(gè)容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無法傳送到后臺(tái)服務(wù)器。
2、input 控件(重點(diǎn))
在上面的語法中，<input />標(biāo)簽為單標(biāo)簽，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型。除了type屬性之外，<input />標(biāo)簽還可以定義很多其他的屬性，其常用屬性如下表所示。
<body><form method="post" action="a.html"><p> 名字：<input name="name" type="text"> </p><p> 密碼：<input name="pass" type="password"> </p><p><input type="submit" name="Button" value="提交"><button>提交</button></p><p><input type="image" src="./圖片.png" style="width: 100px;height: 40px;"><input type="reset" name="Reset" value="重填"></p></form></body>3、radio單選框多個(gè)選項(xiàng)只能選擇一個(gè)的
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-Lfj2Ztp5-1629718059915)(.\assetis\radio.png )]
解決方法，給兩個(gè)input框添加一個(gè)相同的name,關(guān)聯(lián)起來，這樣就只能選擇一個(gè)了
<body><form action="">請(qǐng)選擇性別：<input type="radio" name="sex">男<input type="radio" name="sex">女</form> </body>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è)表單元素綁定。
<label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"> <body><form action="">請(qǐng)選擇性別：<input type="radio" name="sex" id="man"><label for="man">男</label> <input type="radio" name="sex" id="woman"><label for="woman">女</label></form> </body>type=”checkbox”的時(shí)候，復(fù)選框。可重復(fù)選擇，應(yīng)用場(chǎng)景，接受協(xié)議
type=”button”的時(shí)候，是登陸框。想讓文字出現(xiàn)在登陸框里面，需要在input里面添加value屬性，value后面跟要添加的文字。
例：
效果：[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-NJUQUdcu-1629718059917)(.\assetis\wps1.jpg)]
? 按鈕效果也可以直接用butto雙標(biāo)簽，效果一樣，注冊(cè)
?
? input框設(shè)置提醒字符，打字的時(shí)候會(huì)自動(dòng)消失，比如某些輸入框會(huì)提醒，請(qǐng)輸入 賬號(hào)等
? 語法：在input標(biāo)簽內(nèi)添加placeholder=”要提示的內(nèi)容”
請(qǐng)輸入姓名：<input type="text" placeholder="請(qǐng)輸入用戶名:">5、textarea控件(文本域 了解)
如果需要輸入大量的信息，就需要用到<textarea></textarea>標(biāo)簽。通過textarea控件可以輕松地創(chuàng)建多行文本輸入框，其基本語法格式如下：
<textarea cols="每行中的字符數(shù)" rows="顯示的行數(shù)">文本內(nèi)容 </textarea>開發(fā)中評(píng)論輸入框一般使用可編輯的div進(jìn)行操作
<div contenteditable="true">這是一個(gè)div標(biāo)簽，點(diǎn)擊可以編輯</div>6、下拉菜單
使用select控件定義下拉菜單的基本語法格式如下
<select><option>選項(xiàng)1</option><option>選項(xiàng)2</option><option>選項(xiàng)3</option>... </select>注意：
7、表單域
在HTML中，form標(biāo)簽被用于定義表單域，即創(chuàng)建一個(gè)表單，以實(shí)現(xiàn)用戶信息的收集和傳遞，form中的所有內(nèi)容都會(huì)被提交給服務(wù)器。創(chuàng)建表單的基本語法格式如下：
<form action="url地址" method="提交方式" name="表單名稱">各種表單控件 </form>常用屬性：
在表單收集到信息后，需要將信息傳遞給服務(wù)器進(jìn)行處理，action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。
用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。
用于指定表單的名稱，以區(qū)分同一個(gè)頁面中的多個(gè)表單。
注意： 每個(gè)表單都應(yīng)該有自己表單域。
8、表單的高級(jí)應(yīng)用
例子：
? 提交
? 應(yīng)用場(chǎng)景：填寫信息不完整，不同意服務(wù)選項(xiàng)等等，此時(shí)可以設(shè)置表單按鈕不可用
? readonly 只讀 只能讀 不能修改 直接寫在表單里面
? disable 禁用
? hidden 隱藏 (提交一些信息，想要保存在頁面中，但是不想讓用戶看到)
?
9、CSS復(fù)合選擇器
復(fù)合選擇器是由兩個(gè)或多個(gè)基礎(chǔ)選擇器，通過不同的方式組合而成的,目的是為了可以選擇更準(zhǔn)確更精細(xì)的目標(biāo)元素標(biāo)簽。
交集選擇器
交集選擇器由兩個(gè)選擇器構(gòu)成，其中第一個(gè)為標(biāo)簽選擇器，第二個(gè)為class選擇器，兩個(gè)選擇器之間不能有空格，如h3.special。
記憶技巧：
交集選擇器 是 并且的意思。 即…又…的意思
h3.specila{} 比如： p.one 選擇的是： 類名為 .one 的 段落標(biāo)簽。用的相對(duì)來說比較少，不太建議使用。
<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">我是類名為tag的p標(biāo)簽</p> </body>并集選擇器
并集選擇器（CSS選擇器分組）是各個(gè)選擇器通過逗號(hào)連接而成的，任何形式的選擇器（包括標(biāo)簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。
記憶技巧：
并集選擇器 和 的意思， 就是說，只要逗號(hào)隔開的，所有選擇器都會(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>樓上說的對(duì)呀</p> </body>后代選擇器
后代選擇器又稱為包含選擇器，用來選擇元素或元素組的后代，其寫法就是把外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在后面，中間用空格分隔。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。
子孫后代都可以這么選擇。 或者說，它能選擇任何包含在內(nèi) 的標(biāo)簽。
示例：
<style>h1 em{color: red;}</style> </head><body><h1>This is a <em>important</em> heading</h1><h1>我是第二個(gè)h1 <span>span包裹起來了 <em>我是em</em></span></h1><p>This is a <em>important</em> paragraph.</p> </body>子元素選擇器（子代選擇器）
子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級(jí)標(biāo)簽寫在前面，子級(jí)標(biāo)簽寫在后面，中間跟一個(gè) > 進(jìn)行連接，注意，符號(hào)左右兩側(cè)各保留一個(gè)空格。
白話： 這里的子 指的是 親兒子 不包含孫子 重孫子之類。
子代和后代的區(qū)別，后代只要是后代的都發(fā)生變化，即爸爸選中后，兒子，孫子，只要名字一樣都發(fā)生變化。
子帶，爸爸選中后，只有兒子發(fā)生變化。
比如： .demo > h3 {color: red;} 說明 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í)行某些操作。
語法：
[屬性]{
聲明；
}
也可以：
[屬性=”值”]{
聲明；
}
^= 以某某開頭
$= 以某某結(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 開頭的選中 */[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">愛奇藝</a></p></body> </html> [href ^='h']{color: yellow;}/* href屬性的值是以 n 結(jié)束的選中 */[href$='n']{color: red;}/* href屬性值中包含baidu的 選中 */[href *='baidu']{color: seagreen;}</style>百度
谷歌
愛奇藝
```10、綜合練習(xí)-完成京東注冊(cè)頁
總結(jié)
以上是生活随笔為你收集整理的4、表单和高级选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS3给网页穿上美丽的外衣
- 下一篇： 为什么要学jquery