<input>: The HTML input element

I. Description

The HTML <input> element is used to allow users to input information into a webpage. The <input> element is very flexible and allows users to input information in a variety of ways.

The input element can accept text, numbers, dates, a single or multiple options from a <select> element.

II. Examples

<!DOCTYPE html>
<html>
    <head>
        <title>legend Example Page</title>
    </head>
    <body>
        <h1>Restaurant Reservation</h1>
        <form id="create_reservation" action="/api/account/reservation/create" method="POST">
            <fieldset>
                <legend>Mandatory Reservation Information</legend>
                <input type="date" name="date" id="reservation_date"/>
                <label for="location">Select A Location:</label>
                <select name="location" id="location">
                    <option value="location_1">University Location</option>
                    <option value="location_2">Downtown Location</option>
                    <option value="location_3">Upper West Location</option>
                </select>
                <input type="number" name="party_count" id="party_count"/>
            </fieldset>
            <fieldset>
                <legend>Optional Reservation Information</legend>
                <label for="payment_method">Select A Payment Method:</label>
                <select name="payment_method" id="payment_method">
                    <option value="method_1">Credit Card</option>
                    <option value="method_2">Debit Card</option>
                    <option value="method_3">Personal Check</option>
                    <option value="method_4">Cash</option>
                    <option value="method_5">Crypto Currency</option>
                </select>
                <p>Select a Seating Location:</p>
                <input type="radio" id="outside" name="seating_location" value="outside"/>
                <label for="outside">Outside/Patio</label>
                <input type="radio" id="inside" name="seating_location" value="inside"/>
                <label for="inside">Inside</label>
            </fieldset>
        </form>
    </body>
</html>

This document was last updated: