More on forms

 

Common Attributes

action

The action attribute specifies the URL where the form data should be sent after submission.

<form action="/submit.php" method="POST">
</form>

method

The method attribute defines how data is sent. The two most common methods are GET and POST.

<form action="/submit.php" method="POST">
</form>

name

The name attribute specifies the name for the form element, making it easier to reference in scripts or the server-side code.

<input type="text" name="username">

New HTML5 Attributes

placeholder

This attribute provides a hint to the user as to what can be entered in the field.

<input type="text" placeholder="Enter your username">

required

The required attribute makes a field mandatory to fill out.

<input type="text" required>

autofocus

The autofocus attribute automatically focuses the cursor on the particular input when the page loads.

<input type="text" autofocus>

HTML5 Validation Attributes

required

As mentioned above, this attribute makes a field mandatory.

<input type="text" required>

pattern

The pattern attribute specifies a regular expression that the input must match to be valid.

<input type="text" pattern="[a-zA-Z0-9]+">

• Range Input (<input type="range">): Allows users to select a value from a specified range using a slider. 

• Date Input (<input type=" date">): Provides a date picker for selecting dates.

• Time Input (<input type="time">): Allows users to input a specific time.

• Color Input (<input type="color">): Presents a color picker for selecting colors.

• URL Input (<input type="url">): Validates and formats input as a URL.

• Search Input (<input type="search">): Provides a search input field with a clear button.

•  Month Input (<input type="month">): Allows users to select a month and year.

• Week Input (<input type=" week">): Allows users to select a specific week and year.

 <form action="#">

        <div>

            <label for="range">Range: </label>

            <input type="range" name="volume" min="0" max="100" value="80" />

        </div>

        <br />

        <div>

            <label for="birthdate">birthdate: </label>

            <input type="date" name="birthdate" />

        </div>

        <br />

        <div>

            <label for="appointment time">appointmentTime: </label>

            <input type="time" name="appointment time" />

        </div>

        <br />

        <div>

            <label for="favoriteColor">favoriteColor: </label>

            <input type="color" name="favoriteColor" />

        </div>

        <br />

        <div>

            <label for="website">website: </label>

            <input type="url" name="website" placeholder="Enter website URL" />

        </div>

        <br />

        <div>

            <label for="searchQuery">searchQuery: </label>

            <input type="search" name="searchQuery" placeholder="Search..." />

        </div>

        <br />

        <div>

            <label for="expiryDate">Month & Year: </label>

            <input type="month" name="expiryDate" />

        </div>

        <br />

        <div>

            <label for="week">vacationWeek: </label>

            <input type="week" name="vacationWeek" />

        </div>

    </form>