<form class="w3-container">
<label>名字</label>
<input class="w3-input" type="text">
<label>姓</label>
<input class="w3-input" type="text">
</form>
<form class="w3-container">
<input class="w3-input" type="text">
<label>名字</label>
<input class="w3-input" type="text">
<label>姓</label>
</form>
<div class="w3-card-4">
<div class="w3-container w3-green">
<h2>標(biāo)頭</h2>
</div>
<form class="w3-container">
<label>名字</label>
<input class="w3-input" type="text">
<label>姓</label>
<input class="w3-input" type="text">
</form>
</div>
使用 w3-text-color 類為標(biāo)簽著色:
<form class="w3-container">
<label class="w3-text-blue"><b>名字</b></label>
<input class="w3-input w3-border" type="text">
<label class="w3-text-blue"><b>姓</b></label>
<input class="w3-input w3-border" type="text">
<button class="w3-btn w3-blue">注冊</button>
</form>
使用 w3-border 類以創(chuàng)建帶邊框的輸入:
使用 w3-round 類創(chuàng)建圓角邊框:
<input class="w3-input w3-border w3-round" type="text">
<input class="w3-input w3-border w3-round-large" type="text">
w3 輸入類默認(rèn)情況下具有底部邊框。如果需要無邊界輸入,請?zhí)砑?nbsp;w3-border-0 類:
<form class="w3-container w3-light-grey">
<label>名字</label>
<input class="w3-input w3-border-0" type="text">
<label>姓名</label>
<input class="w3-input w3-border-0" type="text">
</form>
隨意使用您喜歡的樣式和顏色:
<div class="w3-container w3-teal">
<h2>輸入表格</h2>
</div>
<form class="w3-container">
<label class="w3-text-teal"><b>名字</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<label class="w3-text-teal"><b>姓名</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<button class="w3-btn w3-blue-grey">注冊</button>
</form>
w3-hover-color 類增加了背景顏色輸入字段上的鼠標(biāo)懸停:
<input class="w3-input w3-hover-green" type="text">
<input class="w3-input w3-border w3-hover-red" type="text">
<input class="w3-input w3-border w3-hover-blue" type="text">
w3-animate-input 類將輸入字段的寬度為100%時(shí),它得到焦點(diǎn):
<input class="w3-input w3-animate-input" type="text" style="width:30%">
<input class="w3-check" type="checkbox" checked="checked">
<label>牛奶</label>
<input class="w3-check" type="checkbox">
<label>糖</label>
<input class="w3-check" type="checkbox" disabled>
<label>檸檬 (禁用)</label>
<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label>男</label>
<input class="w3-radio" type="radio" name="gender" value="female">
<label>女</label>
<input class="w3-radio" type="radio" name="gender" value="" disabled>
<label>未知 (已禁用)</label>
<select class="w3-select" name="option">
<option value="" disabled selected>選擇你的選項(xiàng)</option>
<option value="1">選項(xiàng) 1</option>
<option value="2">選項(xiàng) 2</option>
<option value="3">選項(xiàng) 3</option>
</select>
在此示例中,我們使用W3.CSS的自適應(yīng)網(wǎng)格系統(tǒng)使輸入顯示在同一行上(在較小的屏幕上,它們將以100%的寬度水平堆疊)。稍后您將詳細(xì)了解。
<div class="w3-row-padding">
<div class="w3-third">
<input class="w3-input w3-border" type="text" placeholder="一">
</div>
<div class="w3-third">
<input class="w3-input w3-border" type="text" placeholder="二">
</div>
<div class="w3-third">
<input class="w3-input w3-border" type="text" placeholder="三">
</div>
</div>
<div class="w3-row-padding">
<div class="w3-half">
<label>名字</label>
<input class="w3-input w3-border" type="text" placeholder="二">
</div>
<div class="w3-half">
<label>姓</label>
<input class="w3-input w3-border" type="text" placeholder="三">
</div>
</div>
<div class="w3-rest">
<input class="w3-input w3-border" name="first" type="text" placeholder="名字">
</div>
更多建議: