HTML Forms

Last Updated : 21 Jan, 2026

HTML forms, defined using the

tag, are essential for collecting user input on web pages. They include interactive controls like text fields, emails, passwords, checkboxes, radios, and buttons.

  • Widely used, over 85% of websites rely on forms to gather user data.
  • They play a crucial role in modern web development by enabling user interaction and data submission.
index.html 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>HTMLtitle>
head>
<body>
    <h2>HTML Formsh2>
    <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
  • The code has a basic HTML structure with a title "HTML Forms".
  • The

    tag displays "HTML Forms" as the main heading on the page.

  • The tag defines a form for user input.
  • A text input field for the username with a label.
  • A password input field and a submit button to send the form data.

Syntax:

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 

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Formtitle>
    <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 Informationlegend>
            <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">Malelabel>
                <input type="radio" name="gender" value="female" id="female" />
                <label for="female">Femalelabel>
                <input type="radio" name="gender" value="others" id="others" />
                <label for="others">Otherslabel>
            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 

 element:

  • action: Specifies the URL where the form data is sent upon submission.
  • method: Defines the HTTP method used to send the data — either "get" or "post".
  • target: Determines where to display the server’s response (e.g., "_blank", "_self", "_parent", "_top", or an iframe name).
  • enctype: Specifies how form data is encoded when using method="post" (e.g., application/x-www-form-urlencoded, multipart/form-data, text/plain).
  • autocomplete: Controls whether the browser should auto-fill form fields ("on" or "off").
  • novalidate: A Boolean attribute that prevents the form from being validated before submission.

Form Elements

Below are essential HTML form elements used to build interactive and user-friendly forms:

Elements

Descriptions

It defines labels for elements.
It is used to get input data from various types such as text, password, email, etc by changing its type.
It defines a clickable button to control other elements or execute a functionality.
It is used to create a drop-down list.