Difference between revisions of "Bootstrap/C3/Inline-Forms-in-Bootstrap/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "{| border="1" |- || '''VISUAL CUE''' || '''NARRATION''' |- || Slide: Title || Welcome to the Spoken Tutorial on '''Inline Forms in Bootstrap.''' |- || Slide 2: Learning Obje...")
 
Line 35: Line 35:
  
 
First, we will create two '''buttons''' named  
 
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'''.
 
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">
 
<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">Login</a>
 +
 
<a class="btn btn-primary" href="#" role="button">Sign Up</a>
 
<a class="btn btn-primary" href="#" role="button">Sign Up</a>
 
<ul>
 
<ul>
Line 71: Line 73:
  
 
|| In the '''2nd row''' before '''links''', type the code as shown.
 
|| In the '''2nd row''' before '''links''', type the code as shown.
 +
 
Here, we are creating two '''button tags''' named '''Login''' and '''Sign Up.'''
 
Here, we are creating two '''button tags''' named '''Login''' and '''Sign Up.'''
 +
 
We are using '''button classes''' on '''anchor''' '''elements'''.
 
We are using '''button classes''' on '''anchor''' '''elements'''.
 +
 
For this, the '''link''' should be given the '''role equals to “button”.'''
 
For this, the '''link''' should be given the '''role equals to “button”.'''
 +
 
|-
 
|-
 
|| Press Ctrl + S
 
|| Press Ctrl + S
Line 93: Line 99:
  
 
Is used to create '''block level buttons''' that span the '''full width''' of the parent''' element'''.
 
Is used to create '''block level buttons''' that span the '''full width''' of the parent''' element'''.
 +
 
Let’s use this '''class''' in our '''layout'''.
 
Let’s use this '''class''' in our '''layout'''.
 
|-
 
|-
Line 102: Line 109:
 
Update:
 
Update:
 
<a class="btn btn-primary btn-block" href="#" role="button">Login</a>
 
<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>
 
<a class="btn btn-primary btn-block" href="#" role="button">Sign Up</a>
 
|| Add '''.btn-block class''' to both the '''buttons,''' as shown.
 
|| 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">
 
<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">Login</a>
 +
 
<a class="btn btn-primary" href="Form.html" role="button">Sign Up</a>
 
<a class="btn btn-primary" href="Form.html" role="button">Sign Up</a>
 
<ul>
 
<ul>
Line 173: Line 182:
 
<div class="form-group mx-1">
 
<div class="form-group mx-1">
 
<label class="sr-only" for="inputEmail">Email</label>
 
<label class="sr-only" for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
+
 
 +
<input type="email" class="form-control"  
 +
id="inputEmail" placeholder="Email">
 +
 
 
<div class="form-group mx-1">
 
<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>
 +
 
 +
<input type="password" class="form-control"
 +
id="inputPassword" placeholder="Password">
 
<div class="form-group mx-1">   
 
<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">
 +
Remember me</label>
 +
 
 +
<button type="submit"  
 +
class="btn btn-primary mx-1">
 +
Sign in</button>
 
</form>
 
</form>
 +
 
|| Inside the '''column class''', type the code as shown.
 
|| Inside the '''column class''', type the code as shown.
 +
 
Notice that we have added '''.form-inline class '''here'''.'''
 
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">
 
<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="Login.html" role="button">Login</a>
 +
 
<a class="btn btn-primary" href="Forms.html" role="button">Sign Up</a>
 
<a class="btn btn-primary" href="Forms.html" role="button">Sign Up</a>
 
<ul>
 
<ul>

Revision as of 15:50, 13 August 2021

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]

<a class="btn btn-primary" href="#" role="button">Login</a>

<a class="btn btn-primary" href="#" role="button">Sign Up</a>

    <a href="#" class="text-decoration-none text-danger">
  • Fruits & Vegetables
  • </a> <a href="#" class="text-decoration-none text-danger">
  • Foodgrain
  • </a> <a href="#" class="text-decoration-none text-danger">
  • Beverages
  • </a> <a href="#" class="text-decoration-none text-danger">
  • Personal care
  • </a> <a href="#" class="text-decoration-none text-danger">
  • Snacks & Branded Foods
  • </a>
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]

<a class="btn btn-primary" href="#" role="button">Login</a>

<a class="btn btn-primary" href="Form.html" role="button">Sign Up</a>

    <a href="#" class="text-decoration-none text-danger">
  • Fruits & Vegetables
  • </a> <a href="#" class="text-decoration-none text-danger">
  • Foodgrain
  • </a> <a href="#" class="text-decoration-none text-danger">
  • Beverages
  • </a> <a href="#" class="text-decoration-none text-danger">
  • Personal care
  • </a> <a href="#" class="text-decoration-none text-danger">
  • Snacks & Branded Foods
  • </a>
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">

<label class="sr-only" for="inputEmail">Email</label>

<input type="email" class="form-control" id="inputEmail" placeholder="Email">

<label class="sr-only" for="inputPassword"> Password</label>

<input type="password" class="form-control" id="inputPassword" placeholder="Password">

<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” optionand 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]

<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>

    <a href="#" class="text-decoration-none text-danger">
  • Fruits & Vegetables
  • </a> <a href="#" class="text-decoration-none text-danger">
  • Foodgrain
  • </a> <a href="#" class="text-decoration-none text-danger">
  • Beverages
  • </a> <a href="#" class="text-decoration-none text-danger">
  • Personal care
  • </a> <a href="#" class="text-decoration-none text-danger">
  • Snacks & Branded Foods
  • </a>
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.