HTML Form & Inputs - User Interaction

HTML Form & Inputs - User Interaction

Learn how to make an HTML form: A guide for beginners

RAJU KUMAR's photo
RAJU KUMAR
·

3 min read

HTML Form & Inputs - User Interaction

Table of contents

How to create form in html

Registration form

1. Basic Structure of a Form

The <form> element is used to create a form. It contains various input elements like text fields, radio buttons, and checkboxes.

<form action="#" method="post">
    <!-- Form elements go here -->
</form>

  • action: Specifies where the form data will be sent (URL).

  • method: Defines how data is sent:

    • GET: Sends data via the URL (useful for search forms).

    • POST: Sends data in the request body (more secure).

2. Adding Form Elements

a. Text Input

Used for short text input, like names or emails.

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

b. Email Input

Ensures the user enters a valid email format.

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

c. Password Input

Masks the input for sensitive data like passwords.

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

d. Radio Buttons

Allows selecting one option from a group.

<p>Gender:</p>
<input type="radio" name="gender" value="male">
<label for="male">Male</label>
<input type="radio"  name="gender" value="female">
<label for="female">Female</label>

e. Checkboxes

Allows selecting multiple options.

<p>Hobbies:</p>
<input type="checkbox" id="reading" name="hobbies" value="reading">
<label for="reading">Reading</label>
<input type="checkbox" name="Move" value="Movie">
<label for="sports">Sports</label>

f. Dropdown (Select)

Provides a list of options in a dropdown menu.

<label for="country">Country:</label>
<select id="country" name="country">
    <option value="india">India</option>
    <option value="usa">USA</option>
    <option value="uk">UK</option>
</select>

g. Text area

For multiline text input like comments.

<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4" cols="50"></textarea>

h. Submit Button

Submits the form.

<input type="submit" value="Submit">

3. Complete Example

Here's how all these elements come together:

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

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

        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required><br><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><br>

        <p>Hobbies:</p>
        <input type="checkbox" id="reading" name="hobbies" value="reading">
        <label for="reading">Reading</label>
        <input type="checkbox" id="sports" name="hobbies" value="sports">
        <label for="sports">Sports</label><br><br>

        <label for="country">Country:</label>
        <select id="country" name="country">
            <option value="india">India</option>
            <option value="usa">USA</option>
            <option value="uk">UK</option>
        </select><br><br>

        <label for="comments">Comments:</label><br>
        <textarea id="comments" name="comments" rows="4" cols="50"></textarea><br><br>

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

Output

Tips for Beginners

  1. Use the required attribute for mandatory fields.

  2. Add placeholder text for better user experience.

  3. Validate inputs on both client and server sides.

GET V/S POST

GET

  • Sends form data as part of the URL.

  • Data is visible in the browser's address bar (e.g., example.com?name=John).

  • Best for small, non-sensitive data like search terms.

  • Limited data size because URLs have a length limit.

  • Can be bookmarked and shared.

  • Example: Searching for something on Google.

POST

  • Sends form data hidden in the body of the request (not in the URL).

  • Data is not visible in the browser's address bar.

  • Best for sensitive or large data like passwords or file uploads.

  • No size limit for the data.

  • Cannot be bookmarked or shared.

  • Example: Logging into a website or uploading a photo.

Summary:

  • Use GET when you don’t mind showing the data in the URL (e.g., search forms).

  • Use POST when data is private or needs to be securely sent to the server (e.g., login forms).

formsHTML5tags#POST vs GETHTML CanvasHTMLHTML Form