1.Text input(文本輸入框)是用來獲得用戶輸入的絕佳方式掖看。
格式:
<input type="text">
input元素是自關(guān)閉的
詳細解析: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來構(gòu)建可以跟服務(wù)器交互的Web表單(form)膝擂,通過給你的form元素添加一個action屬性來達到此目的。
action屬性的值指定了表單提交到服務(wù)器的地址
格式:
<form action="/url-where-you-want-to-submit-form-data"></form>
4.讓我們來為你的form添加一個submit(提交)按鈕鸳慈,點擊這個按鈕饱溢,表單中的數(shù)據(jù)將會被發(fā)送到你通過action屬性指定的地址上。
格式:
<button type="submit">this button submits the form</button>
在form元素內(nèi)
5.當(dāng)你設(shè)計表單時走芋,你可以指定某些選項為必填項(required)绩郎,只有當(dāng)用戶填寫了該選項后,用戶才能夠提交表單翁逞。
例如嗽上,如果你想把一個文本輸入字段設(shè)置為必填項,在你的input元素中加上required屬性就可以了熄攘。
格式:
<input type="text" required>
注意:required屬性在Safari瀏覽器中不起作用,請用其他瀏覽器來學(xué)習(xí)彼念,推薦使用Chrome
6.多選一的場景就用radio button(單選按鈕)
每一個單選按鈕都應(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的輸入框的另一種類型。
每一個復(fù)選按鈕都應(yīng)該嵌套進label元素中哲思。
所有關(guān)聯(lián)的復(fù)選按鈕應(yīng)該具有相同的name屬性洼畅。
格式:
<label><input type="checkbox" name="personality"> Loving</label>
在form元素內(nèi)
8.使用checked屬性,你可以設(shè)置復(fù)選按鈕和單選按鈕默認被選中棚赔。
為此帝簇,只需在input元素中添加屬性checked
格式:
<input type="radio" name="test-name" checked>