Bootstrap/C3/Forms-in-Bootstrap/English

From Script | Spoken-Tutorial
Jump to: navigation, search
VISUAL CUE NARRATION
Slide: Title Welcome to the Spoken Tutorial on Forms in Bootstrap.
Slide 2:

Learning Objectives

In this tutorial, we will learn about:
  • Form controls
  • Help text
  • Sizing
  • Read-only plain text
  • Checkboxes and radio buttons and
  • File inputs
Slide 3:

System Requirements

This tutorial is recorded using,
  • Ubuntu Linux OS v 18.04
  • Bootstrap 4.6.0
  • HTML5
  • gedit Text Editor and
  • Firefox web browser
Slide 4: Prerequisite

https://spoken-tutorial.org

  • To follow this tutorial, you should be familiar with HTML and CSS.
  • If not, please go through the HTML and CSS tutorials on this website.
[Firefox- Form.html]

Point to the various fields as per narration.

In this tutorial, we will design a form layout as shown here, in Bootstrap.

We'll create an input box for Name, Mobile Number, Email and Password.

We’ll also create a select box for Country.

Next, we will create a read-only plain textbox for Member ID.

Then, we will create a checkbox for Language known and radio buttons for Gender.

After this, we will learn how to input files for upload.

We will also learn various Bootstrap classes for designing and styling form elements.

Let’s see how to create this form.

Point to Form.html & Mystyle.css in My-bootstrap folder Locate the file Form.html in the My-bootstrap folder.

We will use this new file Form.html for demonstration.

Slide: Code File
  • The file used in this tutorial is available in the Code Files link on this tutorial page.
  • Please download and extract it.
  • Make a copy and then use it while practising.
Open Form.html in gedit Open the file Form.html in a text editor.

I have opened it in the gedit Text Editor.

[gedit - Form.html]

Highlight: <body>

</body>

We have created this HTML file with a container and a heading.

Inside this container, we have created a row and a column.

We will add all the form elements inside this container.

[gedit - Form.html]

Type:

<form>

<label>Name</label> <input type="text"> </form>

Let’s create some fields that take input from the users.

Inside the column, type this code as shown here.

Using <form> tag, we have created a label and an input textbox.

.form-group class is used to create a proper form layout.

Every form element will use this class.

Press the save button Save the file.
Open Form.html in Firefox Open the file Form.html in a web browser.
[Firefox] Notice that the input textbox with the label “Name” is added to the page.

Note that this element is not styled properly. So, let’s do this.

Slide: .form-control class For this, first let’s see what is .form-control class.
  • It is used to style <input>s, <select>s, and <textarea>s.
  • Styling includes general appearance, focus state, sizing, etc.
Switch to Form.html Switch to the file Form.html in the editor.
[gedit - Form.html]

Update: <form>

<label>Name</label> <input type="text" class="form-control"> </form>

Add the class .form-control as shown here.
Click the save button Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox] Observe that the elements are now properly styled. For example: some margin is added.

And when we click on the input textbox, it gets focused with a light blue border color.

Let's continue to create the other form elements.

Switch to Form.html Switch to the Form.html file in the text editor.
[gedit - Form.html]

Update:

<label>Mobile Number</label> <input type="text" class="form-control">

<label>Email</label> <input type="email" class="form-control">

<label>Password</label> <input type="password" class="form-control">

<label>Country</label> <select class="form-control"> <option>India</option> <option>Canada</option> <option>USA</option> <option>China</option> </select>

After the input textbox for Name, type the code as shown here.

Basically, we have created input textboxes for Mobile number, Email and Password.

And we have also created a select box for Country.

Click the save button Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

We have successfully created all the fields in the form, with some stylings.

Next, let’s learn about Help text.

Slide: Help Text
  • Help text is an efficient way to guide users to enter correct data in a form.
  • Generally, it is displayed at the bottom of the control.
  • .form-text class is used to add the Help text for form controls.
Switch to Form.html Switch to the file Form.html in the editor.
[gedit - Form.html]

Type:

<label>Password</label> <input type="password" class="form-control"> Passwords must be at least 6 characters.

Update the password form group as shown here.

Using the .form-text class, we’ve added “Passwords must be at least 6 characters” as the Help text.

Here, .text-muted class is used for light grey text color.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight with red box: Password must be at least 6 characters.

Notice that the Help text is added below the Password input textbox.
Next, let’s learn to change the height of these input fields.

We’ll increase the height of the Name input textbox.

And decrease the height of the Password input textbox.

Switch to Form.html Switch to the Form.html file.
[gedit - Form.html]

Update: <form>

<label>Name</label> <input type="text" class="form-control form-control-lg">

