HTML5 for Beginners 2 - HTML5 forms

📅 Published 16.11.2016
🏷️ Software Development
This is a second article in the series dedicated to beginners in HTML5 programming. In this example, we’ll create a simple HTML5 form. Application Project Structure To start the project,...

This is a second article in the series dedicated to beginners in HTML5 programming. In this example, we’ll create a simple HTML5 form.

Application Project Structure

To start the project, I’ve created the following project structure.

As you can see in the screenshot of the project structure attached, the project has only three files. A single HTML file called index.html and two CSS files. Cascading style sheet I’ve created called main.css, which is kept in the root of the project structure. In addition to these data, there is a reference to bootstrap.css style sheet, for which I’ve created a separate folder as to segregate it from the rest of the project, bootstrap reference cascading style sheet file is called bootstrap.css. I’ve decided to use bootstrap to style the page better and make it more mobile friendly.

Following screenshot outlines the structure and how it looks inside the IDE:

HTML5 Code

I’ve started the HTML5 file using the following meta information organization:

is the first declaration, it serves as an instruction to the browser, saying we’re using HTML5. Then I’ve added author, title, description of the document and also charset set to UTF-8. There are two links to previously mentioned bootstrap.css and also my main.css stylesheet. As noted earlier, I've added a bootstrap core CSS for better style representation of the final assignment document.

Top of the document consists of a custom navigation bar at the top. This bar stays on top, even if the middle content of the page (form) is scrolled up, meaning, it will never disappear from view. I’ve added this feature to see how amazing bootstrap can be. This bar is a navigational bar, but for this project, I am only using it to specify that I am the author of the document. This is what it looks like:

This is what the code for navigation bar looks like:

The next think that I've added is a jumbotron; that conveys a primary message and purpose of the assignment. Hoping to get some plus points for this :)

This is the jumbotron code:

I’ve followed then by initializing the form and its action statement. I've added a form to a submission to a fictional submit.php using a post method. Following code:

The next in the assignment was to create a table on the left side; that should appear rendered like this:

To achieve that; I’ve used a table tag along with rows specified using tag, headers specified by using and unique cells specified by using tag. The entire styling of the form was offloaded to main.css file.

To keep the table information on the left side of the screen, I’ve used

This is also a function of bootstrap that allowed me to specify the grid and number of the columns used in the page.

For the left side of the screen I’ve used medium f ive columns wide div, for the right side of the screen, where form resides I’ve used little wider six columns wide div tag:

Now that the screen was split using two DIVs, I’ve started to build the form questionnaire.

The first question I’ve created using the following style, this is what renders on the screen:

The Code is simple, I’ve used a

tag, for all questions. The legend displays the header information (question), and radio buttons are shows using input type=”radio” tags. Important here was to keep fieldset group set to exactly the same value, as we have in input tags, so as to not to confuse one group of radio buttons from the other.

The rest of the questions followed the same example.

This is the question number two:

And its code:

I’ve used the same approach to define the checkboxes, a unique fieldset for consistency (even that in this case it didn’t have to be defined). Then checkboxes are also inputs of type checkbox.

This is the code for checkbox question:

The document ends with a