Forms & Inputs

Lesson 1 of 16 Beginner Interactive

Forms collect user input. The <form> tag wraps input elements and specifies where to send the data.

Common Input Types

text — single line text
email — email address
password — hidden characters
number — numeric input
tel — telephone number
url — web address
date — date picker
file — file upload
submit — submit button

Form Attributes

action — URL to send data to
method — HTTP method (GET or POST)

Syntax

HTML

<form action="/submit" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

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

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

Form Input Types

HTML

<!DOCTYPE html>
<html>
<body>
    <form action="/submit" method="POST">
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name" placeholder="Enter name" required><br><br>

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

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

        <label for="age">Age:</label><br>
        <input type="number" id="age" name="age" min="1" max="120"><br><br>

        <label for="date">Date:</label><br>
        <input type="date" id="date" name="date"><br><br>

        <button type="submit">Submit</button>
    </form>
</body>
</html>

Try It Yourself

Practice

Exercise

Create a login form with email and password fields.

Answer

<form>
    <label>Email:</label><br>
    <input type="email" name="email"><br><br>
    <label>Password:</label><br>
    <input type="password" name="password"><br><br>
    <input type="submit" value="Login">
</form>

Quick Quiz

Which input type is used for email addresses?

text

mail

address

The email input type validates email format automatically.

Interview Questions

GET appends data to the URL as query parameters — visible and limited in size. POST sends data in the request body — not visible in the URL and can handle large amounts of data. Use POST for sensitive data like passwords.

Next Lesson

Form Elements