W3.CSS Input (輸入)
頂部標(biāo)簽
實(shí)例
<form class="w3-container">
<label>名字</label>
<input class="w3-input" type="text">
<label>姓</label>
<input class="w3-input" type="text">
</form>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
底部標(biāo)簽
實(shí)例
<form class="w3-container">
<input class="w3-input" type="text">
<label>名字</label>
<input class="w3-input" type="text">
<label>姓</label>
</form>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
卡片式輸入
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
彩色標(biāo)簽
使用 w3-text-color 類為標(biāo)簽著色：
實(shí)例
<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">注冊(cè)</button>
</form>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
帶邊框的輸入
使用 w3-border 類以創(chuàng)建帶邊框的輸入：
圓角邊框
使用 w3-round 類創(chuàng)建圓角邊框：
實(shí)例
<input class="w3-input w3-border w3-round" type="text">
<input class="w3-input w3-border w3-round-large" type="text">
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
無邊界輸入
w3 輸入類默認(rèn)情況下具有底部邊框。如果需要無邊界輸入，請(qǐng)?zhí)砑?nbsp;w3-border-0 類：
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
彩色輸入框
隨意使用您喜歡的樣式和顏色：
實(shí)例
<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">注冊(cè)</button>
</form>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
懸停輸入
w3-hover-color 類增加了背景顏色輸入字段上的鼠標(biāo)懸停：
實(shí)例
<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">
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
動(dòng)畫輸入
w3-animate-input 類將輸入字段的寬度為100％時(shí)，它得到焦點(diǎn)：
實(shí)例
<input class="w3-input w3-animate-input" type="text" style="width:30%">
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
選框
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
單選按鈕
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
選擇菜單
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
帶邊框的選擇菜單
網(wǎng)格中的表單元素
在此示例中，我們使用W3.CSS的自適應(yīng)網(wǎng)格系統(tǒng)使輸入顯示在同一行上（在較小的屏幕上，它們將以100％的寬度水平堆疊）。稍后您將詳細(xì)了解。
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
帶標(biāo)簽的網(wǎng)格
實(shí)例
<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>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
圖標(biāo)標(biāo)簽
實(shí)例
<div class="w3-rest">
<input class="w3-input w3-border" name="first" type="text" placeholder="名字">
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
更多建議：