<label>Mobile Number</label> <input type="text" class="form-control">

<label>Email</label> <input type="email" class="form-control">

<label>Password</label> <input type="password" class="form-control form-control-sm"> Passwords must be at least 6 characters.

<label>Country</label> <select class="form-control"> <option>India</option> <option>Canada</option> <option>USA</option> <option>China</option> </select> </form>

Add .form-control-lg class to the Name input textbox.

This class will increase the height of the input textbox.

Then add the .form-control-sm class to the Password input textbox.

This class will decrease the height of the input textbox.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox] Observe the output.

The height of the Name input box has increased.

While the height of the Password input textbox has decreased.

Next, we will see how to create read-only plain text.

Switch to Form.html Switch to the file Form.html in the editor.
[gedit - Form.html]

Type:

<form>

<label>Member ID</label> <input type="text" value="12104" class="form-control-plaintext" readonly> </form>

After the select boxes, type the code as shown here.

We have created a column.

Within this, we’ve created an input textbox for Member ID and assigned a value to it.

We have used the read-only attribute.

This prevents the user from making any modifications in the value.

Here, the .form-control-plaintext class is used for styling the plain text.

For eg: Setting the correct margin and padding, setting transparent background, etc.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox] Member ID field is added to this page.

Click on the number.

Notice that we cannot change this field. We can only read it.

Next, let’s understand how to add and style checkboxes and radio buttons.

Switch to Form.html Switch to the editor.
[gedit - Form.html]

Update:

<form>

<label>Member ID</label> <input type="text" value="12104" class="form-control-plaintext" readonly>

<label>Language Known</label>

<input type="checkbox" class="form-check-input" id="language1"> <label for="language1" class="form-check-label"> English </label>

<input type="checkbox" class="form-check-input" id="language2"> <label for="language2" class="form-check-label"> Hindi </label>

<input type="checkbox" class="form-check-input" id="language3"> <label for="language3" class="form-check-label"> Marathi </label>

<label>Gender</label>

<input type="radio" class="form-check-input" name="gender" id="male"> <label for="male" class="form-check-label"> Male </label>

<input type="radio" class="form-check-input"name="gender" id="female"> <label for="female" class="form-check-label"> Female </label> </form>

After Member ID, type the code as shown here.

We’ve created checkboxes for selecting Language known and radio buttons for selecting Gender.

Here, we have used the .form-check class for checkboxes and radio buttons.

This single class is used for both checkboxes and radio buttons to improve the layout.

Here, .form-check-input class is added to every checkbox and radio button.

And .form-check-label class to their labels.

These classes are used for setting the correct margin and padding.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox] So, now we have successfully created the checkboxes and radio buttons.

Next, let's learn to input files for upload

Switch to Form.html Switch to the file Form.html in the editor.
[gedit - Form.html]

Type:

<label>Upload Your Photo</label> <input type="file" class="form-control-file">

After the radio buttons, type the code as shown here.

With this, we will be able to upload any file.

Here, we have used the input type “file”.

.form-control-file class is used for setting background color, margin, padding, etc.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox] Observe that we can upload files now.

Click on the browser to select the file which you want to upload.

[Firefox]

Right click >> Inspect Element

Click on Responsive Design Mode

Here, we have used class .col-md-6.

So, the form appears in 2-column layouts for screen size greater than equal to 768px.

This form layout is used for laptop and desktop devices.

Let’s see this layout for screen size less than 768px.

Enable the Responsive design mode.

I will decrease the screen size below 768px.

Observe that the form is in a single column now.

This layout is used for tablets and mobile devices.

Only narration In this way, using Bootstrap classes we can create forms.

With this we have come to the end of this tutorial.

Let us summarize.

Slide 6: Summary In this tutorial, we have learnt about:
  • Form controls
  • Help Text
  • Sizing
  • Read-only plain text
  • Checkboxes and radio buttons and
  • File Inputs
Slide 8: Assignment

As an assignment-

  • Open the Form.html file.
  • Increase the height of the Mobile Number input textbox using .form-control-lg class.
  • Save the file.
  • Observe the output on the web browser.
Slide: About Spoken Tutorial project The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

Slide: Spoken Tutorial Workshops

The Spoken Tutorial Project team conducts workshops and gives certificates. For more details, please write to us.

Slide: Forum Please post your timed queries in this forum.
Slide: Acknowledgement Spoken Tutorial project is funded by the Ministry of Education (MoE), Govt. of India.
Slide: Thanks The script and video for this tutorial was contributed by Neha Solanki.

This is Nancy Varkey from the Spoken Tutorial project team, IIT Bombay signing off.

Thanks for watching.