-

1. VADODARA INSTITUTE OF ENGINEERING
ACTIVE LEARNING ASSIGNMENT
Web Technology (2160708)
TOPIC : Form using HTML and Java scripts with validation
Presented By:
Kashyap Patel 150800107046
Krishna Patel 150800107047
Maitree Patel 150800107048
:

2. Content
 HTML Forms
• Introduction
• The <input> Element
• HTML Form Controls
• Form Attribute
Java script with validation
• Why do we need validation
• JavaScript form validation example

3. HTML Forms
Introduction :
• HTML Forms are required when some data needs to be collected.
• For example during registration information like name, email-id, address etc.
• A Form will take input form the site visitor and then post into a backend
application.
• It will perform require processing on the pass data based on defined business logic
inside application.

4. Introduction
• The HTML <form> element defines a form that is used to collect user input:
• <form>
.
form elements
.
</form>
• An HTML form contains form elements.
• Form elements are different types of input elements, like text fields, checkboxes,
radio buttons, submit buttons, and more.

5. The <input> Element
• The <input> element is the most important form element.
• The <input> element can be displayed in several ways, depending on
the type attribute.
• Here are some examples:
Type Description
<input type="text"> Defines a one-line text input field
<input type="radio"> Defines a radio button (for selecting one of
many choices)
<input type="submit"> Defines a submit button (for submitting the
form)

6. HTML Form Controls
1. Text Input
There are 3 types of text input control used on forms.
• Single line Text Input control
<form>
First name:<br>
<input type="text" name="firstname"><br>
</form>
file:///D:/wt/new%201.html

7. HTML Form Controls
• Password Input Control
This also single line Text input but it makes characters as soon as user enter
it.
Ex.Password < input type = “Password” name=“password”/>

8. HTML Form Controls
• Multiple line Input Control
This is used when user is required to give details that may be longer than single
sentence.
ex. <textarea rows = “3” cols = “5” >

9. HTML Form Controls
2. Checkbox Control
It is used when more than one option is required to be selected.
Ex.
<input type = "checkbox" name = "maths" checked>maths<br>
<input type = "checkbox" name = "wt" uchecked>wt<br>

10. HTML Form Controls
3. Radio Button
Radio buttons are used when out of many options just one option is required to be
selected.
• Ex<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>

11. HTML Form Controls
4. Select box Control (Drop down Box)
It provide <option> tag to list out various option in form of drop down list.
Ex. <select name=“Subject”>
<option value=“maths”>maths</option>
<option value=“physics”>physics</option>
<option value=“chemistry”>chemistry</option>

12. HTML Form Controls
5. File upload box
If you want to allow user to upload the file used file upload box.
Name and accept are attribute.
Ex.<input type=“file" name=“upload" accept= “jpg.doc”/>

13. HTML Form Controls
6. Button controls
• Submit Button : This creates a button that automatically submits a form.
Ex. <form>
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>

14. HTML Form Controls
• Reset Button: This creates a button that automatically reset form controls to their
initial value.
Ex.
First Name:<br>
<input type="text" name=“First Name”><br>
Last Name<br>
<input type="text" name=“Last Name" ><br><br>
<input type="submit" value="Submit">
<input type=“reset" value=“Reset">

15. HTML Form Controls
• Button : This creates a button that is used to trigger client side script when the
user click that button.
Ex. <input type=“button" value=“button">
• Image : This creates a clickable button but we can used ad image as background
of the button.
Ex. <input type = “image" src = "pexels-photo-547114.jpeg">

16. Form Attributes
1. The Action Attribute
• The action attribute defines the action to be performed when the form is
submitted.
• Normally, the form data is sent to a web page on the server when the user clicks
on the submit button.
Ex. <form action="/action_page.php">
2. The Name Attribute
• Each input field must have a name attribute to be submitted.
• If the name attribute is omitted, the data of that input field will not be sent at all.

17. Form Attributes
3. The Method attribute
• It specifies how to send form data.
• The form data is send to the page specified in the action attribute.
Ex. <form action="/action_page.php" method="get">
• when GET is used, the submitted form data will be visible in the page address
field:
/action_page.php?firstname=Mickey&lastname=Mouse
Ex. <form action="/action_page.php" method="post">
• POST if the form data contains sensitive or personal information. The POST
method does not display the submitted form data in the page address field.

18. Form Attributes
4. The Target Attribute
• The target attribute specifies if the submitted result will open in a new browser
tab, a frame, or in the current window.
• _blank : the response is display in new window or tab.
• _self : the response is displayed in same frame.
• _parent : the response is displayed in parent frame.
• _top : display full body of the window.
• _framename : display in name frame.

19. Java script with validation
• It is important to validate the form submitted by the user because it can have
inappropriate values. So validation is must.
• The JavaScript provides you the facility the validate the form on the client side so
processing will be fast than server-side validation. So, most of the web developers
prefer JavaScript form validation.
• Through JavaScript, we can validate name, password, email, date, mobile number
etc fields.

20. JavaScript form validation example
<html><body>
<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
return false; }
else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false; } } </script>

21. JavaScript form validation example
<body>
<form name="myform" method="post" action="abc.jsp" onsubmit="return validatef
orm()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>

22. JavaScript form validation example
<html>
<head> <title>Form Validation</title>
<script ty
pe="text/javascript"> </script>
function validate()
{ if( document.myForm.Name.value == "" )
{ alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false; }

23. JavaScript form validation example
if( document.myForm.EMail.value == "" )
{ alert( "Please provide your Email!" );
Document.myForm.EMail.focus() ;
return false; }
if( document.myForm.Zip.value == "" ||
isNaN(document.myForm.Zip.value ) ||
document.myForm.Zip.value.length != 5 )
{ alert( "Please provide a zip in the format #####." ); document.myForm.Zip.focus()
; return false; }

24. JavaScript form validation example
if( document.myForm.Country.value == "-1" )
{
alert( "Please provide your country!" );
return false; }
var emailID = document.myForm.EMail.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");

25. JavaScript form validation example
if (atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID")
document.myForm.EMail.focus() ;
return false; }
return( true );
}
</script>
</head>

26. JavaScript form validation example
<body>
<form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2" border="1">
<tr> <td align="right">Name</td>
<td><input type="text" name="Name" /></td> </tr>
<tr> <td align="right">EMail</td>
<td><input type="text" name="EMail" /></td> </tr>

27. JavaScript form validation example
<tr> <td align="right">Zip Code</td>
<td><input type="text" name="Zip" /></td> </tr>
<tr> <td align="right">Country</td>
<td> <select name="Country">
<option value="-1" selected>[choose yours] </option>
<option value="1">USA</option>
<option value="2">UK</option>
<option value="3">INDIA</option>
</select> </td> </tr>

28. JavaScript form validation example
<tr> <td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>

29. JavaScript form validation example

30. Thank You