HTML Forms

Keywords

html, forms, html forms, dataidea, data science, web development, website

Photo By DATAIDEA

Introduction to HTML Forms

HTML forms are used to collect user input. A form is an area that can contain form elements such as input boxes, checkboxes, radio buttons, submit buttons, etc. Forms are essential in web development for collecting user data and sending it to a server for processing.

Basic Structure of an HTML Form

An HTML form is defined using the <form> element. Here’s a basic example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Form</title>
</head>
<body>
    <form action="/submit" method="post">
        <!-- Form elements go here -->
    </form>
</body>
</html>

Form Attributes

  1. action: Specifies the URL where the form data should be sent.
  2. method: Specifies the HTTP method to be used when sending the form data. Common values are GET and POST.
    • GET: Appends form data to the URL. Suitable for non-sensitive data.
    • POST: Sends form data in the body of the HTTP request. Suitable for sensitive data.

Form Elements

Input Elements

The <input> element is used to create various types of inputs. Key attributes include type, name, value, placeholder, and required.

  • Text Input

    <label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>

  • Password Input

    <label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password" required>

  • Email Input

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

  • Number Input

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

  • Radio Buttons

    <p>Gender:</p>
<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>

  • Checkboxes

    <p>Skills:</p>
<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>
<input type="checkbox" id="js" name="skills" value="JavaScript">
<label for="js">JavaScript</label>

  • Submit Button

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

Textarea

The <textarea> element is used for multi-line text input.

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Enter your message here"></textarea>

Select Box

The <select> element is used to create a drop-down 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>

File Input

The <input type="file"> element allows users to upload files.

<label for="file">Upload a file:</label>
<input type="file" id="file" name="file">

Button

The <button> element can be used to create various types of buttons.

<button type="submit">Submit</button>

Grouping Form Elements

Fieldset and Legend

The <fieldset> element is used to group related elements in a form, and the <legend> element provides a caption for the <fieldset>.

<fieldset>
    <legend>Personal Information</legend>
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname">
    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lname">
</fieldset>

Form Validation

HTML5 provides built-in form validation. Here are some common validation attributes:

  • required: Ensures the field is not empty.
  • minlength and maxlength: Set minimum and maximum lengths for text inputs.
  • pattern: Defines a regex pattern the input must match.
  • min and max: Set minimum and maximum values for number inputs.
<label for="username">Username:</label>
<input type="text" id="username" name="username" minlength="5" maxlength="15" required>

<label for="userage">Age:</label>
<input type="number" id="userage" name="userage" min="18" max="100" required>

Example Form

Here’s a complete example that includes various form elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example Form</title>
</head>
<body>
    <form action="/submit" method="post">
        <fieldset>
            <legend>Personal Information</legend>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
        </fieldset>

        <fieldset>
            <legend>Account Details</legend>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" minlength="5" maxlength="15" required>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
        </fieldset>

        <fieldset>
            <legend>Preferences</legend>
            <p>Gender:</p>
            <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>

            <p>Skills:</p>
            <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>
            <input type="checkbox" id="js" name="skills" value="JavaScript">
            <label for="js">JavaScript</label>
        </fieldset>

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

        <label for="file">Upload a file:</label>
        <input type="file" id="file" name="file">

        <button type="submit">Submit</button>
    </form>
</body>
</html>
Ouput:
Personal Information
Account Details
Preferences

Gender:

Skills:

Conclusion

This tutorial covers the basics of HTML forms, including the essential attributes and elements. By understanding these concepts, you can create forms that effectively collect and validate user input. For more advanced functionality, you might integrate JavaScript for dynamic form handling and additional validation.

To be among the first to hear about future updates of the course materials, simply enter your email below, follow us on (formally Twitter), or subscribe to our YouTube channel.

Back to top