W3.CSS Input

Toggle navigation
TUTORIAL HOME
W3.CSS Input
❮ Previous Next ❯
Input Form

Name 

Email 

Subject 


 Milk
 Sugar
 Lemon (Disabled)

 Male
 Female
 Don't know (Disabled)
Send   ❯

Top Labels
Input Form
First Name
Last Name
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>
»
Bottom Labels
Input Form

First Name

Last Name
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>
»
Input Cards
Header
First Name

Last Name


Example
<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>
»
Colored Labels
Use any of the w3-text-color classes to color your labels:

First Name

Last Name

Register

Example
<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>
»
Bordered Input
Add the w3-border class to create bordered inputs:

First Name

Last Name


Example
<input class="w3-input w3-border" type="text">
»
Rounded Borders
Use any of the w3-round classes to create rounded borders:

First Name

Last Name


Example
<input class="w3-input w3-border w3-round" type="text">

<input class="w3-input w3-border w3-round-large" type="text">
»
Borderless Input
The w3-input class has a bottom border by default. If you want a borderless input, add the w3-border-0 class:

First Name

Last Name


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>
»
Colors
Feel free to use your favorite styles and colors:

Input Form
First Name

Last Name

Register

Example
<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>
»
Hoverable inputs
The w3-hover-color classes adds a background color to the input field on mouse-over:

Input Form
First name:
Last Name:
Subject: 
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">
»
Animated Inputs
The w3-animate-input class transforms the width of an input field to 100% when it gets focus:


Click on me!


Click on me!

Example
<input class="w3-input w3-animate-input" type="text" style="width:30%">
»
Checkboxes
 Milk

 Sugar

 Lemon (Disabled)

Example
<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>
»
Radio Buttons
 Male

 Female

 Don't know (Disabled)

Example
<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 Options

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>
»
Bordered Select Menu

Example
<select class="w3-select w3-border" name="option">
»
Form Elements in a Grid
In this example, we use W3.CSS' Responsive Grid System to make the inputs appear on the same line (on smaller screens, they will stack horizontally with 100% width). You will learn more about this later.


One

Two

Three
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>
»
Grid with Labels
First Name
One
Last Name
Two
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>
»
Icon Labels
Contact Us

Name

Email

Phone

Message

»


❮ Previous Next ❯