HTML Form & Inputs - User Interaction

RAJU KUMARRAJU KUMAR
3 min read

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).

22
Subscribe to my newsletter

Read articles from RAJU KUMAR directly inside your inbox. Subscribe to the newsletter, and don't miss out.

formsHTML5tags#POST vs GETHTML CanvasHTMLHTML Form

Written by

RAJU KUMAR
RAJU KUMAR