Forms in HTML | HTML Forms | Input tag

by

Forms in HTML allow users to input and submit data to a server. They are an essential part of interactive web applications, such as login forms, registration pages, search bars, and feedback forms.

Make Sure to Run the Code Snippets in Your VS Code

1️⃣ Basic Structure of an HTML Form

A form is created using the <form> tag, and it contains input fields, labels, and a submit button.

Example: Simple Form

<!DOCTYPE html>
<html>
<head>
    <title>Simple HTML Form</title>
</head>
<body>
    <form action="submit.php" method="POST">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <br><br>

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

        <input type="submit" value="Submit">
    </form>
</body>
</html>

2️⃣ Understanding the <label> Tag

The <label> tag is used to define labels for form elements. It improves accessibility and usability.

Example: Using <label> for Accessibility

<!DOCTYPE html>
<html>
<head>
    <title>Label Example</title>
</head>
<body>
    <form>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username">
    </form>
</body>
</html>

3️⃣ Different Input Types in HTML

HTML provides various input types to handle different user inputs.

Input TypeDescription
textSingle-line text input
passwordMasked text input for passwords
emailInput field for email addresses
numberInput field for numbers
checkboxSelect multiple options
radioSelect one option from multiple choices
submitButton to submit the form
resetButton to reset the form
textareaMulti-line text input

Example: Text Input (type="text")

<!DOCTYPE html>
<html>
<head>
    <title>Text Input Example</title>
</head>
<body>
    <form>
        <label for="fullname">Full Name:</label>
        <input type="text" id="fullname" name="fullname" placeholder="Enter your name">
    </form>
</body>
</html>

Example: Password Field (type="password")

<!DOCTYPE html>
<html>
<head>
    <title>Password Input Example</title>
</head>
<body>
    <form>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" placeholder="Enter your password">
    </form>
</body>
</html>

Example: Checkbox (type="checkbox")

<!DOCTYPE html>
<html>
<head>
    <title>Checkbox Example</title>
</head>
<body>
    <form>
        <input type="checkbox" id="subscribe" name="subscribe">
        <label for="subscribe">Subscribe to our newsletter</label>
    </form>
</body>
</html>

Example: Radio Buttons (type="radio")

<!DOCTYPE html>
<html>
<head>
    <title>Radio Button Example</title>
</head>
<body>
    <form>
        <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>
    </form>
</body>
</html>

Example: Textarea Field

<!DOCTYPE html>
<html>
<head>
    <title>Textarea Example</title>
</head>
<body>
    <form>
        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="4" cols="30" placeholder="Enter your message..."></textarea>
    </form>
</body>
</html>

4️⃣ Dropdown Menus in HTML (<select> and <option>)

The <select> element is used to create a dropdown menu in HTML. Inside <select>, we use multiple <option> tags to define selectable choices.

Example: Basic Dropdown Menu

<!DOCTYPE html>
<html>
<head>
    <title>Dropdown Menu Example</title>
</head>
<body>
    <form>
        <label for="country">Choose a country:</label>
        <select id="country" name="country">
            <option value="usa">USA</option>
            <option value="canada">Canada</option>
            <option value="uk">UK</option>
            <option value="australia">Australia</option>
        </select>
    </form>
</body>
</html>

Example: Dropdown with Pre-selected Option

<!DOCTYPE html>
<html>
<head>
    <title>Dropdown with Selected Option</title>
</head>
<body>
    <form>
        <label for="fruit">Choose your favorite fruit:</label>
        <select id="fruit" name="fruit">
            <option value="apple">Apple</option>
            <option value="banana" selected>Banana</option>
            <option value="cherry">Cherry</option>
            <option value="grape">Grape</option>
        </select>
    </form>
</body>
</html>

🔹 Conclusion

✅ HTML forms allow users to input and submit data.
✅ The <label> tag improves accessibility.
✅ Various <input> types handle different data formats.
✅ <textarea> is used for multi-line text.
✅ <select> provides dropdown options.
✅ Form validation ensures data correctness.

Follow me on Instagram for daily web development tips! INSTAGRAM

View my Previous Post – Top 15 Patterns

Leave a Comment