Complete HTML Form Example

<form onsubmit="showData(event)" method="POST" >

<!-- Personal Information -->
    <fieldset>
        <legend>Personal Information</legend>

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

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

        <p>Gender:</p>

        <label for="male">
            <input type="radio" id="male" name="gender" value="male" required> Male
        </label>

        <label for="female">
            <input type="radio" id="female" name="gender" value="female"> Female
        </label>
    </fieldset>

    <!-- Preferences -->
    <fieldset>
        <legend>Preferences</legend>

        <p>Skills:</p>

        <label>
            <input type="checkbox" name="skill[]" value="html"> HTML
        </label>

        <label>
            <input type="checkbox" name="skill[]" value="css"> CSS
        </label>

        <label>
            <input type="checkbox" name="skill[]" value="javascript"> JavaScript
        </label>
    </fieldset>

    <!-- Message -->
    <fieldset>
        <legend>Message</legend>

        <label for="message">Your Message:</label>
        <br>
        <textarea id="message" name="message" placeholder="Enter your message" rows="4" cols="30" required></textarea>
    </fieldset>

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

</form>

<div id="result"></div>

Explanation:

Overall Structure

This is a complete HTML form used to collect user data such as:

• Name and Email
• Gender
• Skills
• Message

<form onsubmit="showData(event)" method="POST">

• onsubmit="showData(event)" - This attribute calls a JavaScript function when the form is submitted.
• method="POST" - The data is sent securely (not visible in the URL).

Personal Information Section

<fieldset> 
    <legend>Personal Information</legend>

• <fieldset> - This tag is used to group related input fields.
• <legend> - This tag provides a title for the group.

Name Input

<input type="text" placeholder="Enter your name" name="name" id="name" required>

• type="text" - This attribute specifies that the input field accepts text.
• placeholder - This attribute displays a hint to the user about what to enter in the input field.
• required - This means the user must fill in this field; otherwise, the form will not be submitted.

Email Input

<input type="email" id="email" name="email" placeholder="Enter Your Email" required>

• type="email" - This attribute ensures that the user enters a valid email address in this input field.

Gender (Radio Button)

<input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female

• Only one option can be selected at a time.
• The same name attribute groups the radio buttons together.

Preference Section

<fieldset>
    <legend>Preferences</legend>

• <fieldset> - Groups related input fields together.
• <legend> - Provides a title for the group.

Skills

<input type="checkbox" name="skill[]" value="html">

• The user can select multiple options.
• Checkboxes allow multiple values to be selected and send the data as an array using the same name attribute.

Message Section

<textarea id="message" name="message"></textarea>

• <textarea> - This tag is used for multi-line input.
• The rows and cols attributes control the size.

Submit Button

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

• The <button> tag is used to submit the form.
• When clicked, it submits the form data to the server or triggers a JavaScript function for processing.

Try it Yourself Button

<button class="tryBtn">Try it Yourself</button>

• This button is used to allow users to test or run the code interactively.

• This button is placed outside the form.
• It is usually used to:
  • Open the editor
  • Run the code
  • Display the output

Conclusion

This example demonstrates how to create a complete HTML form using various input types such as text fields, radio buttons, checkboxes, and textarea. Understanding these elements is essential for collecting user data effectively and building interactive web applications.