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

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.

Contributors and Content Editors

PoojaMoolya