HTML 21 💻 input and textarea elements - KandZ

The <input> and <textarea> elements are the most essential building blocks of HTML forms. They allow users to enter, select, and submit data in various ways. Understanding their different types and attributes is crucial for creating effective and user-friendly forms.

The Input Element `<input>`

The <input> element is a powerful and versatile form control. Its behavior changes dramatically based on the type attribute, making it suitable for collecting almost any kind of user input.

Basic Structure:

<input type="text" id="name" name="name" placeholder="Your name" required>

Common Attributes:

Attribute	Purpose	Example
`type`	Specifies the input type	`type="text"`
`name`	Identifies the input (sent to server)	`name="username"`
`id`	Unique identifier (for labels, JS)	`id="username"`
`value`	Sets a default value	`value="John"`
`placeholder`	Provides a hint or example	`placeholder="Enter your name"`
`required`	Makes the field mandatory	`required`
`disabled`	Disables the input field	`disabled`
`readonly`	Makes the field read-only	`readonly`
`min` / `max`	Sets minimum/maximum values	`min="0" max="100"`
`step`	Sets the increment step	`step="5"`

Input Types

1. Text Input `type="text"`

Creates a single-line text field that accepts letters, numbers, and symbols.

<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your name" required>

Browser Display:
[ Your name ] (single-line text box)

2. Password Input `type="password"`

Creates a single-line text field that hides the characters as they are typed.

<label for="password">Password:</label>
<input type="password" id="password" name="password">

Browser Display:
[ •••••••• ] (dots replace actual characters)

3. Number Input `type="number"`

Creates a numeric input field with up/down arrows (spinners).

<label for="age">Age:</label>
<input type="number" id="age" name="age" value="19" min="0" max="120">

Browser Display:
[ 19 ⬆⬇ ] (number field with spinners)

4. Date and Time Inputs

Date Input `type="date"`

<label for="date">Date:</label>
<input type="date" id="date" name="date">

Browser Display:
[ 📅 MM/DD/YYYY ] (date picker)

Time Input `type="time"`

<label for="time">Time:</label>
<input type="time" id="time" name="time">

Browser Display:
[ ⏰ –:– ] (time picker)

DateTime-Local Input `type="datetime-local"`

<label for="datetime">Date and Time:</label>
<input type="datetime-local" id="datetime" name="datetime">

Browser Display:
[ 📅 MM/DD/YYYY –:– ] (combined picker)

5. Range Input `type="range"`

Creates a slider control for selecting a value from a range.

<label for="range">Range:</label>
<input type="range" id="range" name="range" 
       min="0" max="10" step="1" value="9">

Browser Display:
[ ━━━━━━━━●━━━━━━ ] (slider at position 9)

Attributes:

min — Minimum value (default: 0)
max — Maximum value (default: 100)
step — Increment step (default: 1)
value — Initial position

6. Email Input `type="email"`

Creates an input field for email addresses with built-in validation.

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="your@email.com">

Browser Display:
[ your@email.com ] (validates email format)

7. URL Input `type="url"`

Creates an input field for URLs with built-in validation.

<label for="url">Website:</label>
<input type="url" id="url" name="url" placeholder="https://example.com">

