Bootstrap form with a script sending data to a database

In this tutorial you will learn how to create a Bootstrap form with a script sending data to a database.

Bootstrap form

In this tutorial you will learn to create a Bootstrap form. Click on the demo link below to see what the form will look like (on different screen sizes):
Demo - Form

HTML Form intro

With HTML forms you can gather data in a structured way. HTML provides different types of input fields (e.g. text, date, etc.) that you can use to gather data.

These input fields are contained within form tags. Input fields might also be preceded by labels.

If you are not yet familiar with HTML forms and want to know a bit more below are a few links:

HTML forms

HTML5 new input types

Bootstrap Form

In this tutorial we’ll focus on how to create a form with Bootstrap. Bootstrap provides global styling for forms and can contain all HTML5 input types.

In the form that we’ll create in this tutorial I have included different kinds of HTML(5) input elements (see demo) that are often used: text, radio buttons, date, select, datalist, tel and email.

Below you can see the markup for the form:

Form structure/layout

We put our form into a container div and start and end our form with the form tags. I have structured our form into 3 groups, each preceded by a legend tag.

For global styling Bootstrap provides the classes form-inline and form-horizontal:

  • (Default styling) without either of these 2 classes Bootstrap stacks the input fields and labels.
  • With form-inline the input fields become left-aligned (within viewports that are at least 768px wide).
  • With form-horizontal the input fields are stacked but the labels are shown left-aligned to the input field.

For our form I have chosen form-horizontal.

Layout with 2 (or more) input fields on one line

I wanted our form to display 2 input fields – with their labels – on one line. The easiest way to achieve this is by putting 2 (or more) input fields and related labels in one form-group.

We then use grid classes to decide how much width each label and input field gets. I used col-sm grid classes because I wanted the input fields to stack on (extra) small screens and display aside each other on larger screens.

Input fields

Our form contains several types of input fields:

  • The text type is used most often in the form and defines a one-line field where a user can enter text (e.g. First Name).
  • The radio type (also called radio buttons) lets a user select only one of a limited number of choices (e.g. Male or Female).
  • For Data of Birth I have used the date type. With some browsers (Chrome, Opera) when a user clicks on this input field he/she can pick the date from a calendar.
  • A Phone number is best defined by the tel type. No automatic validation is provided with the this input type (probably because the format for phone numbers varies widely).
  • The email type is the obvious choice for an Email address field. Automatic client-side validation is provided with the email input type. This doesn’t mean that the user cannot enter a non-existing email address. Only that the input should contain a @.
Placeholders

Each input field also shows a so-called placeholder. For instance: the form asks the user to insert an address. The label “Address” precedes the input field. The input field itself shows the placeholder “Street + No”.

Some browsers automatically display a placeholder for the date type input field but not all. For consistency across browsers you therefor still need to add a placeholder.

Select or Datalist

We can make it both easier for the user and have better input control by using a select or datalist.

For region I have used the select tag with each region between option tags. With select a user can only choose from the options you provide. Because the number of regions is limited using select is a good choice for this input.

I included “Select a region” as the first option to get reliable input in the database. If the first option had been ‘Abruzzo’ I would not have been able to distinguish between persons actually living in this region and people who ‘forgot’ to make a choice while filling out the form.

An alternative to “select” would be to use the datalist tag. The datalist tag (combined with option tags) provides the user with an (autocomplete) list. But he/she can still insert a name not mentioned in the list. Because it’s almost impossible to provide all possible cities in a list it’s better to use datalist for this input.

Focus state styling

When a user clicks on one of the input fields Bootstrap applies the focus state. By default this will result in a blue outline and box-shadow.

I changed the styling of the focus state and added a background-color with these CSS style rules:

In the next tutorial you will learn how to create a MySQL database that can record data from this form.

5 comments

buckmanity - November 15, 2016 Reply

thank u so much

Pratik Matkar - May 1, 2016 Reply

Its very useful 🙂

Theo - May 2, 2016 Reply

Thanks Pratik!

Omar - February 18, 2016 Reply

I am a newbie and can survive with this.

Dolores7144 - March 5, 2015 Reply

Everything is very open with a precise description of the challenges. It was really informative. Your site is very helpful. Many thanks for sharing!

Add your comment

Related Posts