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

Nirmala Venkat at 08:06, 6 September 2021

2021-09-06T08:06:50Z

Nirmala Venkat at 10:20, 13 August 2021

2021-08-13T10:20:45Z

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

2021-08-13T10:09:39Z

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

New page

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

Learning Objectives
|| In this tutorial, we will learn about:
* '''Block level buttons '''and
* '''Inline forms'''
|-
|| 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]
|| In this tutorial, we will design two '''layouts''' using '''Bootstrap classes.'''

First, we will create two '''buttons''' named
'''Login''' and '''Sign Up''' in '''Mypage.html'''
Then, we will create a '''login page'''.
|-
|| Point to Form.html & Mypage.html in My-bootstrap folder
|| Locate the files '''Mypage.html '''and''' Form.html '''in the '''My-bootstrap''' folder.

We will use '''Form.html''' and '''Mypage.html files '''which we saved earlier for this demonstration.
|-
|| Slide: Code Files
||
* The files used in this tutorial are available in the '''Code Files''' link on this tutorial page.
* Please download and extract them.
* Make a copy and then use them while practising.

|-
|| Open Form.html in gedit
|| Open the file '''Mypage.html''' in a '''text editor.'''
I have opened it in the '''gedit Text Editor.'''
|-
||
|| Let’s start with creating''' buttons.'''
|-
|| [gedit - Mypage.html]

<div class="col-sm-3 order-sm-last pt-sm-5 border border-primary bg-light">
<a class="btn btn-primary" href="#" role="button">Login</a>
<a class="btn btn-primary" href="#" role="button">Sign Up</a>
<ul>
<a href="#" class="text-decoration-none text-danger"><li> Fruits & Vegetables </li></a>
<a href="#" class="text-decoration-none text-danger"><li> Foodgrain </li></a>
<a href="#" class="text-decoration-none text-danger"><li> Beverages </li></a>
<a href="#" class="text-decoration-none text-danger"><li> Personal care </li></a>
<a href="#" class="text-decoration-none text-danger"><li> Snacks & Branded Foods </li></a>
</ul>

|| In the '''2nd row''' before '''links''', type the code as shown.
Here, we are creating two '''button tags''' named '''Login''' and '''Sign Up.'''
We are using '''button classes''' on '''anchor''' '''elements'''.
For this, the '''link''' should be given the '''role equals to “button”.'''
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Open Mypage.html in Firefox
|| Open the file '''Mypage.html''' in a '''web browser'''.
|-
|| [Firefox]
|| We have successfully created two '''buttons''' named '''Login''' and '''Sign Up.'''
|-
||
|| We can also create '''block level buttons'''.

Let’s see how to do that.
|-
|| Slide: Block Level Buttons
|| '''.btn-block class:'''

Is used to create '''block level buttons''' that span the '''full width''' of the parent''' element'''.
Let’s use this '''class''' in our '''layout'''.
|-
|| Switch to Mypage.html
|| Switch to the''' Mypage.html''' file.
|-
|| [gedit - Form.html]

Update:
<a class="btn btn-primary btn-block" href="#" role="button">Login</a>
<a class="btn btn-primary btn-block" href="#" role="button">Sign Up</a>
|| Add '''.btn-block class''' to both the '''buttons,''' as shown.
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Switch to firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox]

|| Notice the '''buttons'''.
See how they span across the full width of this column.
|-
||
|| Now, let’s '''link''' this '''Mypage.html''' with the '''Form.html''', which we created earlier.
|-
|| Switch to Mypage.html
|| Switch to the''' Mypage.html''' file in the '''text editor'''.
|-
|| [gedit - Mypage.html]
<div class="col-sm-3 order-sm-last pt-sm-5 border border-primary bg-light">
<a class="btn btn-primary" href="#" role="button">Login</a>
<a class="btn btn-primary" href="Form.html" role="button">Sign Up</a>
<ul>
<a href="#" class="text-decoration-none text-danger"><li> Fruits & Vegetables </li></a>
<a href="#" class="text-decoration-none text-danger"><li> Foodgrain </li></a>
<a href="#" class="text-decoration-none text-danger"><li> Beverages </li></a>
<a href="#" class="text-decoration-none text-danger"><li> Personal care </li></a>
<a href="#" class="text-decoration-none text-danger"><li> Snacks & Branded Foods </li></a>
</ul>

