Open In App

HTML Forms

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

HTML Forms employ the <form> element to gather input data with interactive controls. It encompasses various input types such as text, numbers, email, password, checkboxes, radio buttons, and submit buttons. Essentially, it’s a container for diverse input elements facilitating user interaction.

Syntax:

<form>
<!--form elements-->
</form>

Form Elements

These are the following HTML <form> elements:

Elements

Descriptions

<label>It defines labels 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.

HTML Forms Example

Example: This HTML form collects user personal information including name, email, password, gender, date of birth, and address. It features proper styling for input fields and submission button.

HTML
<!DOCTYPE html>
<html>
    <head>
        <title>HTML Form</title>
        <style>
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                margin: 0;
                background-color: #f0f0f0;
            }

            form {
                width: 400px;
                background-color: #fff;
                padding: 20px;
                border-radius: 8px;
                box-shadow: 0 0 10px
                    rgba(0, 0, 0, 0.1);
            }

            fieldset {
                border: 1px solid black;
                padding: 10px;
                margin: 0;
            }

            legend {
                font-weight: bold;
                margin-bottom: 10px;
            }

            label {
                display: block;
                margin-bottom: 5px;
            }

            input[type="text"],
            input[type="email"],
            input[type="password"],
            textarea,
            input[type="date"] {
                width: calc(100% - 20px);
                padding: 8px;
                margin-bottom: 10px;
                box-sizing: border-box;
                border: 1px solid #ccc;
                border-radius: 4px;
            }

            input[type="radio"] {
                margin-left: 20px;
            }

            input[type="submit"] {
                padding: 10px 20px;

                border-radius: 5px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <form>
            <fieldset>
                <legend>
                    User personal information
                </legend>
                <label
                    >Enter your full name</label
                >
                <input type="text" name="name" />
                <label>Enter your email</label>
                <input
                    type="email"
                    name="email"
                />
                <label>Enter your password</label>
                <input
                    type="password"
                    name="pass"
                />
                <label
                    >Confirm your password</label
                >
                <input
                    type="password"
                    name="confirmPass"
                />
                <label>Enter your gender</label>
                <input
                    type="radio"
                    name="gender"
                    value="male"
                />Male
                <input
                    type="radio"
                    name="gender"
                    value="female"
                />Female
                <input
                    type="radio"
                    name="gender"
                    value="others"
                />Others
                <label
                    >Enter your Date of
                    Birth</label
                >
                <input type="date" name="dob" />
                <label>Enter your Address:</label>
                <textarea
                    name="address"
                ></textarea>
                <input
                    type="submit"
                    value="submit"
                />
            </fieldset>
        </form>
    </body>
</html>

Output:

HTMLForm3

HTML Forms Example Output

Features

  • Facilitates user input collection through various elements.
  • Utilizes <form> tags to structure input elements.
  • Defines actions for data submission upon form completion.
  • Supports client-side validation for enhanced user experience.


Last Updated : 13 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads