Submodule 9.1: Buttons - Forms

User Input

User input to a web page can be facilitated through three approaches:

• <a> tags to provide hyperlinks
• <button> tags to create buttons
• <form> to create forms
  • <input> to create elements in forms

Buttons

• Simple interaction
  • Clicking of the button
• Button behavior dependent on where it is positioned:
  • Inside a form, it takes on a specific role
  • General purpose outside
• <a> can also be styled using CSS to look like a button

Forms

Form elements:

• <input>
  • type: text, password, submit, radio, checkbox, button, color, date, datetime, email, month, number, range, search, tel, time, url, week
• <textarea>
• <button>
• <select>

Buttons

In this lesson, we will examine user input for a website through the use of Buttons support in Bootstrap.

Set up for the lesson

• Download the contactus.html file and move it to the leChocolat folder. This file is already pre-formatted with some content.
• Set up the links in the navigation bars for all the three pages, index.html, aboutus.html and contactus.html so that we can navigate from one to the other with ease.
• Also set up the links in the footer correctly to point to the appropriate pages.

Adding a Button Bar

We are now going to add content to contactus.html file to learn more about buttons and button bars. Go to the div where we specify "Button group goes here", and replace it with the following code to create a button bar containing three buttons:

Buttons source:

Note how we define the button bar using the btn-group class, and then add the three buttons using the <a> tag.

In this case, the three buttons are hyperlinks that cause an action and have an href associated with them. So we decided to use the <a> tag instead of the <button> tag. Note how the <a> tags have been styled using the btn class .

Do a Git commit with the message "Buttons"

Forms - Adding a Basic Form

In this lesson, we will examine user input for a website through the use of Forms support in Bootstrap. 

Adding a Basic Form

We will add a simple form to the page at the location identified by "Form goes here". Add the following code to page to create a simple horizontal form with two fields: 

Basic form source:

This creates a form with two elements in the form. Note that the class row in the form enables us to use the Bootstrap grid system. Hence we can style the contents using the column classes as appropriate.

... Input Group with addons...

We now see the use of an input-group together with input-group-addons. Let us add fields to seek user's telephone number and email:

View source:

Note the use of the input-group and input-group-addon classes.

...Checkbox and Select...

We now see the addition of a checkbox and a select element to the form. Note the styling of these elements using Bootstrap classes: 

View source:

The above code will create a page displayed as:

...Textarea...

Next, we add a textarea for the users to submit their feedback comments as follows: 

View source:

The above code will create a page displayed as:

...Submit Button...

Finally, we add the submit button to the form as follows:

View source:

The above code will create a page displayed as:

Commit

Do a Git commit with the message "Forms"

Further readings

Official resources

• Bootstrap Buttons
• Bootstrap Button Groups
• Bootstrap Forms
• Bootstrap Input groups