W3.CSS — Inputs

Basic Input

<input class="w3-input w3-border" type="text" placeholder="Text input">

Input Types

<!-- Text -->
<input class="w3-input w3-border" type="text" placeholder="Text">

<!-- Password -->
<input class="w3-input w3-border" type="password" placeholder="Password">

<!-- Email -->
<input class="w3-input w3-border" type="email" placeholder="Email">

<!-- Number -->
<input class="w3-input w3-border" type="number" placeholder="Number">

<!-- Date -->
<input class="w3-input w3-border" type="date">

<!-- Time -->
<input class="w3-input w3-border" type="time">

<!-- URL -->
<input class="w3-input w3-border" type="url" placeholder="URL">

<!-- Tel -->
<input class="w3-input w3-border" type="tel" placeholder="Phone">

<!-- Search -->
<input class="w3-input w3-border" type="search" placeholder="Search">

<!-- Color -->
<input class="w3-input w3-border" type="color">

<!-- Range -->
<input class="w3-input w3-border" type="range">

<!-- File -->
<input class="w3-input w3-border" type="file">

Input Styles

<!-- Bordered -->
<input class="w3-input w3-border" type="text" placeholder="Bordered">

<!-- Round -->
<input class="w3-input w3-border w3-round" type="text" placeholder="Round">

<!-- Underlined -->
<input class="w3-input w3-border-bottom" type="text" placeholder="Underlined">

<!-- With icon -->
<div class="w3-row">
    <div class="w3-col" style="width:50px">
        <i class="fa fa-user"></i>
    </div>
    <div class="w3-rest">
        <input class="w3-input w3-border" type="text" placeholder="With icon">
    </div>
</div>

Input with Label

<label>Username</label>
<input class="w3-input w3-border" type="text" placeholder="Enter username">

<label>Email</label>
<input class="w3-input w3-border" type="email" placeholder="Enter email">

Input Examples

<!-- Search box -->
<div class="w3-bar">
    <input class="w3-input w3-border w3-round" type="text" style="width:300px">
    <button class="w3-button w3-blue">Search</button>
</div>

<!-- Input with validation -->
<label>Email (required)</label>
<input class="w3-input w3-border" type="email" required>

Input Utilities

Class	Description
w3-input	Input styling
w3-border	Add border
w3-round	Round corners
w3-border-bottom	Bottom border only
w3-padding	Add padding
w3-margin	Add margin

Mini Practice

Create HTML code that:

1. Creates different input types
2. Adds input with label
3. Creates a search box
4. Uses input validation

Up Next

Next: Learn about W3.CSS Checkboxes.