Forms & Input

Form Elements (textarea, select, button)

Master additional form controls beyond input elements. Learn textarea, select dropdowns, buttons, and how to create rich, user-friendly forms.

The <textarea> Element

For multi-line text input like comments, messages, or descriptions.

HTML
<label for="message">Message:</label>
<textarea id="message" 
          name="message" 
          rows="5" 
          cols="50"
          maxlength="500"
          placeholder="Enter your message..."
          required></textarea>

<!-- Attributes: --&gt;
<!-- rows: Visible number of lines --&gt;
<!-- cols: Visible character width --&gt;
<!-- maxlength: Maximum characters --&gt;
<!-- wrap: Text wrapping (soft/hard) --&gt;
<!-- spellcheck: Enable spell checking --&gt;

Styling Textarea

HTML
<style>
textarea {
    width: 100%;
    max-width: 600px;
    padding: 12px;
    font-family: inherit;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 4px;
    resize: vertical; /* Allow vertical resize only */
}

textarea:focus {
    outline: none;
    border-color: #4CAF50;
}

/* Prevent resize */
textarea.no-resize {
    resize: none;
}
</style>

The <select> Element

Dropdown menus for selecting from predefined options.

Basic Select

HTML
<label for="country">Country:</label>
<select id="country" name="country" required>
    <option value="">-- Select Country --</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="ca">Canada</option>
    <option value="au">Australia</option>
</select>

<!-- First empty option as placeholder --&gt;
<!-- value="" makes it invalid if required --&gt;

Selected Option

HTML
<select name="color">
    <option value="red">Red</option>
    <option value="blue" selected>Blue</option>
    <option value="green">Green</option>
</select>

<!-- 'selected' attribute sets default --&gt;

Option Groups (<optgroup>)

HTML
<label for="car">Choose a car:</label>
<select id="car" name="car">
    <optgroup label="German Cars">
        <option value="mercedes">Mercedes</option>
        <option value="bmw">BMW</option>
        <option value="audi">Audi</option>
    </optgroup>
    <optgroup label="Japanese Cars">
        <option value="toyota">Toyota</option>
        <option value="honda">Honda</option>
        <option value="nissan">Nissan</option>
    </optgroup>
    <optgroup label="American Cars">
        <option value="ford">Ford</option>
        <option value="chevrolet">Chevrolet</option>
    </optgroup>
</select>

Multiple Selection

HTML
<label for="skills">Skills (Hold Ctrl/Cmd to select multiple):</label>
<select id="skills" name="skills" multiple size="5">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
    <option value="python">Python</option>
    <option value="java">Java</option>
</select>

<!-- multiple: Allow multiple selections --&gt;
<!-- size: Number of visible options --&gt;

Styling Select

HTML
<style>
select {
    width: 100%;
    max-width: 400px;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
}

select:focus {
    outline: none;
    border-color: #4CAF50;
}

/* Style option groups */
optgroup {
    font-weight: bold;
    font-style: normal;
}

option {
    padding: 8px;
}
</style>

The <button> Element

More flexible than <input type="button">.

Button Types

HTML
<!-- Submit button (default in forms) --&gt;
<button type="submit">Submit Form</button>

<!-- Regular button (requires JavaScript) --&gt;
<button type="button" onclick="doSomething()">Click Me</button>

<!-- Reset button --&gt;
<button type="reset">Clear Form</button>

Button with HTML Content

HTML
<button type="submit">
    <svg width="16" height="16"><!-- Icon --&gt;</svg>
    Submit with Icon
</button>

<button type="button">
    <img src="icon.png" alt="" width="20" height="20">
    <strong>Bold Text</strong> and more
</button>

<!-- Buttons can contain any HTML (except interactive elements) --&gt;

Disabled Button

HTML
<button type="submit" disabled>Cannot Submit</button>

<script>
// Enable/disable programmatically
const btn = document.querySelector('button');
btn.disabled = true;  // Disable
btn.disabled = false; // Enable
</script>

Styling Buttons

CSS
<style>
button {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button[type="submit"] {
    background-color: #4CAF50;
    color: white;
}

button[type="submit"]:hover {
    background-color: #45a049;
}

button[type="reset"] {
    background-color: #f44336;
    color: white;
}

button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.6;
}

button:focus {
    outline: 3px solid #4CAF50;
    outline-offset: 2px;
}
</style>

The <datalist> Element

Provides autocomplete suggestions for an input.

HTML
<label for="browser">Choose your browser:</label>
<input list="browsers" id="browser" name="browser">

<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
    <option value="Opera">
</datalist>

<!-- User can: --&gt;
<!-- - Type freely --&gt;
<!-- - Select from dropdown --&gt;
<!-- - Filter suggestions by typing --&gt;

Datalist with Descriptions

HTML
<label for="city">City:</label>
<input list="cities" id="city" name="city">

<datalist id="cities">
    <option value="New York">NY, USA</option>
    <option value="Los Angeles">CA, USA</option>
    <option value="London">UK</option>
    <option value="Paris">France</option>
    <option value="Tokyo">Japan</option>
</datalist>

<!-- Text after value shows as description --&gt;

The <fieldset> and <legend> Elements

Group related form controls for better organization.

