Lecture 5:Forms in HTML

Principle

• Web = two-way street (not just read-only).
• Forms allow: collect → package → send → process user data.
• Core element: <form>

Basic Form Structure

<form> <label for="firstName">First Name:</label> <input type="text" id="firstName" name="firstName"> <br><br> <button type="submit">Submit</button> </form>

Core Elements

<input> type="text" → single line input. type="password" → hidden characters. type="number" → numeric input with min/max. type="date" → calendar picker. type="file" → upload file. type="color", type="range", etc. → specialized inputs. <label> Describes input field. Use for="id" → links label with input (click label = focus input). Attributes: id → unique per page (used with label). name → key sent to server (critical for data submission). placeholder → hint text inside input. required → makes field mandatory.

Choice Inputs

Radio Buttons (Select One)

        <input type="radio" id="sizeM" name="shirtSize" value="medium">
        <label for="sizeM">Medium</label>
            

• Same name → grouped.
• Different value → unique answer.

Checkboxes (Select Many)

            <input type="checkbox" id="mush" name="toppings" value="mushrooms">
            <label for="mush">Mushrooms</label>
            

• Same name = same category.
• Multiple values allowed.

<!-- Dropdown -->

            <select id="country" name="country">
           <option value="">--Choose--</option>
           <option value="in">India</option>
           <option value="us">USA</option>
            </select>



            
Longer Text
            <textarea rows="4" cols="50"></textarea> → multi-line input.

            
Buttons
            <input type="submit"> → basic submit.

        <button type="submit"> → flexible, can hold text, <strong>, <img>.
        </button>