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

2020-03-24T10:09:24Z

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

New page

{| border = "1"
|-
|| Time
|| Narration
|-
|| 00:01
|| Welcome to the spoken tutorial on '''More on Forms''' in '''HTML'''.
|-
|| 00:07
|| In this tutorial we will learn about:

'''Forms elements''' and '''Input types''' in '''HTML'''

|-
|| 00:17
|| To practise this tutorial, you should have knowledge of '''HTML'''.

|-
|| 00:23
|| If not, then go through the corresponding''' '''tutorials on this website.

|-
|| 00:29
|| To record this tutorial, I’m using

Ubuntu Linux 16.04 OS'''

|-
|| 00:37
||'''HTML5'''

|-
|| 00:39
|| '''gedit Text Editor'''

'''Firefox web browser'''

|-
|| 00:46
||However you may use any other '''editor''' or '''browser''' of your choice.
|-
|| 00:53
|| The files used in this tutorial are available in the '''Code Files''' link on this tutorial page.

Please download and extract them.

|-
|| 01:05
|| Open the file '''MyWebForm.html '''which we created earlier in this series, in a '''text editor'''.
|-
|| 01:14
|| We learnt about some of the '''input''' '''types''' earlier.

|-
|| 01:18
||Now let us learn some other '''form input types.'''
|-
|| 01:22
|| Let me add a '''field''' for '''Date of Birth''' in the '''registration form'''.

|-
|| 01:29
||Next to the '''Last name''', type the code as shown.

|-
|| 01:35
|| Here I have used the '''input type''' '''date'''.
|-
||01:39
|| Save the file.
|-
|| 01:41
|| Open the file '''MyWebForm.html''' in a '''web browser'''.

And observe the output.

|-
|| 01:49
|| Here we see a '''field''' to select '''date''', '''month''' and '''year'''.

|-
|| 01:54
|| We can either type the values manually.

Or we can use the controls to select the desired '''date''', '''month''' and '''year'''.
|-
|| 02:05
|| We have used the''' input type date''' in this example.

|-
|| 02:10
||Likewise, we have some other '''input types''' to get '''Date Time''' from the user.

|-
|| 02:17
||These are the '''date '''and''' time input types''' available in '''HTML.'''

|-
|| 02:23
||Explore these on your own.
|-
|| 02:26
|| Switch back to the '''text editor'''.

|-
|| 02:29
||Now let me add the code to get the '''input''' for '''Gender'''.

|-
|| 02:34
||Next to the '''Date of birth input''', type the code as shown.
|-
||02:39
|| I have set the '''input type''' as '''radio.'''
|-
|| 02:44
|| Here I have written a single '''label''' and three '''input''' '''fields''' with the same name '''gender.'''

|-
|| 02:52
||The user will select any one option from these three.

|-
|| 02:57
||But each section will have a different value.

|-
|| 03:02
||Based on the selection, the respective value will be stored.
|-
|| 03:07
|| Save the file.
|-
|| 03:09
|| Switch to the '''browser''' and refresh the page.
|-
|| 03:13
|| Notice that the '''Gender field''' is displayed and it has three '''radio''' '''buttons'''.
|-
|| 03:20
|| Let me click on the '''Male''' '''radio''' '''button'''.
|-
|| 03:25
|| Now click on the '''Female radio button'''.

|-
|| 03:29
||Immediately the '''Male radio button''' is unselected.

|-
|| 03:34
||Suppose we have one more set of '''radio buttons'''.

How will it work?

|-
|| 03:39
||Let us check.

Switch to the code.

|-
|| 03:44
||Add one more '''field''' called '''Residential Status.'''

|-
|| 03:49
||Next to the '''Gender field''', type the code as shown.
|-
|| 03:55
|| Save the file.
|-
|| 03:57
|| Switch to the '''browser''' and refresh the page.
|-
|| 04:00
|| We got one more set of '''radio buttons''' for '''Residential Status.'''
|-
|| 04:07
|| Let me click on the '''Male radio button''' in the '''Gender field'''.
|-
|| 04:12
|| Then click on '''Indian''' in the '''Residential Status field'''.
|-
|| 04:18
|| Notice that when we click on the '''radio button''' '''Indian''', the '''Male radio button''' remains selected.
|-
|| 04:26
|| As the '''radio''' '''button''' name is different, the selection is unchanged in the '''Gender field'''.
|-
|| 04:33
|| Switch back to the '''text editor'''.
|-
|| 04:36
|| Next we’ll add the code to get a '''phone number''' from the user.

|-
|| 04:42
||Type the code as shown here.
|-
|| 04:46
|| Here I have set the '''input type''' as '''number.'''
|-
|| 04:51
|| Save the file.
|-
|| 04:53
|| Switch to the '''browser''' and refresh the page.
|-
|| 04:57
|| We got a field for '''contact number'''

|-
|| 05:00
||Let me type a '''phone number''' in this '''field'''.
|-
|| 05:04
|| Using the controls we can increase or decrease the numbers.

|-
|| 05:09
||This is how the '''number input type''' works.
|-
|| 05:13
|| Instead of '''number input type''', we can also use '''tel''' to get phone number.
|-
|| 05:20
|| Next let us try another '''form element''' called '''select'''.
|-
|| 05:24
|| Next to the '''contact number input type''', type the code as shown.

|-
|| 05:30
||Here I have written a code to select '''City''' from a list.
|-
|| 05:35
|| For this I’m using '''select tag'''.

It has both a start and an end.
|-
|| 05:43
|| Using the '''option tag''' we can add values to the list.
|-
||05:47
|| Save the file.
|-
|| 05:50
|| Switch to the '''browser''' and refresh the page.
|-
|| 05:54
|| We got the '''City field''' along with a drop-down list.

|-
|| 05:58
||We can select only one value from this list.

|-
|| 06:03
||By default, the first value is pre-selected.
|-
|| 06:08
|| There’s another way of showing this option.

|-
|| 06:11
||Let me demonstrate that.

Switch to the '''text editor'''.
|-
||06:16
|| Before the '''select '''start '''tag,''' type the code as shown.

|-
|| 06:22
|| Then after the '''select '''end''' tag,''' type the code as shown.

|-
||06:28
|| I have used the '''tag datalist''' before the '''select element'''.

|-
|| 06:33
||This will store the '''select option''' value in the form of a list.
|-
|| 06:39
|| Next to the '''datalist '''end '''tag''', type the code as shown.

Here I have included a '''text input type'''.
|-
|| 06:49
|| And included the '''datalist''' inside the '''input field'''.
|-
|| 06:54
|| Save the file.
|-
|| 06:56
|| Switch to the '''browser''' and refresh the page.
|-
|| 07:00
|| The drop-down is changed as a '''text field''' for '''City'''.
|-
|| 07:05
|| Let me type '''c h.'''
|-
|| 07:08
|| Immediately the values which start from '''c h''' will be displayed.

|-
|| 07:15
||This feature is similar to '''Google search'''.

|-
|| 07:19
||This is the speciality of '''datalist element''' in '''HTML5.'''
|-
|| 07:25
|| Now say, you want to group some of the '''form elements''' together.

|-
|| 07:30
||And you want to do this such that it doesn’t affect the other '''elements'''.

For that we have an '''element''' called '''Fieldset'''.

|-
|| 07:40
||Switch to the '''text editor '''.
|-
|| 07:43
|| Let us create a '''fieldset''' for '''mail id''' and '''password fields'''.

|-
|| 07:48
||Before the '''Email label field''', type the code as shown.
|-
|| 07:54
|| Along with the '''fieldset''', I have used the '''legend tag''' to give a name for the '''field'''.

However, the '''legend tag''' is not mandatory.
|-
|| 08:05
|| Next, to the '''retype password field''', close the '''fieldset'''.
|-
|| 08:10
|| Save the file.
|-
|| 08:12
|| Switch to the '''browser''' and refresh the page.
|-
|| 08:17
|| Till now, we have created a '''form''' to get some data from the user.

|-
|| 08:23
||Once we have filled the '''form''', we will click the '''Submit''' button to proceed further.

|-
|| 08:29
||Now we will see how can we send this data to the next step.
|-
|| 08:35
|| '''Form method''' will be used when we are working with:

Interactive '''web pages''' and '''Client-server''' mechanism

|-
|| 08:43
|| Each '''form''' will send the data to the next step for processing based on two '''methods'''.

'''GET''' '''POST'''

|-
|| 08:53
||This has to be defined inside the '''form''' start '''tag'''.
|-
|| 08:58
|| '''GET method''' will pass the values via '''URL'''

|-
|| 09:02
|| Passed values will be seen in the '''URL'''

|-
|| 09:06
|| Whereas, '''POST method''' will pass the values via '''HTTP request'''.

|-
|| 09:12
|| Passed values will not be seen in the '''URL'''.

|-
|| 09:16
|| It is advisable to use '''POST method''' for secure transactions like '''login''' and money transactions.

|-
|| 09:26
|| This is the syntax.

|-
|| 09:30
||Here the '''action attribute''' defines the place to which the values have to be passed.
|-
|| 09:37
|| With this we have come to the end of this tutorial.

Let us summarize.
|-
|| 09:44
|| In this tutorial, we have learnt about: '''Form Input types: Date, Radio, Number'''

|-
|| 09:52
|| '''Form Elements: Select, Datalist, Fieldset'''

|-
|| 09:57
|| '''Form Methods: GET, POST'''

in '''HTML'''
|-
|| 10:02
|| As an assignment-

Open the file '''MyLoginForm.html'''

|-
|| 10:08
||Get the following details from the user

Date of Birth, Gender, City

|-
|| 10:15
|| The video at the following link summarizes the Spoken Tutorial project.

Please download and watch it.
|-
|| 10:23
|| The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.
|-
|| 10:34
|| Please post your timed queries in this forum.
|-
|| 10:38
|| Spoken Tutorial Project is funded by MHRD, Government of India.

|-
|| 10:43
|| This is Praveen from IIT Bombay signing off.

Thank you for joining.
|-
|}

HTML/C3/More-on-Forms/English-timed - Revision history

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