| a. Design a HTML page as below fig. b. Validate above form field i. Name Field should not be empty. ii. Validate Name field for only characters and special symbols i.e.(A-Z a-z _ . ). iii. Validate Gender: At least choose one of Gender. iv. Above validation should happen on form submit, i.e. ‘Onclick’ on Submit Button c. Display form content in the middle of the page with proper alignment. d. Try to design a good looking html page. e. You are only allowed to use HTML for design the page and JavaScript for scripting logic. <html> | |
| <head> | |
| </head> | |
| <script> | |
| function checkForm() | |
| { | |
| var reg=/^[a-zA-z._]+$/; | |
| var user_name=document.getElementById("userName").value; | |
| var gen=document.getElementsByName('gender'); | |
| var qualification=document.getElementsByName('qua'); | |
| if(user_name=='') | |
| { | |
| alert("Please Enter Your Name"); | |
| document.getElementById('userName').focus; | |
| return false; | |
| } | |
| //checking userName withregularExpression | |
| if(!user_name.match(reg)) | |
| { | |
| alert("please enter alphabitical and symbols"); | |
| } | |
| //checking options are selected or not | |
| if (document.getElementById('male').checked == false && document.getElementById('female').checked == false) | |
| { | |
| alert("Please select gender"); | |
| } | |
| for(var ind=0;ind<qualification.length;ind++) | |
| { | |
| if(qualification[ind].checked==true) | |
| return true; | |
| } | |
| return false; | |
| alert("Your name is "+user_name); | |
| return true; | |
| } | |
| </script> | |
| <body><center><form name="regForm" id="res" onsubmit="return checkForm()"> | |
| <div id="form" style="width:350px; background-color:green"> | |
| <fieldset> | |
| <legend style="BackGround-color:blue;color:yellow;font-weight:bold;">RegistrationForm</legend> | |
| <table> | |
| <tr> | |
| <td>Name:<span style="color:red; ">*</span> <input type="text" name="userName" value="" style="border: 5px; bordercolor:red"></td></tr> | |
| <tr> | |
| <td>Gender:<b style="color:red">*</b> <td bgcolor="red"><input type="radio" name="gender" id="male" value="Male">Male <input type="radio" name="gender" id="female" value="Female">Female </td> | |
| </tr> | |
| <tr> | |
| <td>Qualification:<b style="color:red">*</b></td><td bgcolor="yellow"><input type="radio" name="qua" id="bca" value="Male">BCA <input type="radio" name="qua" id="bsc" value="bsc">BSc</br><input type="radio" name="qua" id="bca" value="Mca">MCA <input type="radio" name="qua" id="mtech" value="mtech">Mtech </td> | |
| </tr> | |
| <tr> | |
| <td colsapn="2" align="center"><input type="submit" name="reges" id="regist" value="Submit"></td> | |
| </tr> | |
| </table> | |
| </fieldset> | |
| </div></form> | |
| </center></body> | |
| </html> | |
Monday, July 15, 2013
RegistrationForm
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment