W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

W3.CSS 输入框



Input Form










顶部标签

Input Form

Example

<form class="w3-container">

<label>First Name</label>
<input class="w3-input" type="text">

<label>Last Namel</label>
<input class="w3-input" type="text">

</form>
尝试一下 »

底部标签

Input Form

Example

<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


Example

<div class="w3-card-4">

<div class="w3-container w3-green">
  <h2>Header</h2>
</div>

<form class="w3-container">

<label class="w3-label">First Name</label>
<input class="w3-input" type="text">

<label class="w3-label">Last Name</label>
<input class="w3-input" type="text">

</form>

</div>
尝试一下 »

绿色标签

class="w3-label" 的标签默认是绿色的:


Example

<form class="w3-container">

<label class="w3-label">First Name</label>
<input class="w3-input" type="text">

<label class="w3-label">Last Name</label>
<input class="w3-input" type="text">

</form>
尝试一下 »

验证标签

验证标签为红色,当输入有效时变为绿色。

要使标签验证,请在 w3-label 类中添加一个 w3-validate 类。


Example

<form class="w3-container">

<input class="w3-input" type="text" required>
<label class="w3-label w3-validate">First Name</label>

<input class="w3-input" type="text" required>
<label class="w3-label w3-validate">Last Name</label>

<input class="w3-input" type="email" required>
<label class="w3-label w3-validate">Email</label>

</form>
尝试一下 »

彩色标签

使用 w3-text-color 类可以为你的标签添加颜色:

Register

Example

<form class="w3-container">

<label class="w3-label w3-text-blue"><b>First Name</b></label>
<input class="w3-input w3-border" type="text">
 
<label class="w3-label 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 类用于创建带有边框的输入框:


Example

<input class="w3-input w3-border" type="text">
尝试一下 »

圆角边框

使用 w3-round 类可以创建带有圆角边框的输入框:


Example

<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 类:


Example

<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>
尝试一下 »

颜色

关于创建输入框,可随意使用你最喜欢的风格和颜色:

Input Form

Register

Example

<div class="w3-container w3-teal">
  <h2>Input Form</h2>
</div>

<form class="w3-container">
  <label class="w3-label w3-text-teal"><b>First Name</b></label>
  <input class="w3-input w3-border w3-light-grey" type="text">

  <label class="w3-label 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 类可为输入框添加一个背景颜色当鼠标悬停时:

Example

<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%:

Example

<input class="w3-input w3-animate-input" type="text" style="width:30%">
尝试一下 »

Checkboxes

Example

<input class="w3-check" type="checkbox" checked="checked">
<label class="w3-validate">Milk</label>

<input class="w3-check" type="checkbox">
<label class="w3-validate">Sugar</label>

<input class="w3-check" type="checkbox" disabled>
<label class="w3-validate">Lemon (Disabled)</label>
尝试一下 »

Radio Buttons

Example

<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label class="w3-validate">Male</label>

<input class="w3-radio" type="radio" name="gender" value="female">
<label class="w3-validate">Female</label>

<input class="w3-radio" type="radio" name="gender" value="" disabled>
<label class="w3-validate">Don't know (Disabled)</label>
尝试一下 »

选择选项

Example

<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>
尝试一下 »

带有边框的选择菜单

Example

<select class="w3-select w3-border" name="option">
尝试一下 »

网格中的元素

Example

<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>
尝试一下 »

Two column layout with labels:

Example

<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>
尝试一下 »