HTML
<form>
    <fieldset>
        <legend>Personal Information</legend>
        
        <label for="fname">First Name:</label>
        <input type="text" id="fname" name="fname">
        
        <label for="lname">Last Name:</label>
        <input type="text" id="lname" name="lname">
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
    </fieldset>
    
    <fieldset>
        <legend>Delivery Address</legend>
        
        <label for="address">Street Address:</label>
        <input type="text" id="address" name="address">
        
        <label for="city">City:</label>
        <input type="text" id="city" name="city">
    </fieldset>
    
    <button type="submit">Submit</button>
</form>

Disabled Fieldset

HTML
<fieldset disabled>
    <legend>Shipping (Currently Unavailable)</legend>
    <input type="text" name="shipping">
    <button>Submit</button>
</fieldset>

<!-- All controls inside are disabled --&gt;

Styling Fieldset

CSS
<style>
fieldset {
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

legend {
    font-weight: bold;
    font-size: 1.2em;
    padding: 0 10px;
    color: #333;
}

fieldset:disabled {
    opacity: 0.6;
    background-color: #f5f5f5;
}
</style>

The <output> Element

Display calculation results or output.

HTML
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
    <label for="a">First Number:</label>
    <input type="number" id="a" name="a" value="0">
    
    <label for="b">Second Number:</label>
    <input type="number" id="b" name="b" value="0">
    
    <p>
        Result: <output name="result" for="a b">0</output>
    </p>
</form>

<!-- 'for' attribute lists related input IDs --&gt;

The <progress> Element

Show progress of a task.

HTML
<label for="file">File progress:</label>
<progress id="file" value="32" max="100">32%</progress>

<!-- Indeterminate progress (unknown duration) --&gt;
<progress></progress>

<script>
// Update progress with JavaScript
const progress = document.getElementById('file');
progress.value = 75; // Set to 75%
</script>

The <meter> Element

Represent a scalar measurement within a range.

HTML
<label for="fuel">Fuel level:</label>
<meter id="fuel" 
       min="0" 
       max="100" 
       low="25" 
       high="75" 
       optimum="80" 
       value="50">50%</meter>

<!-- Attributes: --&gt;
<!-- min, max: Range --&gt;
<!-- low, high: Low/high thresholds --&gt;
<!-- optimum: Optimal value --&gt;
<!-- value: Current value --&gt;

<!-- Browser colors based on value vs thresholds --&gt;

Usage Examples

HTML
<!-- Disk usage --&gt;
<meter min="0" max="100" value="75" low="60" high="80" optimum="40">
    75% used
</meter>

<!-- Battery level --&gt;
<meter min="0" max="100" value="30" low="20" high="80" optimum="100">
    30% charged
</meter>

<!-- Rating --&gt;
<meter min="0" max="5" value="4" optimum="5">
    4 out of 5 stars
</meter>

Complete Form Example

HTML
<form action="/submit" method="POST">
    <fieldset>
        <legend>Contact Information</legend>
        
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        
        <label for="phone">Phone:</label>
        <input type="tel" id="phone" name="phone">
    </fieldset>
    
    <fieldset>
        <legend>Message</legend>
        
        <label for="subject">Subject:</label>
        <select id="subject" name="subject" required>
            <option value="">-- Select --</option>
            <option value="general">General Inquiry</option>
            <option value="support">Technical Support</option>
            <option value="sales">Sales</option>
        </select>
        
        <label for="priority">Priority:</label>
        <input list="priorities" id="priority" name="priority">
        <datalist id="priorities">
            <option value="Low">
            <option value="Medium">
            <option value="High">
            <option value="Urgent">
        </datalist>
        
        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="5" required></textarea>
    </fieldset>
    
    <fieldset>
        <legend>Preferences</legend>
        
        <input type="checkbox" id="newsletter" name="newsletter" value="yes">
        <label for="newsletter">Subscribe to newsletter</label>
        
        <p>Contact method:</p>
        <input type="radio" id="contact-email" name="contact" value="email" checked>
        <label for="contact-email">Email</label>
        
        <input type="radio" id="contact-phone" name="contact" value="phone">
        <label for="contact-phone">Phone</label>
    </fieldset>
    
    <button type="submit">Send Message</button>
    <button type="reset">Clear Form</button>
</form>

<style>
form {
    max-width: 600px;
    margin: 0 auto;
}

fieldset {
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

legend {
    font-weight: bold;
    padding: 0 10px;
}

label {
    display: block;
    margin: 15px 0 5px;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

button {
    padding: 12px 24px;
    margin: 10px 5px 0 0;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button[type="submit"] {
    background-color: #4CAF50;
    color: white;
}

button[type="reset"] {
    background-color: #f44336;
    color: white;
}
</style>

Best Practices

âœ… Do

Use semantic form elements
Group related fields with fieldset
Provide clear labels
Use appropriate element for data type
Style for accessibility
Test keyboard navigation
Provide helpful placeholder text

âŒ Don't

Use div when semantic element exists
Forget labels on form controls
Make forms too complex
Rely only on placeholders
Forget mobile users
Disable form elements unnecessarily
Use vague button text

What's Next?

Learn advanced form features including fieldset, datalist, and output elements.

Next: Advanced Forms â†’