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

From Script | Spoken-Tutorial
Jump to: navigation, search
 
Line 188: Line 188:
 
|-  
 
|-  
 
|| Highlight Residential Status radio buttons
 
|| Highlight Residential Status radio buttons
−
|| We got more set of '''radio buttons''' for '''Residential Status.'''
+
|| We got one more set of '''radio buttons''' for '''Residential Status.'''
 
|-  
 
|-  
 
|| Click on Male radio button
 
|| Click on Male radio button
Line 231: Line 231:
 
|-  
 
|-  
 
|| Highlight the up and down controls
 
|| Highlight the up and down controls
−
|| Using the controls we can increase or decrease the numbers
+
|| Using the controls we can increase or decrease the numbers.
  
 
This is how the '''number input type''' works.
 
This is how the '''number input type''' works.
Line 311: Line 311:
  
 
</datalist>
 
</datalist>
−
|| I have used the '''tag datalist''' before the '''select''' '''element'''.
+
|| I have used the '''tag datalist''' before the '''select element'''.
  
 
This will store the '''select option''' value in the form of a list.
 
This will store the '''select option''' value in the form of a list.
Line 318: Line 318:
  
 
<input type="text" name="city" list="city">  
 
<input type="text" name="city" list="city">  
−
|| Next to the '''datalist '''end tag, type the code as shown.
+
|| Next to the '''datalist '''end '''tag''', type the code as shown.
  
 
Here I have included a '''text input type'''.
 
Here I have included a '''text input type'''.
 
|-  
 
|-  
 
|| Highlight list="city"
 
|| Highlight list="city"
−
|| And included the '''datalist''' inside the '''input''' '''field'''.
+
|| And included the '''datalist''' inside the '''input field'''.
 
|-  
 
|-  
 
|| Press Ctrl + S
 
|| Press Ctrl + S
Line 342: Line 342:
 
This feature is similar to '''Google search'''.
 
This feature is similar to '''Google search'''.
  
−
This is the speciality of '''datalist''' '''element''' in '''HTML5.'''
+
This is the speciality of '''datalist element''' in '''HTML5.'''
 
|-  
 
|-  
 
|| Only narration
 
|| Only narration
Line 360: Line 360:
  
 
<legend> Log-in Details </legend>
 
<legend> Log-in Details </legend>
−
|| Let us create a '''fieldset''' for '''mail id''' and '''password''' '''fields'''.
+
|| Let us create a '''fieldset''' for '''mail id''' and '''password fields'''.
  
 
Before the '''Email label field''', type the code as shown.
 
Before the '''Email label field''', type the code as shown.
Line 367: Line 367:
  
 
<legend> Log-in Details </legend>
 
<legend> Log-in Details </legend>
−
|| I have used the '''legend tag''' to give a name for the '''field'''.
+
|| Along with the '''fieldset''', I have used the '''legend tag''' to give a name for the '''field'''.
  
 
However, the '''legend tag''' is not mandatory.
 
However, the '''legend tag''' is not mandatory.
Line 374: Line 374:
  
 
Type: </fieldset>
 
Type: </fieldset>
−
|| Next, to the '''retype password '''field, close the '''fieldset'''.
+
|| Next, to the '''retype password field''', close the '''fieldset'''.
 
|-  
 
|-  
 
|| Press Ctrl + S
 
|| Press Ctrl + S
Line 383: Line 383:
 
|-  
 
|-  
 
||  
 
||  
−
|| Till now, we have created a form to get some data from the user.
+
|| 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.
+
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.
 
Now we will see how can we send this data to the next step.
Line 392: Line 392:
 
|| '''Form method''' will be used when we are working with:  
 
|| '''Form method''' will be used when we are working with:  
  
−
* Interactive web pages and  
+
* Interactive '''web pages''' and  
−
* Client-server mechanism
+
* '''Client-server''' mechanism
  
 
|-  
 
|-  
Line 402: Line 402:
 
* '''POST'''
 
* '''POST'''
  
−
This has to be defined inside the '''form start tag'''.
+
This has to be defined inside the '''form''' start '''tag'''.
 
|-  
 
|-  
 
|| Slide: Get Method
 
|| Slide: Get Method
Line 414: Line 414:
 
|| Whereas,
 
|| Whereas,
  
−
* '''POST method''' will pass the values via '''HTTP''' request.
+
* '''POST method''' will pass the values via '''HTTP request'''.
−
* Passed values will not be seen in the '''URL'''
+
* Passed values will not be seen in the '''URL'''.
−
* It is advisable to use '''POST method''' for secure transactions like '''login''' and money transactions
+
* It is advisable to use '''POST method''' for secure transactions like '''login''' and money transactions.
  
 
|-  
 
|-  
Line 426: Line 426:
 
|| This is the syntax.
 
|| This is the syntax.
  
−
Here the '''action''' '''attribute''' defines the place to which the values have to be passed.
+
Here the '''action attribute''' defines the place to which the values have to be passed.
 
|-  
 
|-  
 
|| Only narration
 
|| Only narration

Latest revision as of 07:48, 31 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 one 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>

Along with the fieldset, 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=47636"