|| Add the '''html''' file as shown here.
Here, we have '''linked Form.html''' using the '''Sign Up button.'''
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Open Mypage.html in Firefox
|| Switch to the '''browser''' and refresh the page.
|-
|| [Firefox]
|| Click on the '''Sign Up button.'''

'''Member registration form '''opens.

Using the '''button,''' we have successfully '''linked Form.html''' with '''Mypage.html'''.
|-
||
|| Now, let’s create a '''Login form''' using '''Inline forms'''.
|-
|| Slide: Inline Forms
|| '''.form-inline class:'''
Is used to display '''labels, form controls, buttons''', etc. in a single horizontal row.

Let’s try this.
|-
|| [Firefox-Login.html]
|| Let us create a '''login''' page as shown here with two '''textboxes''', one '''check box''' and one '''button'''.
|-
|| Open Form.html in gedit
|| Open the file '''Login.html''' in the '''text editor.'''

I have opened it in the '''gedit Text Editor.'''
|-
|| [gedit - Login.html]

Type:
<form class="form-inline">
<div class="form-group mx-1">
<label class="sr-only" for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
<div class="form-group mx-1">
<label class="sr-only" for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<div class="form-group mx-1">
<label><input type="checkbox" class="mx-1"> Remember me</label>
<button type="submit" class="btn btn-primary mx-1">Sign in</button>
</form>
|| Inside the '''column class''', type the code as shown.
Notice that we have added '''.form-inline class '''here'''.'''

Then we have created two '''input boxes''' for '''email''' and '''password'''.

We have used placeholders, which will give a short hint of the expected '''input'''.

We have also created '''labels''' for '''email''' and '''password''', but they will be invisible on the '''browser'''.

This is because we have used the '''.sr-only class, '''which hides the '''label.'''

This can only be read by the '''screen reader'''.

Then we have created one '''check box '''for the''' “Remember me” option'''and a '''Submit button'''.

|-
|| Press Ctrl + S
|| Save the file.
|-
|| Open Login.html in Firefox
|| Open the file '''Login.html''' in a '''web browser'''.
|-
|| [Firefox]

Highlight the output
|| We have successfully created the '''Login''' '''page'''.
The '''labels''' for '''email''' and '''password''' are invisible.

Notice that all the '''form elements''' are displayed in a single horizontal row.

In this way, we can create customised '''Inline forms.'''
|-
||
|| Next, let’s '''link''' this '''Login.html''' with '''Mypage.html''', which we had created earlier.
|-
|| Switch to Mypage.html
|| Switch to the''' Mypage.html''' file.
|-
|| [gedit - Mypage.html]
<div class="col-sm-3 order-sm-last pt-sm-5 border border-primary bg-light">
<a class="btn btn-primary" href="Login.html" role="button">Login</a>
<a class="btn btn-primary" href="Forms.html" role="button">Sign Up</a>
<ul>
<a href="#" class="text-decoration-none text-danger"><li> Fruits & Vegetables </li></a>
<a href="#" class="text-decoration-none text-danger"><li> Foodgrain </li></a>
<a href="#" class="text-decoration-none text-danger"><li> Beverages </li></a>
<a href="#" class="text-decoration-none text-danger"><li> Personal care </li></a>
<a href="#" class="text-decoration-none text-danger"><li> Snacks & Branded Foods </li></a>
</ul>

|| Add the '''html''' file as shown here.

Here, we have '''linked Login.html '''with the help of the '''Login button.'''
|-
|| Press Ctrl + S
|| Save the file.
|-
|| Open Mypage.html in Firefox
|| Open the file '''Mypage.html''' in a '''web browser'''.
|-
||
|| Refresh the page.
|-
|| [Firefox]
|| Click on the '''Login button'''.

