1.Text input(文本輸入框)是用來(lái)獲得用戶輸入的絕佳方式。
格式:
<input type="text">
input元素是自關(guān)閉的
詳細(xì)解析:http://www.w3school.com.cn/tags/tag_input.asp
2.占位符(placeholder text)是用戶在input(輸入)框輸入任何東西之前放置在input(輸入)框中的預(yù)定義文本。
格式:
<input type="text" placeholder="this is placeholder text">
3.使用HTML來(lái)構(gòu)建可以跟服務(wù)器交互的Web表單(form),通過(guò)給你的form元素添加一個(gè)action屬性來(lái)達(dá)到此目的。
action屬性的值指定了表單提交到服務(wù)器的地址
格式:
<form action="/url-where-you-want-to-submit-form-data"></form>
4.讓我們來(lái)為你的form添加一個(gè)submit(提交)按鈕,點(diǎn)擊這個(gè)按鈕,表單中的數(shù)據(jù)將會(huì)被發(fā)送到你通過(guò)action屬性指定的地址上。
格式:
<button type="submit">this button submits the form</button>
在form元素內(nèi)
5.當(dāng)你設(shè)計(jì)表單時(shí),你可以指定某些選項(xiàng)為必填項(xiàng)(required),只有當(dāng)用戶填寫了該選項(xiàng)后,用戶才能夠提交表單。
例如,如果你想把一個(gè)文本輸入字段設(shè)置為必填項(xiàng),在你的input元素中加上required屬性就可以了。
格式:
<input type="text" required>
注意:required屬性在Safari瀏覽器中不起作用,請(qǐng)用其他瀏覽器來(lái)學(xué)習(xí),推薦使用Chrome
6.多選一的場(chǎng)景就用radio button(單選按鈕)
每一個(gè)單選按鈕都應(yīng)該嵌套在它自己的label(標(biāo)簽)元素中。
注意:所有關(guān)聯(lián)的單選按鈕應(yīng)該使用相同的name屬性
格式:
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
在form元素內(nèi)
7.checkboxes(復(fù)選按鈕)。
復(fù)選按鈕是input的輸入框的另一種類型。
每一個(gè)復(fù)選按鈕都應(yīng)該嵌套進(jìn)label元素中。
所有關(guān)聯(lián)的復(fù)選按鈕應(yīng)該具有相同的name屬性。
格式:
<label><input type="checkbox" name="personality"> Loving</label>
在form元素內(nèi)
8.使用checked屬性,你可以設(shè)置復(fù)選按鈕和單選按鈕默認(rèn)被選中。
為此,只需在input元素中添加屬性checked
格式:
<input type="radio" name="test-name" checked>