HTML Forms

Form, as a concept refers to a printed document that would have blanks to be filled up by the user. However, as an HTML term, it refers to the elements that enable you to gather information from the visitors of your website.

Whether you’re simply looking to add a simplistic search box to your webpage or you’re trying to do something a bit more complex, say such as an insurance application, HTML forms give you several elements that can be used to gather information from your audience. Learn about.

• How to add a form to your website
• The many tools available in data collection
• New controls for forms added to HTML5

An HTML form consists of various input elements, such as text fields, checkboxes, radio buttons, and submit buttons, all designed to gather different types of data from users.

				
					<form action="/submit-form" method="post">
    <h2>User Registration Form</h2>

    <!-- Name Field -->
    <label for="name">Full Name:</label>
    <input type="text" id="name" name="name" placeholder="Enter your full name" required>
    <br><br>

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

    <!-- Phone Number Field -->
    <label for="phone">Phone Number:</label>
    <input type="tel" id="phone" name="phone" placeholder="123-456-7890" required>
    <br><br>

    <!-- Password Field -->
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" placeholder="Create a password" required>
    <br><br>

    <!-- Gender Radio Buttons -->
    <label>Gender:</label><br>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label><br>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label><br>
    <input type="radio" id="other" name="gender" value="other">
    <label for="other">Other</label>
    <br><br>

    <!-- Subscription Checkbox -->
    <label>Subscription Preferences:</label><br>
    <input type="checkbox" id="news" name="subscription" value="newsletter">
    <label for="news">Subscribe to our newsletter</label><br>
    <input type="checkbox" id="updates" name="subscription" value="updates">
    <label for="updates">Receive product updates</label>
    <br><br>

    <!-- Select Menu for Country -->
    <label for="country">Country:</label>
    <select id="country" name="country" required>
        <option value="">Select your country</option>
        <option value="usa">United States</option>
        <option value="canada">Canada</option>
        <option value="uk">United Kingdom</option>
        <option value="australia">Australia</option>
        <option value="other">Other</option>
    </select>
    <br><br>

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

    <!-- Textarea for Comments -->
    <label for="comments">Additional Comments:</label><br>
    <textarea id="comments" name="comments" rows="4" cols="50" placeholder="Enter any additional information here..."></textarea>
    <br><br>

    <!-- Submit Button -->
    <button type="submit">Register</button>
</form>

The action attribute determines the URL where the form data would be sent.
Method attribute describes the method by which data is submitted, either GET or POST

Controls of the Form

HTML forms make use of various controls for the collection of specific data types:

- Text Fields: Examples include names and email addresses using a single line input (type=”text” or type=”email”).
- Text Areas: For multiple lines of text input (textarea).
- Checkboxes and Radio Buttons: Used for option selection. The buttons used are input type=”checkbox” and input type=”radio”.
- Dropdown Lists: If you have lists from which a user will choose one or more items (<select>).
- Buttons: To submit or reset the form (<button type=\”submit\”>).

HTML5 Inclusions

HTML5 introduces new form controls like date pickers which allow selecting the date, range sliders, and color selectors. HTML5 now comes with features that make it easier to collect and validate information.
You can extract information from your users very efficiently by developing structured HTML forms, which means improved interactivity and engagement on your website.

Try It Yourself

<form action="/submit-form" method="post">
    <h2>User Registration Form</h2>

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

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

<label for="phone">Phone Number:</label>
    <input type="tel" id="phone" name="phone" placeholder="123-456-7890" required>
    <br><br>

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

<label>Gender:</label><br>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label><br>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label><br>
    <input type="radio" id="other" name="gender" value="other">
    <label for="other">Other</label>
    <br><br>

<label>Subscription Preferences:</label><br>
    <input type="checkbox" id="news" name="subscription" value="newsletter">
    <label for="news">Subscribe to our newsletter</label><br>
    <input type="checkbox" id="updates" name="subscription" value="updates">
    <label for="updates">Receive product updates</label>
    <br><br>

<label for="country">Country:</label>
    <select id="country" name="country" required>
        <option value="">Select your country</option>
        <option value="usa">United States</option>
        <option value="canada">Canada</option>
        <option value="uk">United Kingdom</option>
        <option value="australia">Australia</option>
        <option value="other">Other</option>
    </select>
    <br><br>

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

<label for="comments">Additional Comments:</label><br>
    <textarea id="comments" name="comments" rows="4" cols="50" placeholder="Enter any additional information here...">

How to Create a...

The Ultimate Travel Companion:...

HTML Forms

Controls of the Form

HTML5 Inclusions

Try It Yourself

Share with friends

Leave a comment Cancel reply

How to Create a Clone Website (Fake Website)

The Ultimate Travel Companion: Top 5 Must-Have Apps

HTML Forms

Controls of the Form

HTML5 Inclusions

Try It Yourself

Share with friends

Leave a comment Cancel reply