Day 02 of 100 Days of Code - HTML Forms And Mortal Kombat Fighters

Today I brushed up on checkboxes and radio buttons in HTML. I’ve used them before, but I wanted to revisit the basics before diving deeper into CSS.

I started by following along with The Web Development Bootcamp, but ended up going off-script to build something on my own.

==> Check it out on GitHub.

I decided to make a small form project based on an old video game I used to love — Mortal Kombat.

The idea was simple: create a form where the user can choose their favorite fighter.

Originally, I considered using checkboxes, but radio buttons made more sense since you should only be able to pick one fighter at a time.

To do this, I used a group of radio buttons that all share the same name attribute. That’s what ties them together and limits selection to just one option. For example:

<input type="radio" id="subzero" name="fighter" value="subzero">
<label for="subzero">Subzero</label>

Each character option needs the same name="fighter" value, or the radio buttons won’t behave as a group.

I’m not sure why I picked Mortal Kombat for this, but it made the exercise more fun — and that’s what matters.

I am thinking of building this out a little more and pushing it to github, but we will see how far I get. It looks pretty cool right now though.

Moral of the story is that small, focused projects like this build up over time. If I keep showing up daily, I know the results will follow.