HTML Forms

By /

1. Introduction to HTML Forms

Forms are an essential part of web development. They allow users to enter and submit data, which can then be processed by a server.

A basic HTML form is created using the <form> element, and it contains various input fields for user interaction.

Basic Form Structure

<form action="submit.php" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Submit">
</form>
  • The action attribute specifies the URL where the form data will be sent.
  • The method attribute determines how the data is submitted (GET or POST).
  • The <input> element creates different types of input fields.

2. Form Elements

2.1 Text Input Field

Used to collect user input in a single-line text field.

<label for="username">Username:</label>
<input type="text" id="username" name="username">

2.2 Password Input Field

Hides the entered text for security.

<label for="password">Password:</label>
<input type="password" id="password" name="password">

2.3 Email Input Field

Validates email format automatically.

<label for="email">Email:</label>
<input type="email" id="email" name="email">

2.4 Number Input Field

Allows only numerical values.

<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" max="100">

2.5 Date Input Field

Lets users select a date.

<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">

2.6 Radio Buttons

Used for selecting one option from multiple choices.

<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

2.7 Checkboxes

Allow users to select multiple options.

<label>Skills:</label>
<input type="checkbox" id="html" name="skills" value="HTML">
<label for="html">HTML</label>
<input type="checkbox" id="css" name="skills" value="CSS">
<label for="css">CSS</label>

2.8 Select Dropdown (Dropdown List)

Used for selecting an option from a list.

<label for="country">Country:</label>
<select id="country" name="country">
    <option value="usa">USA</option>
    <option value="canada">Canada</option>
    <option value="uk">UK</option>
</select>

2.9 Textarea (Multiline Input Field)

Allows users to enter multiple lines of text.

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="30"></textarea>

3. Form Buttons

3.1 Submit Button

Sends the form data to the server.

<input type="submit" value="Submit">

3.2 Reset Button

Clears all input fields in the form.

<input type="reset" value="Reset">

3.3 Button Element

Creates a clickable button that can run JavaScript actions.

<button type="button" onclick="alert('Button Clicked')">Click Me</button>

4. Form Attributes

AttributeDescription
actionSpecifies where to send form data
methodDefines how to send data (GET or POST)
targetDetermines how to open the form submission (_self, _blank)
autocompleteEnables or disables browser autofill
novalidateDisables form validation

5. GET vs POST Methods

FeatureGETPOST
Data VisibilityVisible in URLHidden from URL
SecurityLess secureMore secure
Data LengthLimitedNo limit
Use CaseSearch queries, non-sensitive dataLogin forms, sensitive data

Example:

<form action="search.php" method="get">
    <input type="text" name="query">
    <input type="submit" value="Search">
</form>

This sends the data as search.php?query=value.

6. Form Validation

6.1 Required Field

The required attribute ensures that a field is not left empty.

<input type="text" name="name" required>

6.2 Minimum & Maximum Length

<input type="text" name="username" minlength="5" maxlength="15">

6.3 Pattern Matching (Regular Expressions)

<input type="text" name="zipcode" pattern="[0-9]{5}">

This ensures that only a 5-digit number is entered.

7. Complete Example: HTML Form with Validation

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Form Example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        form {
            width: 300px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        input, select, textarea {
            width: 100%;
            margin: 8px 0;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        input[type="submit"] {
            background-color: blue;
            color: white;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <h1>Contact Form</h1>

    <form action="submit.php" method="post">
        <label for="name">Full Name:</label>
        <input type="text" id="name" name="name" required>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>

        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="4" required></textarea>

        <input type="submit" value="Send">
    </form>

</body>
</html>

This form includes text fields, validation, and a submit button.

8. Best Practices for HTML Forms

  • Always use the label element for better accessibility.
  • Use placeholder text sparingly (labels are better).
  • Validate forms using both HTML and JavaScript.
  • Use POST for sensitive data like passwords.
  • Ensure forms are mobile-friendly with proper spacing.

Conclusion

In this chapter, you learned:

  • How to create text fields, radio buttons, checkboxes, and dropdowns.
  • The difference between GET and POST methods.
  • How to validate form inputs using attributes.
  • How to style and structure forms effectively.
Scroll to Top