HTML Form Controls

Form controls are the elements used in forms, such as textarea, select, button, and others.

Textarea

<textarea name="message" rows="5" cols="40" placeholder="Write a message..."></textarea>

Select (Dropdown)

<select name="major">
    <option value="">Select Major</option>
    <option value="cs">Informatics Engineering</option>
    <option value="is">Information Systems</option>
    <option value="ce">Computer Engineering</option>
</select>

Select with Optgroup

<select name="course">
    <optgroup label="Semester 1">
        <option value="mk1">Algorithms</option>
        <option value="mk2">Database</option>
    </optgroup>
    <optgroup label="Semester 2">
        <option value="mk3">Web Programming</option>
        <option value="mk4">Networks</option>
    </optgroup>
</select>

Button

<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button" onclick="alert('Hello!')">Click</button>

Checkbox

<input type="checkbox" name="course" value="algorithms"> Algorithms
<input type="checkbox" name="course" value="database"> Database
<input type="checkbox" name="course" value="web" checked> Web Programming

Radio

<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female

Case Study: Grade Entry Form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grade Entry</title>
    <style>
        form {
            max-width: 600px;
            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;
        }

        .radio-group, .checkbox-group {
            display: flex;
            gap: 20px;
        }

        button {
            background: #1e40af;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Grade Entry Form</h1>

    <form action="/grade-entry" method="POST">
        <div class="form-group">
            <label for="course">Course</label>
            <select id="course" name="course" required>
                <option value="">Select Course</option>
                <optgroup label="Informatics Engineering">
                    <option value="pw">Web Programming</option>
                    <option value="bd">Database</option>
                    <option value="alg">Algorithms</option>
                </optgroup>
                <optgroup label="Information Systems">
                    <option value="si">Information Systems</option>
                    <option value="pm">Modeling</option>
                </optgroup>
            </select>
        </div>

        <div class="form-group">
            <label>Exam Type</label>
            <div class="radio-group">
                <label>
                    <input type="radio" name="type" value="midterm" checked> Midterm
                </label>
                <label>
                    <input type="radio" name="type" value="final"> Final
                </label>
                <label>
                    <input type="radio" name="type" value="assignment"> Assignment
                </label>
            </div>
        </div>

        <div class="form-group">
            <label for="grade">Grade</label>
            <input type="number" id="grade" name="grade" min="0" max="100" required>
        </div>

        <div class="form-group">
            <label for="notes">Notes</label>
            <textarea id="notes" name="notes" rows="4" placeholder="Write notes..."></textarea>
        </div>

        <div class="form-group">
            <label>
                <input type="checkbox" name="publish" checked> Publish to students
            </label>
        </div>

        <button type="submit">Save Grade</button>
    </form>
</body>
</html>

Everyday Case Study

Case: A developer needs a student profile form.

<h2>Student Profile</h2>

<form action="/update-profile" method="POST">
    <div class="form-group">
        <label for="photo">Profile Photo</label>
        <input type="file" id="photo" name="photo" accept="image/*">
    </div>

    <div class="form-group">
        <label for="bio">Bio</label>
        <textarea id="bio" name="bio" rows="4" placeholder="Tell us about yourself..."></textarea>
    </div>

    <div class="form-group">
        <label>Hobbies</label>
        <div class="checkbox-group">
            <label><input type="checkbox" name="hobby[]" value="coding"> Coding</label>
            <label><input type="checkbox" name="hobby[]" value="gaming"> Gaming</label>
            <label><input type="checkbox" name="hobby[]" value="sports"> Sports</label>
        </div>
    </div>

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

Best Practices

1. Labels for all controls: For accessibility
2. Group related controls: Use fieldset
3. Default values: Set checked/selected when needed
4. Multiple selection: Use the multiple attribute
5. Disabled options: Use them for unavailable options

Summary

Form controls provide various ways to collect data. Choose controls that fit the type of data.