們?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)效果

代碼：