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

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