Difference between revisions of "HTML/C3/More-on-Forms/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with ".")
 
Line 1: Line 1:
−
.
+
'''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.
 +
|-
 +
|}

Revision as of 17:08, 16 May 2019

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


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"> Date of Birth </label>

<input type="date" name="dob">

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:


<label for="gender"> Gender </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

 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"> Residential Status </label>

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

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

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"> Contact Number </label>

<input type="number" name="phone">

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:

<br/>

<label for="city"> City </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> <br/> <br/>

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.

Contributors and Content Editors

Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=HTML/C3/More-on-Forms/English&oldid=47498"