Difference between revisions of "HTML/C3/Forms-in-HTML/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with ".")
 
Line 1: Line 1:
−
.
+
'''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.
 +
|-
 +
|}

Revision as of 17:02, 16 May 2019

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


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>

<html>

<head>

<title> Registration Form </title>

</head>

<body>

User Registration Form

</body>

</html>

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:

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"> First Name </label>

Replace the words “First Name” with the line as shown here.
Highlight <label for="fname"> First Name </label> Here I have used the tag label.

It has both a start and an end.

Highlight First Name 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"> Last Name </label>

<input type="text" name="lname">

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"> Email </label>

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

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

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

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

<input type="password" name="rpassd">

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.

Contributors and Content Editors

Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=HTML/C3/Forms-in-HTML/English&oldid=47497"