View source for HTML/C3/Forms-in-HTML/English

'''Title of the script: '''Forms in HTML

'''Author:''' Praveen S

'''Domain Reviewer: '''M.Deivamani

'''Novice Reviewer:''' Madhulika G

'''Keywords: '''HTML, HTML Forms, Form elements, Input, Label, Button, Input types, Text, Email, Password, Spoken Tutorial, Video Tutorial



{| border = "1"
|- 
|| Visual Cue
|| Narration
|- 
|| Slide: Introduction
|| Hello and welcome to the spoken tutorial on '''Forms''' in '''HTML'''.
|- 
|| Slide: Learning Objectives
|| In this tutorial we will learn about:

* '''Forms''' and 
* How to create a simple '''form''' 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.

|- 
|| Slide: Web Forms
|| 

* '''Forms''' are generally used to collect some information from the user.
* It can be a 
** '''Registration Form'''
** '''Login Form'''
** '''Survey'''
** '''Billing Form'''
* Or any other '''form''' which collects data.

|- 
|| Slide: Form Elements
|| To create '''web forms''', '''HTML''' provides some '''Form''' '''Elements''' for different needs.

The '''elements''' are:

* '''Label'''
* '''Input'''
* '''Text Area'''
* '''Select'''
* '''Datalist'''
* '''Output'''
* '''Fieldset'''
* '''Button'''

We will learn them one by one with an example.
|- 
|| Slide: Sample Form
|| For this demonstration we will create a simple '''User Registration from.'''
|- 
|| <!DOCTYPE html>

<nowiki> <html> </nowiki>

<head>

<title> Registration Form </title>

</head>

<body>

<h3> User Registration Form </h3>

</body>

<nowiki> </html> </nowiki>
|| Open an empty file in any '''text editor.'''

Type the code as shown here.

Save the file as '''MyWebForm.html'''

For this demonstration I have already done this.
|- 
|| [gedit - MyWebForm.html]

Type:

<form> 

</form>
|| To create a form, we have to include the '''form tag'''.

It has both start and end '''tags'''.

I will add the '''form tag''' after the '''h3 heading tag'''.
|- 
|| [gedit - MyWebForm.html]

Type:

First Name
|| The first information which we want to get from the user is '''First Name.'''

Next to the '''form '''start''' tag''', type '''First Name:'''
|- 
|| [gedit - MyWebForm.html]

Type:

<input> 
|| To get the input from the user, we will use the '''input''' '''element'''.

Type '''input within angular brackets''' 

The '''input tag''' doesn’t have an end '''tag'''.
|- 
|| Slide: Input Types
|| To get input from the user, we can use any one of the following '''input types''' based on our requirement.

Text Password Search

Email Url Tel

Number Range Date

Month Week Time

Date Time Date Time-local Color
|- 
|| [gedit - MyWebForm.html]

Type:

First Name: <input type="text">
|| To get the name details, we will use the '''input type''' as '''text'''.

So inside the '''input tag''', type:

'''type="text"'''
|- 
|| [gedit - MyWebForm.html]

Type: <br/>
|| Next to the '''input tag''', let me add a '''break tag''' for better alignment. 
|- 
|| Press Ctrl + S
|| Save the file.
|- 
|| Open MyWebForm.html in Firefox
|| Open the file '''MyWebForm.html''' in a '''web browser'''.

I will be using '''Firefox web browser''' for this purpose.
|- 
|| Point to the output
|| Observe the output.
|- 
|| Highlight “User Registration Form”
|| The text “'''User Registration Form'''” is displayed.
|- 
|| Highlight “First name and Text box”
|| Then '''First Name''' along with an empty '''text box''' is displayed.
|- 
|| Only narration
|| Suppose we want to send the collected data to another '''form''' or to a database.

We will add the '''name''' '''attribute''' to the '''form elements.'''

Let me do that now.
|- 
|| [gedit - MyWebForm.html]

Type: 

<input type="text" name="fname">
|| Switch to the '''text editor'''.

Inside the '''input tag''', next to the '''type attribute,''' we will type: '''name="fname"'''
|- 
|| Highlight name="fname"
|| The input which I’m going to get from the user using this '''element''' is '''First Name'''.

So, here I have given the value for the '''name''' '''attribute''' as '''fname.'''

However you can give any other unique value of your choice.

Please note that, this will not make any change in the visual appearance.
|- 
|| Highlight First Name
|| Notice here, we have written the text “'''First Name'''” manually.

'''HTML''' has a '''form element''' for '''labels''' also.

Let us try that.
|- 
|| Replace: First Name:

To: <label for="fname"> <b> First Name </b> </label> <br/> 
|| Replace the words “'''First Name'''” with the line as shown here.
|- 
|| Highlight <label for="fname"> <b> First Name </b> </label>
|| Here I have used the '''tag label'''.

It has both a start and an end.
|- 
|| Highlight <b> First Name </b>
|| Inside the '''tag''', I have written '''First Name''' along with the '''bold tag'''.
|- 
|| Highlight <label for="fname">
|| Inside the '''label''' start '''tag''', I have added an '''attribute for''' and '''fname''' as a value to it.
|- 
|| Highlight fname in label and input tag
|| Notice that, I have given the same value in '''label for''' and '''input name'''.

This is to map the '''label''' and the '''input field'''.
|- 
|| Only narration
|| As I mentioned earlier, these will not make any change in the displayed output.

This will be helpful only when we are sending this data to another page or to a '''database'''.
|- 
|| [gedit - MyWebForm.html]

Type: 

<label for="lname"> <b> Last Name </b> </label> <br/> 

<input type="text" name="lname"> <br/>
|| So far, I have created a '''form''' to get the '''first name'''.

Likewise, let me add another piece of code to get the '''last name.'''

Type the code as shown here.
|- 
|| Press Ctrl + S
|| Save the file.
|- 
|| Refresh the browser
|| Switch to the '''browser''' and refresh the page.
|- 
|| Point to the output
|| Observe the output.

Now we have the''' fields''' to get '''First Name''' and '''Last Name'''.

Next we will add 3 more '''fields''' to get '''Email address, Password '''and''' Retype Password'''.
|- 
|| [gedit - MyWebForm.html]

Type: 

<label for="email"> <b> Email </b> </label> <br/>

<input type="email" name="email"> <br/>

<label for="passd"> <b> Enter Password </b> </label> <br/>

<input type="password" name="passd"> <br/>

<label for="rpassd"> <b> Retype Password </b> </label> <br/>

<input type="password" name="rpassd"> <br/>
|| Switch back to the '''text editor'''.

Next to '''last name''', type the code as shown.
|- 
|| Highlight 

input type="email" 
|| Here I have set the '''input type''' as '''email'''.

During the '''form submission''', this will verify whether the '''input''' is a valid '''email address''' or not.
|- 
|| Highlight 

input type="password" 
|| In the '''Password field''', I have set the '''input type''' as '''password'''.

So, when we type a '''password''', this '''input type''' will display that '''password''' as a special character. 

So, others cannot see what we are typing.
|- 
|| Press Ctrl + S
|| Save the file.
|- 
|| Refresh the browser
|| Switch to the '''browser''' and refresh the page.
|- 
|| Point to the output
|| Now we have five '''fields'''.

'''First Name, Last Name, Email, Password '''and''' Retype Password'''.
|- 
|| [Firefox]
Enter the values in the web form

|| Let me enter some values in these '''fields'''.

'''First Name '''as''' Praveen''' 

'''Last Name '''as''' S '''

'''Email '''as''' editor.spokentutorial@gmail.com'''
|- 
|| [Firefox] 

Highlight password field
|| '''Enter Password '''as''' 12345.'''

While typing the '''password''', notice that it is showing dots instead of the '''password'''.
|- 
|| [Firefox] 

Highlight Retype password field
|| In the '''Retype password field''', type the same '''password '''once again.

Notice that here also we see dots instead of our typed '''password'''.
|- 
|| Only narration
|| So far we have created a '''form''' to fill some details from the user.

To make the '''form''' complete, we have to provide a '''button element, '''as well.
|- 
|| Slide: Button Element
|| 

* '''Button element''' is used to perform an action when the '''button''' is clicked. 
* For eg: 
** store the input data in a '''database'''
** send the form values to another page or '''script''', to perform another action
** or to display some message on the same page.

For this demonstration, we will create a '''button''' to display a message after''' form submission'''.
|- 
|| [gedit - MyWebForm.html]

Type: 

<button onclick="alert('Registration Complete')"> Submit </button>
|| Switch to the '''text editor'''.

Next to the '''Retype password''' line, type the code as shown here.
|- 
|| Highlight <button onclick="alert('Registration Complete')"> Submit </button>
|| The '''button tag''' has both a start and an end.
|- 
|| Highlight Submit
|| I have set the '''display''' name for the '''button''' as '''Submit'''.
|- 
|| Highlight <button onclick="alert('Registration Complete')">
|| Inside the '''button''' start '''tag''', I have set an '''attribute''' called '''onclick'''.

And the value as '''"alert('Registration Complete')".'''

If we click the '''Submit button''', then the '''browser''' will display a message “'''Registration Complete'''”.
|- 
|| Press Ctrl + S
|| Save the file.
|- 
|| Refresh the browser
|| Switch to the '''browser''' and refresh the page.
|- 
|| Point to the Submit button
|| We now see the '''Submit button.'''
|- 
|| Click on the button Submit
|| In this example, I haven’t done any form validation to check for empty fields or incorrect data.

So, without filling the '''fields''', I can simply click on the '''Submit button'''.
|- 
|| Point to the popup window
|| And the '''browser''' will show a '''popup''' window with the message “'''Registration Complete'''”.
|- 
|| Click on OK
|| Click on '''OK''' to close this '''popup''' window.
|- 
|| Only narration
|| So far we have learnt to create a simple '''form''' to get some data from the user.

We will learn more about '''forms''' in the upcoming tutorial.

With this we have come to the end of this tutorial.

Let us summarize.
|-
|| Slide: Summary 
|| In this tutorial, we have learnt about:

* '''Forms '''and 
* '''Form elements: Input, Label '''and''' Button'''
* '''Input types: Text, Email '''and''' Password''' 

in '''HTML.'''
|-
|| Slide: Assignment
|| As an assignment- 

* Create a file '''MyLoginForm.html'''
* To get the following details from the user
** '''Email Address'''
** '''Password'''
* And name the '''button''' as “'''Log-in”'''

|-
|| 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.
|-
|}