HTML5 for Beginners – A simple HTML5 form

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:

<!doctype html> 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 <tr> tag, headers specified by using <th> and unique cells specified by using <td> 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 <fieldset> 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 <textarea> tag, free form for entering a clear text. And in addition to that, right below there are two buttons, one that submits the form to PHP submit.php file and other that clears the form.

This is what it looks like rendered:

And this is the code:

Note, that Clear button really resets the form, that is achieved by using the ”reset” type on the input.

Both buttons are styled using bootstrap.

The document ends with footer, which shows my name and I’ve also added a href hyperlink to my LinkedIn account:

Cascading Style Sheet Code

The following information is contained in the main.css file that helps to style the body, table, fieldset and also other table elements. It ends by specifying the size of the textarea tag, it’s width (set to the width of a div tag) and height information.

Final Outcome

Following is the outcome of the Week 2 assignment, the final product (page) rendered inside the browser window: