Nirmala Venkat: Created page with " {| border="1" |- || '''VISUAL CUE''' || '''NARRATION''' |- || Slide: Title || Welcome to the Spoken Tutorial on '''Forms in Bootstrap.''' |- || Slide 2: Learning Objectives..."

2021-08-12T10:13:54Z

Created page with " {| border="1" |- || '''VISUAL CUE''' || '''NARRATION''' |- || Slide: Title || Welcome to the Spoken Tutorial on '''Forms in Bootstrap.''' |- || Slide 2: Learning Objectives..."

New page

{| border="1"
|-
|| '''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>
<div class="container">
<div class="row">
<div class="col-md-6">
</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>
<div class="form-group">
<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>
<div class="form-group">
<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:
<div class="form-group">
<label>Mobile Number</label>
<input type="text" class="form-control">
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control">
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control">
<div class="form-group">
<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:
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control">
<small class="form-text text-muted"> Passwords must be at least 6 characters. </small>

|| 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>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control form-control-lg">
<div class="form-group">
<label>Mobile Number</label>
<input type="text" class="form-control">
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control">
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control form-control-sm">
<small class="form-text text-muted">
Passwords must be at least 6 characters. </small>
<div class="form-group">
<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:
<div class="col-md-6">
<form>
<div class="form-group">
<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:
<div class="col-md-6">
<form>
<div class="form-group">
<label>Member ID</label>
<input type="text" value="12104" class="form-control-plaintext" readonly>
<div class="form-group">
<label>Language Known</label>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="language1">
<label for="language1" class="form-check-label"> English </label>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="language2">
<label for="language2" class="form-check-label"> Hindi </label>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="language3">
<label for="language3" class="form-check-label"> Marathi </label>

<div class="form-group">
<label>Gender</label>
<div class="form-check">
<input type="radio" class="form-check-input" name="gender" id="male">
<label for="male" class="form-check-label"> Male </label>
<div class="form-check">
<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:
<div class="form-group">
<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.
|-
|}

Bootstrap/C3/Forms-in-Bootstrap/English - Revision history

Nirmala Venkat: Created page with " {| border="1" |- || '''VISUAL CUE''' || '''NARRATION''' |- || Slide: Title || Welcome to the Spoken Tutorial on '''Forms in Bootstrap.''' |- || Slide 2: Learning Objectives..."