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>
自己试试 »
