輸入表單
頂級品牌
輸入表單
例
<form class="w3-container">
<label>First Name</label>
<input class="w3-input" type="text">
<label>Last Namel</label>
<input class="w3-input" type="text">
</form>
試一試» 底部標籤
輸入表單
例
<form class="w3-container">
<input class="w3-input" type="text">
<label>First Name</label>
<input class="w3-input" type="text">
<label>Last
Name</label>
</form>
試一試» 輸入卡
頭
例
<div class="w3-card-4">
<div class="w3-container
w3-green">
<h2>Header</h2>
</div>
<form class="w3-container">
<label
class="w3-label">First Name</label>
<input class="w3-input"
type="text">
<label
class="w3-label">Last Name</label>
<input class="w3-input"
type="text">
</form>
</div> 試一試» 綠色標籤
帶班=“W3標籤 ”標籤在默認情況下是綠色的：
例
<form class="w3-container">
<label
class="w3-label">First Name</label>
<input class="w3-input"
type="text">
<label
class="w3-label">Last Name</label>
<input class="w3-input"
type="text">
</form> 試一試» 驗證標籤
驗證標籤是紅色的，並且當輸入變成有效變為綠色。
為了使標籤驗證，加W3-驗證類的W3-Label類。
例
<form class="w3-container">
<input
class="w3-input" type="text" required>
<label class="w3-label
w3-validate">First Name</label>
<input class="w3-input" type="text" required>
<label class="w3-label
w3-validate">Last Name</label>
<input class="w3-input" type="email" required>
<label class="w3-label
w3-validate">Email</label>
</form> 試一試» 彩色標籤
使用任何W3-文本顏色的類上色您的標籤：
例
<form class="w3-container">
<label
class="w3-label w3-text-blue"><b>First Name</b></label>
<input class="w3-input w3-border" type="text">
<label
class="w3-label w3-text-blue"><b>Last Name</b></label>
<input class="w3-input w3-border" type="text">
<button class="w3-btn
w3-blue">Register</button>
</form> 試一試» 輸入鑲上
添加W3邊界類來創建邊框輸入：
邊框圓角
使用任何W3輪類來創建圓角邊框：
例
<input class="w3-input w3-border w3-round"
type="text">
<input class="w3-input w3-border
w3-round-large"
type="text"> 試一試» 無邊界輸入
W3的輸入類有默認情況下，底部邊框。 如果你想要一個無國界的輸入，添加W3-邊界0級：
例
<form class="w3-container w3-light-grey">
<label>First
Name</label>
<input class="w3-input w3-border-0" type="text">
<label>Last Name</label>
<input class="w3-input
w3-border-0" type="text">
</form> 試一試» 顏色
隨意使用自己喜歡的款式和顏色：
輸入表單
例
<div class="w3-container w3-teal">
<h2>Input Form</h2>
</div>
<form class="w3-container">
<label class="w3-label w3-text-teal"><b>First Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<label class="w3-label
w3-text-teal"><b>Last Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<button class="w3-btn w3-blue-grey">Register</button>
</form> 試一試» Hoverable投入
在W3-hover- 色類增加了一個背景色在鼠標懸停在輸入字段：
例
<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-動畫輸入級轉換的輸入域的寬度為100％，當它獲得焦點：
例
<input class="w3-check" type="checkbox" checked="checked">
<label class="w3-validate">Milk</label>
<input class="w3-check"
type="checkbox">
<label class="w3-validate">Sugar</label>
<input class="w3-check" type="checkbox" disabled>
<label class="w3-validate">Lemon (Disabled)</label> 試一試» 例
<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label class="w3-validate">Male</label>
<input class="w3-radio"
type="radio" name="gender" value="female">
<label class="w3-validate">Female</label>
<input class="w3-radio"
type="radio" name="gender" value="" disabled>
<label class="w3-validate">Don't know (Disabled)</label> 試一試» 選擇選項
例
<select class="w3-select" name="option">
<option value="" disabled
selected>Choose your option</option>
<option value="1">Option
1</option>
<option value="2">Option 2</option>
<option
value="3">Option 3</option>
</select> 試一試» 鑲上選擇菜單
在網格表單元素
在這個例子中，我們使用W3.CSS'響應電網系統，使輸入出現在同一行（在較小的屏幕，他們將與水平100％的寬度疊加）。 您將了解更多關於這一點。
例
<div class="w3-row-padding">
<div class="w3-third">
<input class="w3-input w3-border" type="text" placeholder="One">
</div>
<div class="w3-third">
<input
class="w3-input w3-border" type="text" placeholder="Two">
</div>
<div class="w3-third">
<input class="w3-input
w3-border" type="text" placeholder="Three">
</div>
</div> 試一試» 兩欄佈局標籤：
例
<div class="w3-row-padding">
<div class="w3-half">
<label>First Name</label>
<input
class="w3-input w3-border" type="text" placeholder="Two">
</div>
<div class="w3-half">
<label>Last
Name</label>
<input class="w3-input
w3-border" type="text" placeholder="Three">
</div>
</div> 試一試»