W3.CSS Input (输入)
顶部标签
实例
<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>标头</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 输入类默认情况下具有底部边框。如果需要无边界输入，请添加 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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
图标标签
实例
<div class="w3-rest">
<input class="w3-input w3-border" name="first" type="text" placeholder="名字">
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
更多建议：