HTML/C3/Forms-in-HTML/English-timed

Time	Narration
00:01	Hello and welcome to the spoken tutorial on Forms in HTML.
00:07	In this tutorial we will learn about: Forms and How to create a simple form in HTML
00:17	To practise this tutorial, you should have knowledge of HTML.
00:22	If not, then go through the corresponding tutorials on this website.
00:27	To record this tutorial, I’m using Ubuntu Linux 16.04 OS
00:36	HTML5
00:38	gedit Text Editor
00:41	Firefox web browser
00:44	However you may, use any other editor or browser of your choice.
00:50	The files used in this tutorial are available in the Code Files link on this tutorial page. Please download and extract them.
01:01	Forms are generally used to collect some information from the user.
01:06	It can be a Registration Form, Login Form , Survey, Billing Form Or any other form which collects data.
01:17	To create web forms, HTML provides some Form Elements for different needs.
01:24	The elements are: Label, Input, Text Area, Select
01:34	Datalist, Output, Fieldset, Button
01:41	We will learn them one by one with an example.
01:46	For this demonstration we will create a simple User Registration form like this.
01:53	Open an empty file in any text editor.
01:57	Type the code as shown here.
02:01	Save the file as MyWebForm.html
02:06	For this demonstration I have already done this.
02:11	To create a form, we have to include the form tag.
02:16	It has both start and end tags.
02:20	I will add the form tag after the h3 heading tag.
02:26	The first information which we want to get from the user is First Name.
02:32	Next to the form start tag, type First Name:
02:38	To get the input from the user, we will use the input element. Type input within angular brackets
02:48	The input tag doesn’t have an end tag.
02:52	To get input from the user, we can use any one of the following input types based on our requirement.
03:02	To get the name details, we will use the input type as text.
03:07	So inside the input tag, type: type equal to within double quotes text"
03:16	Next to the input tag, let me add a break tag for better alignment.
03:22	Save the file.
03:24	Open the file MyWebForm.html in a web browser.
03:28	I will be using Firefox web browser for this purpose.
03:34	Observe the output.
03:36	The text “User Registration Form” is displayed.
03:42	Then First Name along with an empty text box is displayed.
03:49	Suppose we want to send the collected data to another form or to a database.
03:54	We will add the name attribute to the form elements. Let me do that now.
04:00	Switch to the text editor.
04:04	Inside the input tag, next to the type attribute, we will type: name equal to within double quote fname
04:15	The input which I’m going to get from the user using this element is First Name.
04:22	So, here I have given the value for the name attribute as fname.
04:28	However you can give any other unique value of your choice.
04:35	Please note that, this will not make any change in the visual appearance.
04:40	Notice here, we have written the text “First Name” manually.
04:47	HTML has a form element for labels also. Let us try that.
04:54	Replace the words “First Name” with the line as shown here.
05:01	Here I have used the tag label.
05:05	It has both a start and an end.
05:10	Inside the tag, I have written First Name along with the bold tag.
05:16	Inside the label start tag, I have added an attribute for and fname as a value to it.
05:25	Notice that, I have given the same value in label for and input name.
05:32	This is to map the label and the input field.
05:37	As I mentioned earlier, these will not make any change in the displayed output.
05:44	This will be helpful only when we are sending this data to another page or to a database.
05:53	So far, I have created a form to get the first name.
05:57	Likewise, let me add another piece of code to get the last name.
06:04	Type the code as shown here.
06:08	Save the file.
06:10	Switch to the browser and refresh the page.
06:14	Observe the output.
06:16	Now we have the fields to get First Name and Last Name.
06:22	Next we will add 3 more fields to get Email address, Password and Retype Password.
06:31	Switch back to the text editor.
06:34	Next to last name, type the code as shown.
06:40	Here I have set the input type as email.
06:44	During the form submission, this will verify whether the input is a valid email address or not.
06:52	In the Password field, I have set the input type as password.
06:57	So, when we type a password, this input type will display that password as a special character.
07:05	So, others cannot see what we are typing.
07:10	Save the file.
07:12	Switch to the browser and refresh the page.
07:15	Now we have five fields. First Name, Last Name, Email, Password and Retype Password.
07:28	Let me enter some values in these fields.
07:31	First Name as Praveen Last Name as S
07:37	Email as editor.spokentutorial@gmail.com
07:45	Enter Password as 12345.
07:50	While typing the password, notice that it is showing dots instead of the password.
07:57	In the Retype password field, type the same password once again.
08:03	Notice that here also we see dots instead of our typed password.
08:10	So far we have created a form to fill some details from the user.
08:16	To make the form complete, we have to provide a button element, as well.
08:22	Button element is used to perform an action when the button is clicked.
08:28	For eg: store the input data in a database
08:34	Send the form values to another page or script, to perform another action
08:41	or to display some message on the same page.
08:45	For this demonstration, we will create a button to display a message after form submission.
08:53	Switch to the text editor.
08:56	Next to the Retype password line, type the code as shown here.
09:03	The button tag has both a start and an end.
09:08	I have set the display name for the button as Submit.
09:13	Inside the button start tag, I have set an attribute called onclick.
09:19	And the value as "alert('Registration Complete')".
09:25	If we click the Submit button, then the browser will display a message “Registration Complete”.
09:33	Save the file.
09:35	Switch to the browser and refresh the page.
09:40	We now see the Submit button.
09:43	In this example, I haven’t done any form validation to check for empty fields or incorrect data.
09:51	So, without filling the fields, I can simply click on the Submit button.
09:57	And the browser will show a popup window with the message “Registration Complete”.
10:03	Click on OK to close this popup window.
10:09	So far we have learnt to create a simple form to get some data from the user.
10:16	We will learn more about forms in the upcoming tutorial.
10:20	With this we have come to the end of this tutorial. Let us summarize.
10:27	In this tutorial, we have learnt about: Forms and Form elements: Input, Label and Button
10:36	Input types: Text, Email and Password in HTML.
10:42	As an assignment- Create a file MyLoginForm.html
10:48	To get the following details from the user Email Address, Password
10:55	And name the button as “Log-in”
11:00	The video at the following link summarizes the Spoken Tutorial project. Please download and watch it.
11:09	The Spoken Tutorial Project team conducts workshops and gives certificates. For more details, please write to us.
11:19	Please post your timed queries in this forum.
11:24	Spoken Tutorial Project is funded by MHRD, Government of India.
11:30	This is Praveen from IIT Bombay signing off. Thank you for joining.

Contributors and Content Editors

PoojaMoolya