HTML Forms

Last Updated : 18 Apr, 2024

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.

Commonly Used Input Types in HTML Forms

In HTML forms, various input types are used to collect different types of data from users. Here are some commonly used input types:

Input Type	Description
<input type=”text“>	Defines a one-line text input field
<input type=”password“>	Defines a password field
<input type=”submit“>	Defines a submit button
<input type=”reset“>	Defines a reset button
<input type=”radio“>	Defines a radio button
<input type=”email“>	Validates that the input is a valid email address.
<input type=”number“>	Allows the user to enter a number. You can specify min, max, and step attributes for range.
<input type=”checkbox“>	Used for checkboxes where the user can select multiple options.
<input type=”date“>	Allows the user to select a date from a calendar.
<input type=”time“>	Allows the user to select a time.
<input type=”file“>	Allows the user to select a file to upload.

HTML Forms Example

1. Basic HTML Forms Example:

Example: This HTML forms collects the user personal information such as username and password with the button to submit the form.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Html Forms</title>
</head>
<body>
  <h2>HTML Forms</h2>
  <form>
    <label for="username">Username:</label><br>
    <input type="text" id="username" name="username"><br><br>
    
    <label for="password">Password:</label><br>
    <input type="password" id="password" name="password"><br><br>
    
    <input type="submit" value="Submit">
  </form>
</body> 
</html>

Output:

Basic HTML Form

2. 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:

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.

Suggest improvement

HTML URL Encoding

HTML Responsive Web Design

Share your thoughts in the comments

HTML List

HTML Graphics

HTML Tutorial References