FullStackEngineering.ioFullStackEngineering.io

Explore

  • Community Feed
  • Find Talent
  • Services
  • Digital Products

Earn Money

  • Sell Services
  • Find Jobs
  • Sell Digital Products
  • Earn with Writing

Company

  • Contact Us
  • Terms and Conditions
  • Privacy Policy
Full Stack Engineering Logo

© 2024 FullStackEngineering.io

HTML in 1 Day: Chapter 7: Forms

Shahin Mannan
By Shahin Mannan on

June 1, 2024

  • Frontend Development

Creating Interactive Forms

Forms are essential for collecting user input on websites. In this chapter, you'll learn how to create forms using HTML, understand various form elements, and apply best practices to ensure user-friendly and accessible forms.

Basic Form Structure

A form in HTML is created using the <form> tag. The action attribute specifies where the form data should be sent, and the method attribute determines how the data is sent (GET or POST).

Example:

<form action="/submit-form" method="POST">
    <!-- Form elements go here -->
</form>

Common Form Elements

  • Text Input: <input type="text">
  • Password Input: <input type="password">
  • Email Input: <input type="email">
  • Number Input: <input type="number">
  • Textarea: <textarea></textarea>
  • Radio Button: <input type="radio">
  • Checkbox: <input type="checkbox">
  • Dropdown (Select): <select></select>
  • Button: <button></button>

Examples:

<form action="/submit-form" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>

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

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

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

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

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

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

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

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

Form Attributes

  • action: URL to send the form data to.
  • method: HTTP method to use (GET or POST).
  • id: Unique identifier for the form element.
  • name: Name of the form element, used to identify form data after submission.
  • placeholder: Placeholder text for input fields.
  • required: Specifies that an input field must be filled out before submitting.

Example with Attributes:

<form action="/submit-form" method="POST">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" placeholder="Enter your username" required><br>
    <button type="submit">Submit</button>
</form>

Practical Exercise

  1. Create a New HTML File: Save it as forms.html.
  2. Add a Basic Form: Create a form with text, password, email, and number input fields.
  3. Add Other Elements: Include a textarea, radio buttons, checkboxes, and a dropdown menu.
  4. Add a Submit Button: Ensure the form has a submit button to send the data.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Forms</title>
</head>
<body>
    <h1>Forms</h1>
    <form action="/submit-form" method="POST">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" placeholder="Enter your name" required><br>

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

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

        <label for="age">Age:</label>
        <input type="number" id="age" name="age" placeholder="Enter your age"><br>

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

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

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

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

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

Save and open this file in your browser to see the form in action.

Key Takeaways

  • The <form> tag is used to create forms.
  • Common form elements include text inputs, radio buttons, checkboxes, and dropdown menus.
  • Form attributes such as action, method, and required enhance form functionality and usability.
  • Properly structured and styled forms improve user experience and data collection.

Next Steps

In the next chapter, we’ll explore semantic HTML and its importance for accessibility and SEO. Keep practicing to master creating and using forms in HTML.

 

Please Sign In to post a comment.

Comments (0)