HTML Forms & Navbars

In this article, we will cover Forms and Navbars creation. These are the last fundamental pieces of HTML you need to be able to structure most of your sites. If you haven´t read the previous article I highly suggest you do it, since you need to understand the structure tags to combine with the ones you are going to learn today. The previous article can be found here.

Forms

To build forms we have 90% covered with only 3 tags and a couple of attributes and that is awesome. The tags we are going to need are form, label, and input. The form tag is the container for all the elements inside of our form. The input tag will be used for all the fields we want the user to fill out. And last but not least, it is a good practice to pair every input with a label tag to show the user a description of the field they are filling. Let´s take a look at an example of a simple form:

<form>
  <label for="fullName">Full name</label><br/>
  <input type="text" id="fullName" name="fullName"><br/>
  <label for="address">Address</label><br/>
  <input type="text" id="address" name="address">
</form>

Try it out! Go to CodePen or just create an html file with the standard boiler plate and add the code above. You will see this:

The important thing to notice is the usage of the attributes for both label and input tags. All the labels should have the for atributte with the value of the corresponding input id. In our example the full name label has a for with the value “fullName” and that´s the id of the corresponding input. The name attribute in the input tag is for reference after we submit the values of our form to the server. Input without a name won´t pass data when the user submits the form. IMPORTANT to remember: always fill for when using labels, always fill id and name when using inputs.

The last important attribute is the type, we have only used “text” so far and that is of course for text inputs, but there are a lot of types for different inputs and requirements, here is a list of the most used ones:

List of most used input types: text, number, date, email, password, radio, checkbox, range and submit.
Visual representation of the most used input types.

With all this info you can create your own form with lots of different inputs to collect data from the user. The only missing piece is how to send this to the server. For that, we will use the action attribute of the form. That is the action that will be executed when the user clicks on the submit input, and it will look like this:

<form action="/demo/register">

Keep in mind that the path in the action attribute has to point to a page on the server or to a request path in the example above that will be catched by our router on the server. We will look at several examples further down the road on how to use this depending on our tech stack, for now just remember you need an action defined.

Some extra tags

There are other HTML tags that you will find useful when building forms, some of them are:

  • select : for a list of options to select from.
  • option : is the tag used multiple times inside of the select
  • textarea : tag for multi-line text input
  • button : to create buttons aside from the submit one

Below is a short example of how to use these 4 tags:

<label for="frameworks">Choose your favourite JS framework:</label> <br>
<select id="frameworks" name="frameworks">
  <option value="angular">Angular</option>
  <option value="ember">Ember</option>
  <option value="react" selected>React</option>
  <option value="vue">Vue</option>
</select><br><br>

<label for="message">Explain why React is your favourite:</label><br>
<textarea id="message" name="message" rows="5" cols="30">Because every company wants it and I like it´s simplicity
</textarea><br><br>

<button type="button" onclick="alert('React I ❤ U!')">Click Me!</button>
Example of how select tag works (displays a list of options) and usage of textarea and button that displays a message using alert.

Navbars

This section will be much shorter and easier, I promise.

Navbars are the main way for the user to navigate through your website. They are a list of links and therefore there are multiple ways to build them. I will show you only 2 ways to build them but keep in mind you can find different solutions out there. The important lessons to take from this is to think about the navigation of the website you are building and how are you going to let the user get to your content.

<h1>Navbars</h1>

<h3>Unordered List</h3>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#myProjects">My Projects</a></li>
  <li><a href="#aboutMe">About me</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>
<br/>

<h3>Nav + a tags</h3>
<nav>
  <a href="/">Home</a> 
  <a href="/myProjects">My Projects</a> 
  <a href="/aboutMe">About me</a> 
  <a href="/contact">Contact</a>
</nav>
Example of unordered list with bulletpoints (default styles for that) vs example with the nav tag.
Example of how both navbars look

In the first example, we use an unordered list with “a” tags for the links. In the second example, we use the nav tag and the “a” links inside. Both works, and both look super ugly if you ask me. That´s why in the next article we will dive right into CSS to start learning how to style things to make our website look beautiful and convert a navbar from that to something like this:

navbar with nice styles done in css.
Click on the image above so you don’t miss out on future content.