們?cè)谏暇W(wǎng)的時(shí)候，經(jīng)常有一些登錄界面進(jìn)行輸入賬號(hào)和密碼，以及我們?cè)诰W(wǎng)上填一些信息，這些功能的實(shí)現(xiàn)都是通過表單來完成的，今天我們就來講講表單。

表單不是指一個(gè)標(biāo)簽，而是指一類標(biāo)簽。

我們表單里所有的內(nèi)容都要寫在<form></form>標(biāo)簽中 form的action屬性是將表單所填的內(nèi)容發(fā)送到想要發(fā)送的后臺(tái)，而method屬性有兩個(gè)值，分別是get和post。get和post的主要區(qū)別是get表單所傳的內(nèi)容會(huì)在地址欄里顯示出來，并且有長(zhǎng)度限制，而post表單所傳的內(nèi)容不會(huì)在地址欄顯示出來，并且可以視為沒有長(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ì)展示出來，但效果卻差強(qiáng)人意，我們一般都用placeholder屬性替代它。

不知大家有沒有在網(wǎng)上做過選擇題，作者是做過的。網(wǎng)頁(yè)中的選擇題也是用的input。

input的type屬性值還有radio，是單選框，有幾個(gè)選項(xiàng)就寫幾個(gè)input，但要注意每一個(gè)input里都要寫相同的name屬性和屬性值，這樣的話瀏覽器才會(huì)知道這些是同一道題。

既然有單選題那一定也有多選題了，type的checked屬性是多選框，其和單選的用法一樣，也都要注意name一樣的為一道題，還有一個(gè)屬性是checked=“checked”，這個(gè)可以設(shè)定默認(rèn)選擇的選項(xiàng)。

我們也一定遇到過選擇文字就能勾選而不用非得去點(diǎn)選框的情況，其實(shí)input選擇框只有被點(diǎn)擊的時(shí)候才能選中，但有的時(shí)候太小不容易點(diǎn)擊甚至有的根本沒有顯示出來，這樣的話用戶體驗(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)簽和文字寫在同一個(gè)label標(biāo)簽中，注意每一個(gè)選項(xiàng)寫一起。

我們來看一下代碼和結(jié)果：

作者已經(jīng)盡量去說清楚了，歡迎大家批評(píng)指教，希望多多關(guān)注[送心]

TML如何制作在透明輸入框里面添加圖標(biāo)

最近在寫一個(gè)律師推薦前臺(tái)的網(wǎng)站，在上面搜索框這里出現(xiàn)了問題，我想把搜索的圖標(biāo)放在搜索框里面，但是弄了半天都不大如意……

話不多說，我們直接進(jìn)入主題 ：

基本思路

其實(shí)就把輸入框與后面的圖標(biāo)一起放在一個(gè)div里面，然后將輸入框的border設(shè)置為0px，最后設(shè)置div的border為最終的外邊框

我們最直接上代碼：HTML：

<div class="search">
        <form action="http://baidu.com">
           <input type="text" placeholder="請(qǐng)輸入查找的律師或?qū)ｉL(zhǎng)">
               <span>
                 <a href="#"><img src="img/icon1.png" alt=""></a>
               </span>
          </form>
</div>

CSS:這里是設(shè)置外面整個(gè)div的樣式

.search {
    width: 250px;
    height: 35px;
    border: 1px solid white;
    border-radius: 30px;
}

這里是設(shè)置里面的輸入框的長(zhǎng)寬、boder為0px、里面的字體大小、點(diǎn)擊不會(huì)亮邊框(outline:none)設(shè)置透明度這里使用rgba()，最后一個(gè)屬性就是透明度（在0-1之間 ）