HTML/C3/Forms-in-HTML/English-timed

From Script | Spoken-Tutorial
Jump to: navigation, search
Time Narration
00:01 Hello and welcome to the spoken tutorial on Forms in HTML.
00:07 In this tutorial we will learn about:

Forms and How to create a simple form in HTML

00:17 To practise this tutorial, you should have knowledge of HTML.
00:22 If not, then go through the corresponding tutorials on this website.
00:27 To record this tutorial, I’m using

Ubuntu Linux 16.04 OS

00:36 HTML5
00:38 gedit Text Editor
00:41 Firefox web browser
00:44 However you may, use any other editor or browser of your choice.
00:50 The files used in this tutorial are available in the Code Files link on this tutorial page.

Please download and extract them.

01:01 Forms are generally used to collect some information from the user.
01:06 It can be a

Registration Form, Login Form , Survey, Billing Form Or any other form which collects data.

01:17 To create web forms, HTML provides some Form Elements for different needs.
01:24 The elements are:

Label, Input, Text Area, Select

01:34 Datalist, Output, Fieldset, Button
01:41 We will learn them one by one with an example.
01:46 For this demonstration we will create a simple User Registration form like this.
01:53 Open an empty file in any text editor.
01:57 Type the code as shown here.
02:01 Save the file as MyWebForm.html
02:06 For this demonstration I have already done this.
02:11 To create a form, we have to include the form tag.
02:16 It has both start and end tags.
02:20 I will add the form tag after the h3 heading tag.
02:26 The first information which we want to get from the user is First Name.
02:32 Next to the form start tag, type First Name:
02:38 To get the input from the user, we will use the input element.

Type input within angular brackets

02:48 The input tag doesn’t have an end tag.
02:52 To get input from the user, we can use any one of the following input types based on our requirement.
03:02 To get the name details, we will use the input type as text.
03:07 So inside the input tag, type:

type equal to within double quotes text"

03:16 Next to the input tag, let me add a break tag for better alignment.
03:22 Save the file.
03:24 Open the file MyWebForm.html in a web browser.
03:28 I will be using Firefox web browser for this purpose.
03:34 Observe the output.
03:36 The text “User Registration Form” is displayed.
03:42 Then First Name along with an empty text box is displayed.
03:49 Suppose we want to send the collected data to another form or to a database.
03:54 We will add the name attribute to the form elements.

Let me do that now.

04:00 Switch to the text editor.
04:04 Inside the input tag, next to the type attribute, we will type: name equal to within double quote fname
04:15 The input which I’m going to get from the user using this element is First Name.
04:22 So, here I have given the value for the name attribute as fname.
04:28 However you can give any other unique value of your choice.
04:35 Please note that, this will not make any change in the visual appearance.
04:40 Notice here, we have written the text “First Name” manually.
04:47 HTML has a form element for labels also.

Let us try that.

04:54 Replace the words “First Name” with the line as shown here.
05:01 Here I have used the tag label.
05:05 It has both a start and an end.
05:10 Inside the tag, I have written First Name along with the bold tag.
05:16 Inside the label start tag, I have added an attribute for and fname as a value to it.
05:25 Notice that, I have given the same value in label for and input name.
05:32 This is to map the label and the input field.
05:37 As I mentioned earlier, these will not make any change in the displayed output.
05:44 This will be helpful only when we are sending this data to another page or to a database.
05:53 So far, I have created a form to get the first name.
05:57 Likewise, let me add another piece of code to get the last name.
06:04 Type the code as shown here.
06:08 Save the file.
06:10 Switch to the browser and refresh the page.
06:14 Observe the output.
06:16 Now we have the fields to get First Name and Last Name.
06:22 Next we will add 3 more fields to get Email address, Password and Retype Password.
06:31 Switch back to the text editor.
06:34 Next to last name, type the code as shown.
06:40 Here I have set the input type as email.
06:44 During the form submission, this will verify whether the input is a valid email address or not.
06:52 In the Password field, I have set the input type as password.
06:57 So, when we type a password, this input type will display that password as a special character.
07:05 So, others cannot see what we are typing.
07:10 Save the file.
07:12 Switch to the browser and refresh the page.
07:15 Now we have five fields.

First Name, Last Name, Email, Password and Retype Password.

07:28 Let me enter some values in these fields.
07:31 First Name as Praveen

Last Name as S

07:37 Email as editor.spokentutorial@gmail.com
07:45 Enter Password as 12345.
07:50 While typing the password, notice that it is showing dots instead of the password.
07:57 In the Retype password field, type the same password once again.
08:03 Notice that here also we see dots instead of our typed password.
08:10 So far we have created a form to fill some details from the user.
08:16 To make the form complete, we have to provide a button element, as well.
08:22 Button element is used to perform an action when the button is clicked.
08:28 For eg: store the input data in a database
08:34 Send the form values to another page or script, to perform another action
08:41 or to display some message on the same page.
08:45 For this demonstration, we will create a button to display a message after form submission.
08:53 Switch to the text editor.
08:56 Next to the Retype password line, type the code as shown here.
09:03 The button tag has both a start and an end.
09:08 I have set the display name for the button as Submit.
09:13 Inside the button start tag, I have set an attribute called onclick.
09:19 And the value as "alert('Registration Complete')".
09:25 If we click the Submit button, then the browser will display a message “Registration Complete”.
09:33 Save the file.
09:35 Switch to the browser and refresh the page.
09:40 We now see the Submit button.
09:43 In this example, I haven’t done any form validation to check for empty fields or incorrect data.
09:51 So, without filling the fields, I can simply click on the Submit button.
09:57 And the browser will show a popup window with the message “Registration Complete”.
10:03 Click on OK to close this popup window.
10:09 So far we have learnt to create a simple form to get some data from the user.
10:16 We will learn more about forms in the upcoming tutorial.
10:20 With this we have come to the end of this tutorial.

Let us summarize.

10:27 In this tutorial, we have learnt about:

Forms and Form elements: Input, Label and Button

10:36 Input types: Text, Email and Password in HTML.
10:42 As an assignment-

Create a file MyLoginForm.html

10:48 To get the following details from the user

Email Address, Password

10:55 And name the button as “Log-in”
11:00 The video at the following link summarizes the Spoken Tutorial project.

Please download and watch it.

11:09 The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

11:19 Please post your timed queries in this forum.
11:24 Spoken Tutorial Project is funded by MHRD, Government of India.
11:30 This is Praveen from IIT Bombay signing off.

Thank you for joining.

Contributors and Content Editors

PoojaMoolya