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

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.