Week 2: Boilerplate, Forms, and the Joy of Seeing Code Work

When I decided to transition from product design to design engineering, I knew I’d be learning a lot. But nothing quite prepared me for how satisfying it feels to write code and watch it actually do something.

This week was all about practice, taking the HTML basics I picked up last week and putting them to work. My goal? Build a simple form using pure HTML. It sounded straightforward enough. Spoiler: it actually was, but also surprisingly delightful.

Discovering the Boilerplate

Before I could even start building the form, I had to learn about something called a boilerplate. Essentially, it’s the basic structure of any HTML page — the doctype declaration, the head, the body, and all the default tags you need to get started.

Think of it like laying down the foundation of a house before you start putting up walls and windows. You can’t really hang your fancy curtains (or form elements, in this case) until you’ve got that structure in place.

Setting up the boilerplate felt like opening a clean, empty notebook. Full of possibility.

Building My First Form

Once my boilerplate was ready, it was time to get to the main event — creating a form.

There’s something almost magical about coding your first form. You type out these strange-looking tags, save your file, and refresh the browser. Suddenly, it’s there: an actual working form on your screen. I caught myself grinning.

So this is what developers have been secretly enjoying all these years? The little rush of seeing your work come alive? No problem. I totally get it now.

Meeting the Form Elements

Here’s a quick rundown of the new HTML tags I got acquainted with this week — each one with its own unique role in the form-building family:

1. Form Label Element

The label element is used to display a name or description for an input field so users know exactly what information they’re expected to enter.

<label for="username">Username:</label>

2. Text Input Element

This is the most common input field. It allows users to type short, plain text like their name, a title, or any other single-line response. It’s perfect for basic answers that don’t need special formatting.

<label for="name">fullname:</label>
<input 
type="text" 
name="fullname" 
placeholder="Enter your full name">

3. Email Input Element

This input is specifically designed for email addresses. It checks if what the user enters looks like a valid email format (like having @ and .com) and can even show an error if it’s not.

<label for="email">email address:</label>
<input 
type="email" 
name="email" 
placeholder="Enter your email address">

4. Password Input Element

This field is used for passwords or any sensitive information you don’t want to show. Whatever the user types appears as dots or asterisks, hiding the actual characters on screen.

<label for="password">password:</label>
<input 
type="password" 
name="password" 
placeholder="Enter your password">

5. Number Input Element

This input only accepts numbers. You can also set minimum and maximum limits so users don’t enter values outside a specific range. Ideal for things like age, quantity, or scores.

<label for="Amount">How much are you willing to pay?:</label>
<input 
type="number" 
name="amount"
min="0" 
max="1200">

6. Radio Input Element

Radio buttons let users pick only one option out of a set of choices. Even though you see several buttons, only one can be selected at a time — just like a quiz question with only one right answer.

<input type="radio" 
id="option1" 
name="choice" 
value="Option 1">
<label for="option1">Option 1</label>

<input type="radio" 
id="option2" 
name="choice" 
value="Option 2">
<label for="option2">Option 2</label>

7. Checkbox Input Element

Checkboxes let users select multiple options from a group. You can tick one, two, all, or none, it’s flexible. Great for things like “interests” or “preferences.”

<input 
type="checkbox" 
id="subscribe" 
name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label>

8. Dropdown Select Element

This creates a compact drop-down menu where users can pick just one option from a list. It saves space on the page compared to showing all the choices at once.

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="">--Please choose--</option>
  <option value="nigeria">Nigeria</option>
  <option value="ghana">Ghana</option>
  <option value="kenya">Kenya</option>
</select>

9. Submit Button Element

The submit button sends all the data the user entered in the form to the server (or wherever it’s supposed to go). Without it, the form just sits there and doesn’t actually do anything.

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

Wrapping Up

By the end of the week, I had a fully functioning form built entirely with HTML. Simple, yes — but incredibly satisfying.

It’s been fun realizing that code isn’t just about logic and syntax — it’s also about creating something real, something interactive.

To all the developers out there quietly enjoying this feeling every day… carry on. I get it now.

If you’re also learning something new — whether it’s coding, design, or anything else — don’t forget to celebrate the small wins. They really do add up.

Until next week.