W3.CSS 输入

输入表单










Top Labels

输入表单

实例

<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>
亲自试一试 »

Bottom Labels

输入表单

实例

<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>
亲自试一试 »

输入卡片

Header


实例

<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-text-color 类为标签着色:

Register

实例

<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-border 类来创建带边框的输入:


实例

<input class="w3-input w3-border" type="text">
亲自试一试 »

圆形边框

使用任何 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>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>
亲自试一试 »

颜色

随意使用您喜欢的样式和颜色:

输入表单

Register

实例

<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-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-input w3-animate-input" type="text" style="width:30%">
亲自试一试 »

复选框

实例

<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>
亲自试一试 »

边框选择菜单

实例

<select class="w3-select w3-border" name="option">
亲自试一试 »

表单元素在网格中

在此示例中,我们使用 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>
亲自试一试 »

图标标签

Contact Us


亲自试一试 »