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

From Script | Spoken-Tutorial
Revision as of 15:39, 24 March 2020 by PoojaMoolya (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
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