Forms and Validations

Overview

You'll learn how to build a basic HTML form, about HTML form elements, styling forms, help users re-enter data, ensure the form is accessible and secure, how to test your forms, and about specific form types.

Form elements

These are the following HTML <form> elements:

  • <label>: It defines label for <form> elements.

  • <input>: It is used to get input data from the form in various types such as text, password, email, etc by changing its type.

  • <button>: It defines a clickable button to control other elements or execute a functionality.

  • <select>: It is used to create a drop-down list.

  • <textarea>: It is used to get input long text content.

  • <fieldset>: It is used to draw a box around other form elements and group the related data.

  • <legend>: It defines a caption for fieldset elements.

  • <datalist>: It is used to specify pre-defined list options for input controls.

  • <output>: It displays the output of performed calculations.

  • <option>: It is used to define options in a drop-down list.

  • <optgroup>: It is used to define group-related options in a drop-down list.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learn HTML Forms</title>
    <style>
       form {
        display: flex;
        flex-direction: column;
        width: 300px;
        gap: 10px;
       } 
    </style>
</head>
<body>

    <h2>Forms In HTML</h2>
    <p>All the essential form tags in HTML.</p>
    
    <form>
        <label for="">Name:</label>
        <input type="text" placeholder="Enter your name" required>

        <label for="">Password:</label>
        <input type="password" placeholder="Enter your password" required>

        <label for="">Email:</label>
        <input type="email" placeholder="Enter your email" required>

        <label for="">Radio</label>
        <div>
            <label for="gender">Male</label>
            <input type="radio" name="gender" value="male">
            <label for="gender">Female</label>
            <input type="radio" name="gender" value="female">
        </div>

        <label for="">Checkbox</label>
        <div>
            <input type="checkbox">
            <input type="checkbox">
        </div>
        

        <label for="">Range Selector</label>
        <input type="range">

        <label for="">Date Selector</label>
        <input type="date">

        <label for="">Search Event</label>
        <input type="search">

        <label for="">Uploading a File</label>
        <input type="file">

        <textarea name="" id="" cols="30" rows="10"></textarea>

        <label for="">Submit Form Button Event</label>
        <input type="submit">
    </form>

</body>
</html>

PreviousSemantic HTMLNextAccessibility

Last updated