RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-forms/ below:

HTML Forms - GeeksforGeeks

HTML Forms

Last Updated : 23 Jul, 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


 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>HTML</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:

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:

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

HTML Forms in Web Development

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4