HTML Forms

Last Updated : 23 May, 2025

HTML forms, defined using the <form> Tags are essential for collecting user input on web pages. They incorporate a variety of interactive controls such as text fields, numeric inputs, email fields, password fields, checkboxes, radio buttons, and submit buttons. Over 85% of websites rely on forms to gather data from users, making them a fundamental component of modern web development.

Syntax:

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

Basic HTML Forms Example

index.html

<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>

Output:

HTML Forms

Code Overview:

HTML Structure:The code has a basic HTML structure with a title "HTML Forms."
Heading: The <h2> tag displays "HTML Forms" as the main heading on the page.
Form Tag: The <form> tag defines a form for user input.
Username Field: A text input field for the username with a label.
Password Field & Submit: A password input field and a submit button to send the form data.

Advance HTML Forms

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

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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;
        }
        .gender-group {
            margin-bottom: 10px;
        }
        .gender-group label {
            display: inline-block;
            margin-left: 10px;
        }
        input[type="radio"] {
            margin-left: 10px;
            vertical-align: middle;
        }
        input[type="submit"] {
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <form>
        <fieldset>
            <legend>User Personal Information</legend>
            <label for="name">Enter your full name:</label>
            <input type="text" id="name" name="name" required />
            <label for="email">Enter your email:</label>
            <input type="email" id="email" name="email" required />
            <label for="password">Enter your password:</label>
            <input type="password" id="password" name="pass" required />
            <label for="confirmPassword">Confirm your password:</label>
            <input type="password" id="confirmPassword" name="confirmPass" required />
            <label>Enter your gender:</label>
            <div class="gender-group">
                <input type="radio" name="gender" value="male" id="male" required />
                <label for="male">Male</label>
                <input type="radio" name="gender" value="female" id="female" />
                <label for="female">Female</label>
                <input type="radio" name="gender" value="others" id="others" />
                <label for="others">Others</label>
            </div>
            <label for="dob">Enter your Date of Birth:</label>
            <input type="date" id="dob" name="dob" required />
            <label for="address">Enter your Address:</label>
            <textarea id="address" name="address" required></textarea>
            <input type="submit" value="Submit" />
        </fieldset>
    </form>
</body>
</html>

Output:

HTMLForm3

Here are some of the key attributes that can be used with the <form> element:

action: This attribute specifies where to send the form-data when a form is submitted. The value of this attribute is typically a URL.
method: This attribute defines the HTTP method used to send the form-data. The values can be “get” or “post”.
target: This attribute specifies where to display the response received after submitting the form. The values can be “_blank”, “_self”, “_parent”, “_top”, or the name of an iframe.
enctype: This attribute is used when method=“post”. It specifies how the form-data should be encoded when submitting it to the server. The values can be “application/x-www-form-urlencoded”, “multipart/form-data”, or “text/plain”.
autocomplete: This attribute specifies whether a form should have autocomplete on or off. When autocomplete is on, the browser automatically completes values based on values that the user has entered before.
novalidate: This Boolean attribute specifies that the form-data should not be validated on submission.

Form Elements

Elements	Descriptions
<label>	It defines labels for <form> elements.
<input>	It is used to get input data from 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

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.

V

Improve