HTML/C3/More-on-Forms/English-timed
From Script | Spoken-Tutorial
| 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. |
