Getting Started With Forms
Today I thought, “Why not show folks how easy HTML forms are?” Seriously, even if you’re just starting, you can do this. So I fired up my old laptop and opened a blank text file. Renamed it my_first_* because naming things is half the battle, right?
Building Blocks of a Form
First things first – gotta make the shell. Wrote <form> right between the body tags. Felt kinda naked just sitting there alone. It needed purpose. Added action=”#” and method=”post”. Like giving it a job to do. Felt better.
Then came the fun part:
- Name Field: Typed <label for=”name”>Your Name:</label>. Why? Because labels are polite. They tell people where to type. Added a simple <input type=”text” id=”name” name=”name”>. Hit save and refreshed the browser. Boom! A box appeared.
- Email Field: Copied the label bit but changed it to “Email”. Smart reuse, eh? The input changed to type=”email”. Tried typing “gibberish” there. Browser yelled at me – good! That’s validation working.
- Password Field: Made another input with type=”password”. Typed “123456” and saw dots. Felt secret agent-ish.
Adding Choices
Thought radio buttons would spice things up. Wrote:
- <input type=”radio” id=”tea” name=”drink” value=”tea”> Linked it to a label saying “Tea”.
- Did the same for Coffee – same name attribute (drink), different value (coffee). Trick is keeping the name the same so they fight over who gets picked. Like siblings.
Testing it, clicked both – only one stayed selected. Perfect.
The Dropdown Drama
Almost forgot select menus. Scribbled:
<select name=”time”>
<option value=”morning”>Morning Person</option>
<option value=”night”>Night Owl</option>
</select>
Clicked it in the browser. Saw options pop down. Chose “Night Owl.” Felt seen.
The Final Button
No form feels complete without that button. Slapped in <button type=”submit”>Send It!</button>. Big, clickable. Satisfying.
Closed the form tag. Saved the file. Double-clicked it. A working form loaded in Chrome. Tried filling it out – typed “Dave,” “dave@*,” picked Coffee, declared myself a Night Owl. Hit “Send It!” Blank page reloaded. Why? Because my action=”#” just goes nowhere. But the parts worked! Mission accomplished. Forms aren’t scary, folks. Just boxes and buttons talking to each other. Now go make one.
