HTML Forms

HTML forms are used to collect input from users. Forms contain various types of input fields.

Form Tag

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

Form Attributes

action

<form action="/api/register">

method

<form method="POST">
<form method="GET">

enctype

<form enctype="multipart/form-data">

Input Types

Text

<input type="text" name="name" placeholder="Enter name">

Email

<input type="email" name="email" placeholder="[email protected]">

Password

<input type="password" name="password" placeholder="Password">

Number

<input type="number" name="age" min="17" max="30">

Date

<input type="date" name="birthDate">

File

<input type="file" name="photo" accept="image/*">

Submit

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

Case Study: Student Registration Form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>New Student Registration</title>
    <style>
        form {
            max-width: 500px;
            margin: 0 auto;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        input, select, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        button {
            background: #1e40af;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background: #1e3a8a;
        }
    </style>
</head>
<body>
    <h1>New Student Registration Form</h1>

    <form action="/api/register" method="POST">
        <div class="form-group">
            <label for="name">Full Name *</label>
            <input type="text" id="name" name="name" required>
        </div>

        <div class="form-group">
            <label for="email">Email *</label>
            <input type="email" id="email" name="email" required>
        </div>

        <div class="form-group">
            <label for="password">Password *</label>
            <input type="password" id="password" name="password" required>
        </div>

        <div class="form-group">
            <label for="birthDate">Date of Birth *</label>
            <input type="date" id="birthDate" name="birthDate" required>
        </div>

        <div class="form-group">
            <label for="major">Study Program *</label>
            <select id="major" name="major" required>
                <option value="">Select Study Program</option>
                <option value="cs">Informatics Engineering</option>
                <option value="is">Information Systems</option>
                <option value="ce">Computer Engineering</option>
            </select>
        </div>

        <div class="form-group">
            <label for="photo">Recent Photo</label>
            <input type="file" id="photo" name="photo" accept="image/*">
        </div>

        <div class="form-group">
            <label for="address">Address</label>
            <textarea id="address" name="address" rows="4"></textarea>
        </div>

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

Everyday Case Study

Case: A developer needs to create a login form.

<h2>Login</h2>

<form action="/login" method="POST">
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" id="email" name="email" required>
    </div>

    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" id="password" name="password" required>
    </div>

    <div class="form-group">
        <label>
            <input type="checkbox" name="remember"> Remember me
        </label>
    </div>

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

Best Practices

1. Labels for all inputs: For accessibility
2. Required attribute: For basic validation
3. Placeholder: For input hints
4. Autocomplete: For user convenience
5. Error handling: Show clear errors

Summary

HTML forms collect user input. Use the right input types and sufficient validation.