View source for HTML/C3/More-on-Forms/English

'''Title of the script: '''More on Forms in HTML

'''Author:''' Praveen S

'''Domain Reviewer: '''M.Deivamani

'''Novice Reviewer:''' Madhulika G

'''Keywords: '''HTML, Form Input types, Date, Radio, Number, Form Elements, Select, Datalist, Fieldset Form Methods, GET, POST, HTML Forms, Spoken Tutorial, Video Tutorial



{| border = "1"
|- 
|| Visual Cue
|| Narration
|- 
|| Slide: Introduction
|| Hello and welcome to the spoken tutorial on '''More on Forms''' in '''HTML'''.
|- 
|| Slide: Learning Objectives
|| In this tutorial we will learn about: 

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

|-
|| Slide: Prerequisite 
|| 

* To practise this tutorial, you should have knowledge of '''HTML'''.
* If not, then go through the corresponding''' '''tutorials on this website.

|-
|| Slide: System Requirements
|| To record this tutorial, I’m using 

* '''Ubuntu Linux 16.04 OS'''
* '''HTML5'''
* '''gedit Text Editor'''
* '''Firefox web browser'''

However you may use any other '''editor''' or '''browser''' of your choice.
|-
|| 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.

|-
|| Open MyWebForm.html in gedit
|| Open the file '''MyWebForm.html '''which we created earlier in this series, in a '''text editor'''.
|- 
|| Only narration 
|| We learnt about some of the '''input''' '''types''' earlier.

Now let us learn some other '''form input types.'''
|- 
|| [gedit - MyWebForm.html]

Type:

<label for="dob"> <b> Date of Birth </b> </label> <br/>

<input type="date" name="dob"> <br/>
|| Let me add a '''field''' for '''Date of Birth''' in the '''registration form'''.

Next to the '''Last name''', type the code as shown.

|- 
|| Highlight '''input type="date"'''
|| Here I have used the '''input type''' '''date'''.
|- 
|| Press Ctrl + S
|| Save the file.
|- 
|| Open MyWebForm.html in Firefox
|| Open the file '''MyWebForm.html''' in a '''web browser'''.
|- 
|| Point to the output
|| And observe the output.
|- 
|| Highlight Date of Birth Field
|| Here we see a '''field''' to select '''date''', '''month''' and '''year'''.
|- 
|| Highlight Date field controls
|| We can either type the values manually.

Or we can use the controls to select the desired '''date''', '''month''' and '''year'''.
|- 
|| Slide: Date/Time Input type

* '''Date '''
* '''Month'''
* '''Week'''
* '''Time'''
* '''Date Time '''
* '''Date Time-local'''

|| We have used the''' input type date''' in this example.

Likewise, we have some other '''input types''' to get '''Date Time''' from the user.

These are the '''date '''and''' time input types''' available in '''HTML.'''

Explore these on your own.
|- 
|| [gedit - MyWebForm.html]

Type:

<br/>

<label for="gender"> <b> Gender </b> </label>

<input type="radio" name="gender" value="male"> Male 

<input type="radio" name="gender" value="female"> Female

<input type="radio" name="gender" value="other">

Other only "Other" is mentioned in the video. "gender" 

in not there in video.gender<br/> <br/>

|| Switch back to the '''text editor'''.

Now let me add the code to get the '''input''' for '''Gender'''. 

Next to the '''Date of birth input''', type the code as shown.
|- 
|| Highlight input type="radio"
|| I have set the '''input type''' as '''radio.'''
|- 
|| Highlight the Gender block
|| Here I have written a single '''label''' and three '''input''' '''fields''' with the same name '''gender.'''

The user will select any one option from these three.

But each section will have a different value.

Based on the selection, the respective value will be stored.
|- 
|| Press Ctrl + S
|| Save the file.
|- 
|| Refresh the browser
|| Switch to the '''browser''' and refresh the page.
|- 
|| Highlight Gender field
|| Notice that the '''Gender field''' is displayed and it has three '''radio''' '''buttons'''.
|- 
|| Click on Male radio button
|| Let me click on the '''Male''' '''radio''' '''button'''.
|- 
|| Click on Female radio button
|| Now click on the '''Female radio button'''.

Immediately the '''Male radio button''' is unselected.

Suppose we have one more set of '''radio buttons'''. 

How will it work?

Let us check.
|- 
|| [gedit - MyWebForm.html]

Type:

<label for="res"> <b> Residential Status </b> </label>

<input type="radio" name="res" value="Indian"> Indian 

<input type="radio" name="res" value="NRI"> NRI <br/> <br/>
|| Switch to the code.

Add one more '''field''' called '''Residential Status.'''

Next to the '''Gender field''', type the code as shown.
|- 
|| Press Ctrl + S
|| Save the file.
|- 
|| Refresh the browser
|| Switch to the '''browser''' and refresh the page.
|- 
|| Highlight Residential Status radio buttons
|| We got more set of '''radio buttons''' for '''Residential Status.'''
|- 
|| Click on Male radio button
|| Let me click on the '''Male radio button''' in the '''Gender field'''.
|- 
|| Click on Indian radio button
|| Then click on '''Indian''' in the '''Residential Status field'''.
|- 
|| Highlight Indian radio button
|| Notice that when we click on the '''radio button''' '''Indian''', the '''Male radio button''' remains selected.
|- 
|| Highlight Male radio button
|| As the '''radio''' '''button''' name is different, the selection is unchanged in the '''Gender field'''.
|- 
|| 
|| Switch back to the '''text editor'''.
|- 
|| [gedit - MyWebForm.html]

Type: 

<label for="phone"> <b> Contact Number </b> </label> <br/>

<input type="number" name="phone"> <br/>
|| Next we’ll add the code to get a '''phone number''' from the user.

Type the code as shown here.
|- 
|| Highlight input type="number"
|| Here I have set the '''input type''' as '''number.'''
|- 
|| Press Ctrl + S
|| Save the file.
|- 
|| Refresh the browser
|| Switch to the '''browser''' and refresh the page.
|- 
|| Type 987654 in the Contact number field
|| We got a field for '''contact number'''

Let me type a '''phone number''' in this '''field'''.
|- 
|| Highlight the up and down controls
|| Using the controls we can increase or decrease the numbers

This is how the '''number input type''' works.
|- 
|| Text on the edit
|| Instead of '''number input type''', we can also use '''tel''' to get phone number.
|- 
|| Only narration
|| Next let us try another '''form element''' called '''select'''.
|- 
|| [gedit - MyWebForm.html]

Type: 

<nowiki> <br/> </nowiki>

<label for="city"> <b> City </b> </label>

<select name="city">

<option value="Chennai"> Chennai </option>

<option value="Mumbai"> Mumbai </option>

<option value="Delhi"> Delhi </option>

<option value="Kolkata"> Kolkata </option>

</select> <nowiki> <br/> <br/> </nowiki>
|| Next to the '''contact number input type''', type the code as shown.

Here I have written a code to select '''City''' from a list.
|- 
|| Highlight <select name="city">
|| For this I’m using '''select tag'''.

It has both a start and an end.
|- 
|| Highlight <option value="Chennai"> Chennai </option>
|| Using the '''option tag''' we can add values to the list.
|- 
|| Press Ctrl + S
|| Save the file.
|- 
|| Refresh the browser
|| Switch to the '''browser''' and refresh the page.
|- 
|| Point to the field City
|| We got the '''City field''' along with a drop-down list.

We can select only one value from this list.

By default, the first value is pre-selected.
|- 
|| Only narration
|| There’s another way of showing this option. 

Let me demonstrate that.

Switch to the '''text editor'''.
|- 
|| [gedit - MyWebForm.html]

<datalist id="city">
|| Before the '''select '''start '''tag,''' type the code as shown.

|- 
|| [gedit - MyWebForm.html]

</datalist> 

<input type="text" name="city" list="city"> 
|| Then after the '''select '''end''' tag,''' type the code as shown.

|- 
|| Highlight 

<datalist id="city">

</datalist>
|| I have used the '''tag datalist''' before the '''select''' '''element'''.

This will store the '''select option''' value in the form of a list.
|- 
|| Highlight 

<input type="text" name="city" list="city"> 
|| Next to the '''datalist '''end tag, type the code as shown.

Here I have included a '''text input type'''.
|- 
|| Highlight list="city"
|| And included the '''datalist''' inside the '''input''' '''field'''.
|- 
|| Press Ctrl + S
|| Save the file.
|- 
|| Refresh the browser
|| Switch to the '''browser''' and refresh the page.
|- 
|| Point to the field City
|| The drop-down is changed as a '''text field''' for '''City'''.
|- 
|| Type Ch
|| Let me type '''c h.'''
|- 
|| Highlight Chennai
|| Immediately the values which start from '''c h''' will be displayed.

This feature is similar to '''Google search'''.

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

And you want to do this such that it doesn’t affect the other '''elements'''.

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

Switch to the '''text editor '''to try this.
|- 
|| [gedit - MyWebForm.html]

Type:

<fieldset>

<legend> Log-in Details </legend>
|| Let us create a '''fieldset''' for '''mail id''' and '''password''' '''fields'''.

Before the '''Email label field''', type the code as shown.
|- 
|| Highlight

<legend> Log-in Details </legend>
|| I have used the '''legend tag''' to give a name for the '''field'''.

However, the '''legend tag''' is not mandatory.
|- 
|| [gedit - MyWebForm.html]

Type: </fieldset>
|| Next, to the '''retype password '''field, close the '''fieldset'''.
|- 
|| Press Ctrl + S
|| Save the file.
|- 
|| Refresh the browser
|| Switch to the '''browser''' and refresh the page.
|- 
|| 
|| Till now, we have created a form to get some data from the user.

Once we have filled the '''form''', we will click the '''Submit''' '''button''' to proceed further.

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

* Interactive web pages and 
* Client-server mechanism

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

* '''GET'''
* '''POST'''

This has to be defined inside the '''form start tag'''.
|- 
|| Slide: Get Method
|| 

* '''GET method''' will pass the values via '''URL'''
* Passed values will be seen in the '''URL'''

|- 
|| Slide: Post Method
|| Whereas,

* '''POST method''' will pass the values via '''HTTP''' request.
* Passed values will not be seen in the '''URL'''
* It is advisable to use '''POST method''' for secure transactions like '''login''' and money transactions

|- 
|| Slide: Form Methods

'''GET: <form action="form2.html" method="get">'''

'''POST: <form action="form2.html" method="post">'''
|| This is the syntax.

Here the '''action''' '''attribute''' defines the place to which the values have to be passed.
|- 
|| Only narration
|| With this we have come to the end of this tutorial.

Let us summarize.
|-
|| Slide: Summary 
|| In this tutorial, we have learnt about:

* '''Form Input types: Date, Radio, Number'''
* '''Form Elements: Select, Datalist, Fieldset'''
* '''Form Methods: GET, POST'''

in '''HTML'''
|-
|| Slide: Assignment
|| As an assignment- 

* Open the file '''MyLoginForm.html'''
* Get the following details from the user
** Date of Birth
** Gender
** City

|-
|| Slide: About Spoken Tutorial project
|| The video at the following link summarizes the Spoken Tutorial project. 

Please download and watch it.
|-
|| Slide: About Workshop
|| The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.
|-
|| Slide: Forum questions
|| Please post your timed queries in this forum.
|-
|| Slide: Acknowledgement
|| Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at this link.
|-
|| Slide: Thanks
|| This is Praveen from IIT Bombay signing off.

Thank you for joining.
|-
|}