們?cè)谏暇W(wǎng)的時(shí)候,經(jīng)常有一些登錄界面進(jìn)行輸入賬號(hào)和密碼,以及我們?cè)诰W(wǎng)上填一些信息,這些功能的實(shí)現(xiàn)都是通過(guò)表單來(lái)完成的,今天我們就來(lái)講講表單。
表單不是指一個(gè)標(biāo)簽,而是指一類(lèi)標(biāo)簽。
我們表單里所有的內(nèi)容都要寫(xiě)在<form></form>標(biāo)簽中 form的action屬性是將表單所填的內(nèi)容發(fā)送到想要發(fā)送的后臺(tái),而method屬性有兩個(gè)值,分別是get和post。get和post的主要區(qū)別是get表單所傳的內(nèi)容會(huì)在地址欄里顯示出來(lái),并且有長(zhǎng)度限制,而post表單所傳的內(nèi)容不會(huì)在地址欄顯示出來(lái),并且可以視為沒(méi)有長(zhǎng)度限制。一般系統(tǒng)默認(rèn)get。當(dāng)然get和post的細(xì)區(qū)別還是有的,在這里我就不贅述了。
其中最重要的是<input>標(biāo)簽,input標(biāo)簽也是單標(biāo)簽。input標(biāo)簽的type屬性值不同,其產(chǎn)生的作用也不同:如:<input type="text">產(chǎn)生的是文本框,一般都是我們登錄時(shí)輸入的賬號(hào)那樣的文本框。<input type="password">,產(chǎn)生的是密碼框,一般都是我們登錄時(shí)輸入密碼的那個(gè)框框。<input type="submit">產(chǎn)生的是提交框,一般是我們登錄的那個(gè)按鈕。這些標(biāo)簽都有value屬性,但只有提交框用最合適用,因?yàn)槲谋究蚝兔艽a框雖然也會(huì)展示出來(lái),但效果卻差強(qiáng)人意,我們一般都用placeholder屬性替代它。
不知大家有沒(méi)有在網(wǎng)上做過(guò)選擇題,作者是做過(guò)的。網(wǎng)頁(yè)中的選擇題也是用的input。
input的type屬性值還有radio,是單選框,有幾個(gè)選項(xiàng)就寫(xiě)幾個(gè)input,但要注意每一個(gè)input里都要寫(xiě)相同的name屬性和屬性值,這樣的話瀏覽器才會(huì)知道這些是同一道題。
既然有單選題那一定也有多選題了,type的checked屬性是多選框,其和單選的用法一樣,也都要注意name一樣的為一道題,還有一個(gè)屬性是checked=“checked”,這個(gè)可以設(shè)定默認(rèn)選擇的選項(xiàng)。
我們也一定遇到過(guò)選擇文字就能勾選而不用非得去點(diǎn)選框的情況,其實(shí)input選擇框只有被點(diǎn)擊的時(shí)候才能選中,但有的時(shí)候太小不容易點(diǎn)擊甚至有的根本沒(méi)有顯示出來(lái),這樣的話用戶(hù)體驗(yàn)就會(huì)非常的差,所以我們引進(jìn)了一個(gè)標(biāo)簽:<label></label>標(biāo)簽,這個(gè)標(biāo)簽可以實(shí)現(xiàn)點(diǎn)擊文字就進(jìn)行選擇的功能,用法就是將input標(biāo)簽和文字寫(xiě)在同一個(gè)label標(biāo)簽中,注意每一個(gè)選項(xiàng)寫(xiě)一起。
我們來(lái)看一下代碼和結(jié)果:
作者已經(jīng)盡量去說(shuō)清楚了,歡迎大家批評(píng)指教,希望多多關(guān)注[送心]
<style>/* Tooltip 容器 */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* 懸停元素上顯示點(diǎn)線 */
}
/* Tooltip 文本 */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* 定位 */
position: absolute;
z-index: 1;
}
/* 鼠標(biāo)移動(dòng)上去后顯示提示框 */
.tooltip:hover .tooltiptext {
visibility: visible;
}</style>
<div class="tooltip">鼠標(biāo)移動(dòng)到這
<span class="tooltiptext">提示文本</span>
</div>
ooltip提示框
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
淡入效果
現(xiàn)效果
代碼:
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。