Browser Display:
[ https://example.com ] (validates URL format)

8. Hidden Input `type="hidden"`

Creates an invisible input that stores data to be submitted with the form.

<input type="hidden" name="id" value="1">

Purpose:

Store data that users don’t need to see or edit (e.g., user ID, session tokens)
Pass data between pages

9. Checkbox Input `type="checkbox"`

Creates a toggleable checkbox that allows users to select/deselect an option.

<input type="checkbox" id="option1" name="exampleCheckboxGroup">
<label for="option1">Option 1</label>

<input type="checkbox" id="option2" name="exampleCheckboxGroup">
<label for="option2">Option 2</label>

<input type="checkbox" id="option3" name="exampleCheckboxGroup">
<label for="option3">Option 3</label>

Browser Display:
☑ Option 1
☐ Option 2
☐ Option 3

Key Points:

Allows multiple selections
Use the same name for group, but each must have a unique value
Checked state sends the value to the server

10. Radio Buttons `type="radio"`

Creates radio buttons that allow users to select only one option from a group.

<input type="radio" id="option1" name="shippingMethod" value="next-day">
<label for="option1">Next-day delivery (extra fee)</label>

<input type="radio" id="option2" name="shippingMethod" value="standard">
<label for="option2">Standard delivery</label>

<input type="radio" id="option3" name="shippingMethod" value="pickup">
<label for="option3">Pick up in store</label>

Browser Display:
○ Next-day delivery (extra fee)
○ Standard delivery
○ Pick up in store

Key Points:

Allows only one selection per group
Elements with the same name belong to the same group
The selected value is sent to the server

The Textarea Element `<textarea>`

The <textarea> element creates a multi-line text input for longer text entries.

<label for="userInput">Enter your message:</label>
<textarea id="userInput" name="userInput" rows="4" cols="50"></textarea>

Browser Display:
┌────────────────────────────────────────────────┐
│ │
│ │
│ │
│ │
└────────────────────────────────────────────────┘

Attributes:

Attribute	Purpose	Example
`rows`	Number of visible text lines	`rows="4"`
`cols`	Width in characters	`cols="50"`
`maxlength`	Maximum number of characters	`maxlength="500"`
`minlength`	Minimum number of characters	`minlength="10"`
`placeholder`	Hint text	`placeholder="Type your message..."`
`required`	Makes the field mandatory	`required`
`disabled`	Disables the textarea	`disabled`
`readonly`	Makes the field read-only	`readonly`

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input and Textarea Elements</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            margin-top: 30px;
            border-left: 4px solid #28a745;
            padding-left: 15px;
        }

        .form-container {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            margin: 20px 0;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            font-weight: 600;
            margin-bottom: 5px;
            color: #333;
        }

        input[type="text" ],
        input[type="email" ],
        input[type="password" ],
        input[type="number" ],
        input[type="date" ],
        input[type="datetime-local" ],
        input[type="time" ],
        input[type="url" ],
        textarea,
        select {
            width: 100%;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 6px;
            font-size: 1em;
            transition: border-color 0.3s;
            box-sizing: border-box;
            font-family: inherit;
        }

        input:focus,
        textarea:focus,
        select:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
        }

        input[type="range" ] {
            width: 100%;
            padding: 5px 0;
            border: none;
        }

        .checkbox-group,
        .radio-group {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            align-items: center;
            padding: 5px 0;
        }

        .checkbox-group label,
        .radio-group label {
            display: inline;
            font-weight: normal;
            margin: 0 5px 0 0;
            cursor: pointer;
        }

        .checkbox-group input,
        .radio-group input {
            margin-right: 5px;
            cursor: pointer;
        }

        textarea {
            resize: vertical;
            min-height: 80px;
        }

        .example-box {
            background: #e9ecef;
            padding: 15px;
            border-radius: 6px;
            margin: 10px 0;
            border-left: 4px solid #007bff;
        }

        code {
            background: #f4f4f4;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 0.95em;
            color: #dc3545;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 12px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        .btn-group {
            margin-top: 20px;
        }

        button {
            background: #007bff;
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 6px;
            font-size: 1em;
            cursor: pointer;
            transition: background 0.3s;
        }

        button:hover {
            background: #0056b3;
        }

        button[type="reset" ] {
            background: #6c757d;
            margin-left: 10px;
        }

        button[type="reset" ]:hover {
            background: #545b62;
        }

        .inline-fields {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        .inline-fields .form-group {
            flex: 1;
            min-width: 200px;
        }

        .range-value {
            font-weight: bold;
            color: #007bff;
            font-size: 1.2em;
        }

        .field-demo {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 6px;
        }
    </style>
</head>
<body>

    <h1>Input and Textarea Elements</h1>
    <p>A comprehensive guide to form input types and the textarea element.</p>

    <!-- ====== MAIN FORM ====== -->
    <div class="form-container">
        <form method="post" action="#">

            <!-- Hidden Input -->
            <input type="hidden" name="id" value="1">

            <h2>1. Basic Input Types</h2>

            <!-- Text Input -->
            <div class="form-group">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" placeholder="Your full name" required>
                <small>Required field — single-line text</small>
            </div>

            <!-- Password Input -->
            <div class="form-group">
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" placeholder="Enter a strong password">
                <small>Characters are hidden</small>
            </div>

            <!-- Number Input -->
            <div class="form-group">
                <label for="age">Age:</label>
                <input type="number" id="age" name="age" value="19" min="0" max="120" step="1">
                <small>Min: 0, Max: 120</small>
            </div>

            <hr>

            <h2>2. Date and Time Inputs</h2>

            <div class="inline-fields">
                <!-- Date Input -->
                <div class="form-group">
                    <label for="date">Date:</label>
                    <input type="date" id="date" name="date">
                </div>

                <!-- Time Input -->
                <div class="form-group">
                    <label for="time">Time:</label>
                    <input type="time" id="time" name="time">
                </div>

                <!-- DateTime-Local Input -->
                <div class="form-group">
                    <label for="datetime">Date and Time:</label>
                    <input type="datetime-local" id="datetime" name="datetime">
                </div>
            </div>

            <hr>

            <h2>3. Range Input</h2>

            <div class="form-group">
                <label for="range">Range (0 to 10):</label>
                <div class="field-demo">
                    <input type="range" id="range" name="range" 
                           min="0" max="10" step="1" value="9"
                           oninput="document.getElementById('range-value').textContent = this.value">
                    <span class="range-value" id="range-value">9</span>
                </div>
                <small>Slide to select a value</small>
            </div>

            <hr>

            <h2>4. Validation Inputs</h2>

            <div class="inline-fields">
                <!-- Email Input -->
                <div class="form-group">
                    <label for="email">Email:</label>
                    <input type="email" id="email" name="email" placeholder="your@email.com">
                    <small>Validates email format</small>
                </div>

                <!-- URL Input -->
                <div class="form-group">
                    <label for="url">URL:</label>
                    <input type="url" id="url" name="url" placeholder="https://example.com">
                    <small>Validates URL format</small>
                </div>
            </div>

            <hr>

            <h2>5. Textarea (Multi-line Input)</h2>

            <div class="form-group">
                <label for="userInput">Enter your message:</label>
                <textarea id="userInput" name="userInput" rows="4" cols="50" 
                          placeholder="Type your message here..." 
                          maxlength="500"></textarea>
                <small>Max 500 characters</small>
            </div>

            <hr>

            <h2>6. Checkbox Inputs</h2>

            <div class="form-group">
                <label>Select your interests (multiple choices):</label>
                <div class="checkbox-group">
                    <input type="checkbox" id="option1" name="interests" value="html">
                    <label for="option1">HTML</label>

                    <input type="checkbox" id="option2" name="interests" value="css">
                    <label for="option2">CSS</label>

                    <input type="checkbox" id="option3" name="interests" value="js">
                    <label for="option3">JavaScript</label>

                    <input type="checkbox" id="option4" name="interests" value="python">
                    <label for="option4">Python</label>
                </div>
                <small>You can select multiple options</small>
            </div>

            <hr>

            <h2>7. Radio Buttons</h2>

            <div class="form-group">
                <label>Select shipping method (choose one):</label>
                <div class="radio-group">
                    <input type="radio" id="shipping1" name="shippingMethod" value="next-day">
                    <label for="shipping1">Next-day delivery (extra fee)</label>

                    <input type="radio" id="shipping2" name="shippingMethod" value="standard" checked>
                    <label for="shipping2">Standard delivery</label>

                    <input type="radio" id="shipping3" name="shippingMethod" value="pickup">
                    <label for="shipping3">Pick up in store</label>
                </div>
                <small>Only one option can be selected</small>
            </div>

            <div class="btn-group">
                <button type="submit">Submit</button>
                <button type="reset">Reset</button>
            </div>

        </form>
    </div>

    <!-- ====== REFERENCE TABLE ====== -->
    <h2>8. Input Type Reference</h2>

    <table class="reference-table">
        <thead>
            <tr>
                <th>Type</th>
                <th>Description</th>
                <th>Use Case</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>text</code></td>
                <td>Single-line text</td>
                <td>Names, addresses, general text</td>
            </tr>
            <tr>
                <td><code>password</code></td>
                <td>Hidden characters</td>
                <td>Passwords, sensitive data</td>
            </tr>
            <tr>
                <td><code>number</code></td>
                <td>Numeric input</td>
                <td>Age, quantity, price</td>
            </tr>
            <tr>
                <td><code>email</code></td>
                <td>Email address</td>
                <td>Email fields with validation</td>
            </tr>
            <tr>
                <td><code>url</code></td>
                <td>URL input</td>
                <td>Website URLs with validation</td>
            </tr>
            <tr>
                <td><code>date</code></td>
                <td>Date picker</td>
                <td>Birthdays, appointments</td>
            </tr>
            <tr>
                <td><code>time</code></td>
                <td>Time picker</td>
                <td>Scheduling, time selection</td>
            </tr>
            <tr>
                <td><code>datetime-local</code></td>
                <td>Date + time picker</td>
                <td>Events, appointments</td>
            </tr>
            <tr>
                <td><code>range</code></td>
                <td>Slider control</td>
                <td>Volume, rating, price range</td>
            </tr>
            <tr>
                <td><code>checkbox</code></td>
                <td>Toggle checkbox</td>
                <td>Multiple selections, toggles</td>
            </tr>
            <tr>
                <td><code>radio</code></td>
                <td>Radio button</td>
                <td>Single selection, gender, shipping</td>
            </tr>
            <tr>
                <td><code>hidden</code></td>
                <td>Hidden input</td>
                <td>IDs, tokens, session data</td>
            </tr>
        </tbody>
    </table>

    <hr>

    <!-- ====== COMPARISON: CHECKBOX vs RADIO ====== -->
    <h2>9. Checkbox vs Radio Buttons</h2>

    <div style="display: flex; flex-wrap: wrap; gap: 20px;">
        <!-- Checkbox Example -->
        <div style="flex: 1; min-width: 250px; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
            <h3 style="color: #007bff;">✅ Checkbox</h3>
            <p><small>Multiple selections allowed</small></p>
            <div class="checkbox-group">
                <input type="checkbox" id="cb1" name="fruits" value="apple">
                <label for="cb1">🍎 Apple</label>
                <input type="checkbox" id="cb2" name="fruits" value="banana">
                <label for="cb2">🍌 Banana</label>
                <input type="checkbox" id="cb3" name="fruits" value="orange">
                <label for="cb3">🍊 Orange</label>
            </div>
        </div>

        <!-- Radio Example -->
        <div style="flex: 1; min-width: 250px; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
            <h3 style="color: #28a745;">🔘 Radio Button</h3>
            <p><small>Only one selection allowed</small></p>
            <div class="radio-group">
                <input type="radio" id="r1" name="fruit" value="apple">
                <label for="r1">🍎 Apple</label>
                <input type="radio" id="r2" name="fruit" value="banana">
                <label for="r2">🍌 Banana</label>
                <input type="radio" id="r3" name="fruit" value="orange">
                <label for="r3">🍊 Orange</label>
            </div>
        </div>
    </div>

    <hr>

    <!-- ====== BEST PRACTICES ====== -->
    <h2>10. Best Practices</h2>

    <div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
        <h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
        <ul>
            <li>Always use <code>&lt;label&gt;</code> with <code>for</code> for accessibility</li>
            <li>Use <code>type="email"</code> and <code>type="url"</code> for automatic validation</li>
            <li>Use <code>placeholder</code> to provide examples</li>
            <li>Use <code>required</code> for mandatory fields</li>
            <li>Set appropriate <code>min</code>, <code>max</code>, and <code>step</code> for numeric inputs</li>
            <li>Group related radio buttons with the same <code>name</code></li>
            <li>Use <code>textarea</code> for longer text entries</li>
        </ul>
    </div>

    <div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
        <h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
        <ul>
            <li>Don't use <code>type="text"</code> for emails, numbers, or dates</li>
            <li>Don't forget the <code>name</code> attribute — data won't be sent without it!</li>
            <li>Don't use <code>placeholder</code> as a substitute for labels</li>
            <li>Don't rely only on client-side validation — always validate on the server</li>
            <li>Don't use <code>type="number"</code> for phone numbers (use <code>type="tel"</code>)</li>
            <li>Don't use <code>type="password"</code> without also using <code>autocomplete="off"</code> in sensitive contexts</li>
        </ul>
    </div>

</body>
</html>

Quick Reference

Input Type	Description	Attributes
`text`	Single-line text	`placeholder`, `maxlength`
`password`	Hidden text	`placeholder`, `maxlength`
`number`	Numeric input	`min`, `max`, `step`, `value`
`email`	Email with validation	`placeholder`, `multiple`
`url`	URL with validation	`placeholder`
`date`	Date picker	`min`, `max`, `value`
`time`	Time picker	`min`, `max`, `step`, `value`
`datetime-local`	Date + time picker	`min`, `max`, `step`, `value`
`range`	Slider control	`min`, `max`, `step`, `value`
`checkbox`	Toggle checkbox	`checked`, `value`
`radio`	Single selection	`checked`, `value`
`hidden`	Invisible data	`value`

Textarea vs Input

Feature	`<textarea>`	`<input>`
Lines	Multi-line	Single-line
Resize	Yes (CSS/User)	No
Attributes	`rows`, `cols`	`size`, `maxlength`
Default Content	Between tags	`value` attribute
Use Case	Messages, comments	Short entries

Pro Tip: Choose the right input type for your data. Using the correct type provides automatic validation, improves user experience on mobile devices, and makes your forms more accessible. Always pair inputs with proper labels for accessibility!

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!

The Input Element <input>

Basic Structure:

Common Attributes:

Input Types

1. Text Input type="text"

2. Password Input type="password"

3. Number Input type="number"

4. Date and Time Inputs

Date Input type="date"

Time Input type="time"

DateTime-Local Input type="datetime-local"

5. Range Input type="range"

6. Email Input type="email"

7. URL Input type="url"

8. Hidden Input type="hidden"

9. Checkbox Input type="checkbox"

10. Radio Buttons type="radio"

The Textarea Element <textarea>