整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
們在上網(wǎng)的時(shí)候，經(jīng)常有一些登錄界面進(jìn)行輸入賬號(hào)和密碼，以及我們在網(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ì)在地址欄里顯示出來，并且有長度限制，而post表單所傳的內(nèi)容不會(huì)在地址欄顯示出來，并且可以視為沒有長度限制。一般系統(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)頁中的選擇題也是用的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)注[送心]
單標(biāo)簽
常見的語句：
form：表單標(biāo)簽格式
作用：用來收集用戶輸入信息如：登入、注冊、搜索商品等
action：開始網(wǎng)址
method：get和post等等
text （明文）：用戶名格式
password ：（密文）密碼
radio ：單選框 性別格式 性別是單選,單選類型是radio,注意name要加上sex
checkbox：復(fù)選框
textarea：文本框
file：上傳文件
select：下拉選擇框
button：按鈕
reset：重置
submit：提交
詳解：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表單標(biāo)簽</title>
</head>
<body>
<form action="https://hao.360.com/" method="post">
<p>賬號(hào):<input type="text" /></p>
<p>密碼：<input type="password" /></p>
<p>
<input type="radio" name="sex" id="" />男
<input type="radio" name="sex" id="" />女
</p>
<p>
<input type="checkbox" name="" id="" value="" />linux
<input type="checkbox" name="" id="" value="" />mysql
<input type="checkbox" name="" id="" value="" />html
<input type="checkbox" name="" id="" value="" />python
</p>
<p>學(xué)歷
<select name="">
<option value="">請(qǐng)選擇學(xué)歷</option>
<option value="">小學(xué)</option>
<option value="">初中</option>
<option value="">高中</option>
<option value="">大學(xué)</option>
</select>
</p>
<p>自我介紹：<br />
<textarea name="" rows="10" cols="30"></textarea>
</p>
<input type="reset" value="重置"/>
<input type="submit" value="提交"/>
<input type="button" value="按鈕"/>
</form>
</body>
</html>
eb前端開發(fā)課程：html表單-單選框多選框。
講課人：波波老師。
radio單選框、checkbox多選框，這兩個(gè)只需要選擇不需要輸入。現(xiàn)在來看一下單選框和多選框的演示。
·首先是單選框，輸入一個(gè)inputradio，可以看到默認(rèn)給了兩個(gè)屬性：name和id。把name="radio"，id="radio1"。當(dāng)然光一個(gè)單選框也沒有用，還需要給它加一個(gè)label，for-"radio1"，這個(gè)4abel for="">。這里要放上前面這個(gè)(單選框的id)"radio1"，代表著這是它的label。
·這里輸入一個(gè)單選選項(xiàng)一，可以看到點(diǎn)擊單選選項(xiàng)一，同時(shí)也可以把radio選中，這就是label的作用。多復(fù)制幾個(gè)，可以看到選擇"選項(xiàng)一"它被選中了，選擇選項(xiàng)二，選項(xiàng)二被選中的時(shí)候，選項(xiàng)一的選中狀態(tài)就被去掉了，它們?nèi)齻€(gè)只能選中一個(gè)，這就叫單選框。它們是以什么為同組標(biāo)準(zhǔn)的？就是以name為同組標(biāo)準(zhǔn)。
·假設(shè)現(xiàn)在再建一個(gè)單選框<input>，選擇name="radioradio"，id"radio4"，label for="radio4"。單選選項(xiàng)4，選擇1234，選4的時(shí)候?qū)η懊嫒齻€(gè)選項(xiàng)不產(chǎn)生影響，這就是單選框。
·接著再來看多選框，多選框，input：checkbox，4abel for="checkbox1"。選項(xiàng)一，把這行復(fù)制一下，可以看多選框也輸入完了。點(diǎn)擊多選框，可以看到它是可以同時(shí)選擇多個(gè)項(xiàng)目的，這就是多選框。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
