FabForm

Written by: Geoffrey Callaghan

HTML Forms Back to Basics

Html Forms Back To Basics

Understanding the basics of HTML forms is essential for web development. Here’s a comprehensive guide on HTML forms, covering the fundamental elements and their attributes.

1. Basic Structure

An HTML form is created using the <form> element. Forms can include various input elements, such as text fields, checkboxes, radio buttons, and submit buttons.

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

2. Form Attributes

  • action: The URL where the form data will be sent.
  • method: The HTTP method to be used when sending the form data. Common values are GET and POST.
<form action="/submit" method="post">
    <!-- Form Elements Go Here -->
</form>

3. Input Types

Text Input

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

Password Input

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

Email Input

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

Number Input

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

Date Input

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

Checkbox

<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe">

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>

Select Dropdown

<label for="country">Country:</label>
<select id="country" name="country">
    <option value="usa">United States</option>
    <option value="canada">Canada</option>
    <option value="uk">United Kingdom</option>
</select>

Textarea

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

Submit Button

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

4. Form Validation

HTML5 offers built-in form validation. Here are some attributes used for validation:

  • required: Specifies that the input field must be filled out before submitting.
  • min and max: Define the range of values for number and date inputs.
  • pattern: Specifies a regular expression that the input field’s value must match.
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>

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

<label for="useremail">Email:</label>
<input type="email" id="useremail" name="useremail" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

5. Example Form

Here’s a complete example form incorporating various elements and attributes:

<!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>
    <h1>Contact Form</h1>
    <form action="/submit" method="post">
        <label for="fullname">Full Name:</label>
        <input type="text" id="fullname" name="fullname" required>
        <br>

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

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

        <label for="age">Age:</label>
        <input type="number" id="age" name="age" min="0" max="120">
        <br>

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

        <label for="country">Country:</label>
        <select id="country" name="country">
            <option value="usa">United States</option>
            <option value="canada">Canada</option>
            <option value="uk">United Kingdom</option>
        </select>
        <br>

        <label for="message">Message:</label>
        <textarea id="message" name="message"></textarea>
        <br>

        <label for="subscribe">Subscribe to newsletter:</label>
        <input type="checkbox" id="subscribe" name="subscribe">
        <br>

        <button type="submit">Submit</button>
    </form>
</body>
</html>

Conclusion

Understanding and using HTML forms correctly is crucial for gathering user input in web applications. With these basics, you can create a variety of forms to collect and validate data effectively.