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>
自己试试 »
输入卡片
标题
示例
<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>
自己试试 »
