PoojaMoolya: Created page with "{| border = "1" |- || Time || Narration |- || 00:01 || Hello and welcome to the spoken tutorial on '''Forms''' in '''HTML'''. |- || 00:07 || In this tutorial we will learn..."

2020-03-24T09:15:52Z

Created page with "{| border = "1" |- || Time || Narration |- || 00:01 || Hello and welcome to the spoken tutorial on '''Forms''' in '''HTML'''. |- || 00:07 || In this tutorial we will learn..."

New page

{| border = "1"
|-
|| 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.
|-
|}

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

PoojaMoolya: Created page with "{| border = "1" |- || Time || Narration |- || 00:01 || Hello and welcome to the spoken tutorial on '''Forms''' in '''HTML'''. |- || 00:07 || In this tutorial we will learn..."