W3.CSS 输入
输入表格
顶部标签
输入表格
示例
<form class="w3-container">
<label>First Name</label>
<input class="w3-input" type="text">
<label>Last Name</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>First Name</label>
<input class="w3-input" type="text">
<label>Last Name</label>
<input class="w3-input" type="text">
</form>
</div>
亲自试一试»
彩色标签
使用任何w3-文本颜色为标签着色的类：
示例
<form class="w3-container">
<label class="w3-text-blue"><b>First Name</b></label>
<input class="w3-input w3-border" type="text">
<label class="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-input 类默认有一个底部边框。如果您想要无边框输入，请添加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-text-teal"><b>First Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<label class="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>
亲自试一试»
可悬停输入
这个w3-悬停-颜色类在鼠标悬停时向输入字段添加背景颜色：
示例
<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>Milk</label>
<input class="w3-check" type="checkbox">
<label>Sugar</label>
<input class="w3-check" type="checkbox" disabled>
<label>Lemon (Disabled)</label>
亲自试一试»
示例
<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label>Male</label>
<input class="w3-radio" type="radio" name="gender" value="female">
<label>Female</label>
<input class="w3-radio" type="radio" name="gender" value="" disabled>
<label>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>
亲自试一试»