The '''Login''' page opens.

Please note:

The present '''form''' '''layout''' is used for '''laptop and desktop devices.'''
|-
|| Only narration
|| With this we have come to the end of this tutorial.
Let us now summarize.
|-
|| Slide 6: Summary
|| In this tutorial, we have learnt about:

* '''Block Level buttons '''and
* '''Inline Forms'''
|-
|| Slide 8: Assignment
|| As an assignment-

* Open '''Mypage.html''' in the '''web browser'''.
* Change the '''screen size''' of '''Mypage.html''' to make it suitable for '''tablet''' and '''mobile devices.'''
* Click on the '''Login button''' and observe the output.
* '''Hint : '''
**Enable the '''Responsive design mode.'''
**Decrease the''' screen size '''for all the '''elements''' to appear in a single '''column'''.
|-
|| 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.
|-
|}

@@ Line 278: / Line 278: @@
 || Only narration
 || With this we have come to the end of this tutorial.
-Let us now summarize.
+Let us summarize.
 |-
 || Slide 6: Summary

@@ Line 35: / Line 35: @@
 First, we will create two '''buttons''' named
-'''Login''' and '''Sign Up''' in '''Mypage.html'''
+'''Login''' and '''Sign Up''' in '''Mypage.html'''.
 Then, we will create a '''login page'''.
 |-
@@ Line 61: / Line 62: @@
 <div class="col-sm-3 order-sm-last pt-sm-5 border border-primary bg-light">
 <a class="btn btn-primary" href="#" role="button">Login</a>
 <a class="btn btn-primary" href="#" role="button">Sign Up</a>
 <ul>
@@ Line 71: / Line 73: @@
 || In the '''2nd row''' before '''links''', type the code as shown.
 Here, we are creating two '''button tags''' named '''Login''' and '''Sign Up.'''
 We are using '''button classes''' on '''anchor''' '''elements'''.
 For this, the '''link''' should be given the '''role equals to “button”.'''
 |-
 || Press Ctrl + S
@@ Line 93: / Line 99: @@
 Is used to create '''block level buttons''' that span the '''full width''' of the parent''' element'''.
 Let’s use this '''class''' in our '''layout'''.
 |-
@@ Line 102: / Line 109: @@
 Update:
 <a class="btn btn-primary btn-block" href="#" role="button">Login</a>
 <a class="btn btn-primary btn-block" href="#" role="button">Sign Up</a>
 || Add '''.btn-block class''' to both the '''buttons,''' as shown.
@@ Line 125: / Line 133: @@
 <div class="col-sm-3 order-sm-last pt-sm-5 border border-primary bg-light">
 <a class="btn btn-primary" href="#" role="button">Login</a>
 <a class="btn btn-primary" href="Form.html" role="button">Sign Up</a>
 <ul>
@@ Line 173: / Line 182: @@
 <div class="form-group mx-1">
 <label class="sr-only" for="inputEmail">Email</label>
 <input type="email" class="form-control" id="inputEmail" placeholder="Email">
 <div class="form-group mx-1">
-<label class="sr-only" for="inputPassword">Password</label>
+<label class="sr-only" for="inputPassword">
-<input type="password" class="form-control" id="inputPassword" placeholder="Password">
+Password</label>
 <div class="form-group mx-1">
 <label><input type="checkbox" class="mx-1"> Remember me</label>
-<button type="submit" class="btn btn-primary mx-1">Sign in</button>
+<label><input type="checkbox" class="mx-1">
 </form>
 || Inside the '''column class''', type the code as shown.
 Notice that we have added '''.form-inline class '''here'''.'''
@@ Line 222: / Line 244: @@
 <div class="col-sm-3 order-sm-last pt-sm-5 border border-primary bg-light">
 <a class="btn btn-primary" href="Login.html" role="button">Login</a>
 <a class="btn btn-primary" href="Forms.html" role="button">Sign Up</a>
 <ul>