Form using html and java script validation
Download as PPTX, PDF•0 likes•2,083 views
This document discusses form validation using HTML and JavaScript. It begins with an introduction to HTML forms, form elements like <input>, and common form controls such as text, checkbox, radio buttons and selects. It then covers JavaScript form validation, explaining why validation is needed and providing an example that validates form fields like name, email and zip code on submit. The example uses JavaScript to check for empty fields and invalid email and zip code formats before allowing form submission.
![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>](https://image.slidesharecdn.com/wtala2-181218161655/85/Form-using-html-and-java-script-validation-27-320.jpg)
Form using html and java script validation
- 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