W3.CSS 輸入
輸入表單
頂部標籤
輸入表單
示例
<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>
自己試試 »
輸入卡片
Header
示例
<div class="w3-card-4">
<div class="w3-container w3-green">
<h2>標題</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 類來為您的標籤著色
示例
<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 類可建立帶邊框的輸入框
圓角邊框
使用任何 w3-round 類可建立圓角邊框
示例
<input class="w3-input w3-border w3-round" type="text">
<input class="w3-input w3-border w3-round-large" type="text">
自己試試 »
無邊框輸入框
w3-input 類預設帶有底部邊框。如果您想要無邊框的輸入框，請新增 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 類會在滑鼠懸停時為輸入欄位新增背景顏色
示例
<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%
示例
<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>選擇您的選項</option>
<option value="1">選項 1</option>
<option value="2">選項 2</option>
<option value="3">選項 3</option>
</select>
自己試試 »
帶邊框的選擇選單
網格中的表單元素
在此示例中，我們使用 W3.CSS 的響應式網格系統使輸入框顯示在同一行（在較小的螢幕上，它們將以 100% 的寬度水平堆疊）。您將在稍後瞭解更多資訊。
示例
<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>
自己試試 »
