W3.CSS — Forms

Basic Form

<form>
    <label>First Name:</label>
    <input class="w3-input w3-border" type="text">
    
    <label>Last Name:</label>
    <input class="w3-input w3-border" type="text">
    
    <button class="w3-button w3-blue">Submit</button>
</form>

Form Styles

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

<!-- Input with padding -->
<input class="w3-input w3-border w3-padding" type="text" placeholder="With padding">

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

Form Layout

<form>
    <div class="w3-row-padding">
        <div class="w3-half">
            <label>First Name</label>
            <input class="w3-input w3-border" type="text">
        </div>
        <div class="w3-half">
            <label>Last Name</label>
            <input class="w3-input w3-border" type="text">
        </div>
    </div>
    
    <label>Email</label>
    <input class="w3-input w3-border" type="email">
    
    <label>Message</label>
    <textarea class="w3-input w3-border"></textarea>
    
    <button class="w3-button w3-blue">Submit</button>
</form>

Form Examples

<!-- Login form -->
<div class="w3-container w3-card-4">
    <h2>Login</h2>
    <form>
        <label>Username</label>
        <input class="w3-input w3-border" type="text" placeholder="Enter username">
        
        <label>Password</label>
        <input class="w3-input w3-border" type="password" placeholder="Enter password">
        
        <div class="w3-row">
            <input type="checkbox" class="w3-check"> Remember me
        </div>
        
        <button class="w3-button w3-blue w3-section">Login</button>
    </form>
</div>

Form Validation

<form>
    <label>Email (required)</label>
    <input class="w3-input w3-border w3-border-red" type="email" required>
    
    <label>Password (min 8 chars)</label>
    <input class="w3-input w3-border" type="password" minlength="8" required>
    
    <button class="w3-button w3-blue">Submit</button>
</form>

Mini Practice

Create HTML code that:

1. Creates a basic form with inputs
2. Adds a login form
3. Creates a contact form
4. Uses form validation

Up Next

Next: Learn about W3.CSS Inputs.