Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head><title>
- Movie Form
- </title>
- <style type="text/css">
- * {margin: 0; padding: 0; border: 0; line-height: -1; font-family: 'Arial Rounded MT', Verdana, Tahoma, sans-serif;}
- body {background: white url('bg.jpg') top left repeat-x;}
- h1 {color: white; margin-bottom: 8px;}
- #wrapper {margin: 0 auto; width: 450px;}
- #content {margin: 100px 0 20px 0; padding: 40px 20px; border: 10px solid white; width: 380px; background: #4ec0e5;background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRlYzBlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzMjk2YjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background: -moz-linear-gradient(top, #4ec0e5 0%, #3296b6 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4ec0e5), color-stop(100%,#3296b6));background: -webkit-linear-gradient(top, #4ec0e5 0%,#3296b6 100%);background: -o-linear-gradient(top, #4ec0e5 0%,#3296b6 100%);background: -ms-linear-gradient(top, #4ec0e5 0%,#3296b6 100%);background: linear-gradient(top, #4ec0e5 0%,#3296b6 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ec0e5', endColorstr='#3296b6',GradientType=0 );-moz-border-radius: 52px;border-radius: 52px;}
- .rqd {color: #f00;}
- #buttons{margin-top: 20px;text-align: center;}
- #submit, #reset {-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;box-shadow:inset 0px 1px 0px 0px #ffffff;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');background-color:#ededed;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #dcdcdc;display:inline-block;color:#777777;padding:6px 24px;text-decoration:none;text-shadow:1px 1px 0px #ffffff;}
- #submit:hover, #reset:hover {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');background-color:#dfdfdf;}
- #ValidationSummary1 ul{list-style: none; margin: 10px 0 0 10px; font-size: smaller;color: white;}
- #ValidationSummary1 li{border-bottom: 1px solid red;}
- #resultLbl{margin: 10px 0 0 10px; font-size: smaller;color: white;}
- </style>
- <!--[if gte IE 9]>
- <style type="text/css">
- .gradient {
- filter: none;
- }
- </style>
- <![endif]-->
- <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
- <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
- <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
- </head>
- <body>
- <form method="post" action="Default.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
- <div class="aspNetHidden">
- <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
- <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
- <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="ALC0a2WwebRg8+hoUJhr4tSPSk5YZPZwAMgwqGIkq1ZrctnzuHMthJleNK5aXhkJt7W2qpNPNuLLp5udiavr17f9XPedtGIiy6lhegwnsBA=" />
- </div>
- <script type="text/javascript">
- //<![CDATA[
- var theForm = document.forms['form1'];
- if (!theForm) {
- theForm = document.form1;
- }
- function __doPostBack(eventTarget, eventArgument) {
- if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
- theForm.__EVENTTARGET.value = eventTarget;
- theForm.__EVENTARGUMENT.value = eventArgument;
- theForm.submit();
- }
- }
- //]]>
- </script>
- <script src="/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZHZm6ouz0pVlwDX4Zm3t3tJXcNlSiQaDp9Z3hhsom3HuUrdUmyFS5jZwwvMUnSKnLg2&t=634635474940000000" type="text/javascript"></script>
- <script src="/Scripts/jquery-1.6.2.js" type="text/javascript"></script>
- <script src="/WebResource.axd?d=x2nkrMJGXkMELz33nwnakDB4CsmNK4dtmwp-dLgoN3TyXGo_ot8uWlQDL2utfTle_BLkp0EGstBkA7XmgZ-gXZxyhX0w2OAO9miDArcGuV01&t=634635474940000000" type="text/javascript"></script>
- <script type="text/javascript">
- //<![CDATA[
- function WebForm_OnSubmit() {
- if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
- return true;
- }
- //]]>
- </script>
- <div class="aspNetHidden">
- <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="oMXfaWMLpBnJN2Zq3UOx+CzeD0KMFrlv5QZIL+PtCt7f2qJvQH7VvTi0KUjV/8vSZM/vLDpleEveY7wjOpA4EcakVhsEYEDyxlRYUzDiYfWtgg/GZrG6BpTOX0BKOyoNbkSFP+guVVFq84oruAu0wqDwsT+44BMAy0WLps9GpCqNkTLa1/nfBZLPRPXRVpU8" />
- </div>
- <div id="wrapper">
- <div id="content" class="gradient">
- <h1>Movie <strong>Form</strong></h1>
- <table id="Table1" style="width:380px;">
- <tr>
- <td style="width:45%;">
- <span class="rqd">*</span> <span id="fNameLbl">First Name</span></td><td><input name="fName" type="text" id="fName" style="width:140px;" /><span data-val-controltovalidate="fName" data-val-errormessage="Please enter your first name" id="fNameRqd" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;"> <img src='err.png' alt='*' title='Please enter your first name'></span><span data-val-controltovalidate="fName" data-val-errormessage="Your name can be no more than 40 characters" id="fNameReg" data-val="true" data-val-evaluationfunction="RegularExpressionValidatorEvaluateIsValid" data-val-validationexpression="^[\s\S]{0,40}$" style="visibility:hidden;"> <img src='err.png' alt='*' title='Your name can be no more than 40 characters'></span></td>
- </tr><tr>
- <td>
- <span class="rqd">*</span> <span id="address1lbl">Address Line 1</span></td><td><input name="address1" type="text" id="address1" style="width:140px;" /><span data-val-controltovalidate="address1" data-val-errormessage="Please enter your address" id="address1Rqd" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;"> <img src='err.png' alt='*' title='Please enter your address'></span><span data-val-controltovalidate="address1" data-val-errormessage="Your address can be no more than 120 characters" id="address1Reg" data-val="true" data-val-evaluationfunction="RegularExpressionValidatorEvaluateIsValid" data-val-validationexpression="^[\s\S]{0,120}$" style="visibility:hidden;"> <img src='err.png' alt='*' title='Your address can be no more than 120 characters'></span></td>
- </tr><tr>
- <td>
- <span class="rqd">*</span> <span id="townlbl">Town/City</span></td><td><input name="town" type="text" id="town" style="width:140px;" /><span data-val-controltovalidate="town" data-val-errormessage="Please enter your Town/City" id="townRqd" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;"> <img src='err.png' alt='*' title='Please enter your Town/City'></span><span data-val-controltovalidate="town" data-val-errormessage="Your Town/City name can be no more than 76 characters" id="townReg" data-val="true" data-val-evaluationfunction="RegularExpressionValidatorEvaluateIsValid" data-val-validationexpression="^[\s\S]{0,76}$" style="visibility:hidden;"> <img src='err.png' alt='*' title='Your Town/City name can be no more than 76 characters'></span></td>
- </tr><tr>
- <td>
- <span class="rqd">*</span> <span id="postcodelbl">Postcode</span></td><td><input name="postcode" type="text" id="postcode" style="width:140px;" /><span data-val-controltovalidate="postcode" data-val-errormessage="Please enter your Postcode" id="postcodeRqd" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;"> <img src='err.png' alt='*' title='Please enter your Postcode'></span><span data-val-controltovalidate="postcode" data-val-errormessage="Your Postcode can only be 4 digits long" id="postcodeReg" data-val="true" data-val-evaluationfunction="RegularExpressionValidatorEvaluateIsValid" data-val-validationexpression="\d{4}" style="visibility:hidden;"> <img src='err.png' alt='*' title='Your Postcode can only be 4 digits long'></span></td>
- </tr><tr>
- <td>
- <span class="rqd">*</span> <span id="emaillbl">Email</span></td><td><input name="email" type="text" id="email" style="width:140px;" /><span data-val-controltovalidate="email" data-val-errormessage="Please enter your email" id="emailRqd" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;"> <img src='err.png' alt='*' title='Please enter your email'></span><span data-val-controltovalidate="email" data-val-errormessage="Please enter a valid email address less than 100 characters long" id="emailReg" data-val="true" data-val-evaluationfunction="RegularExpressionValidatorEvaluateIsValid" data-val-validationexpression="^(?=.{0,100}$)\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" style="visibility:hidden;"> <img src='err.png' alt='*' title='Please enter a valid email address less than 100 characters long'></span></td>
- </tr><tr>
- <td>
- <span class="rqd">*</span> <span id="phonelbl">Phone No.</span></td><td><input name="phone" type="text" id="phone" style="width:140px;" /><span data-val-controltovalidate="phone" data-val-errormessage="Please enter your phone number" id="phoneReq" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;"> <img src='err.png' alt='*' title='Please enter your phone number'></span><span data-val-controltovalidate="phone" data-val-errormessage="Your phone number can be no longer than 14 digits" id="phoneReg" data-val="true" data-val-evaluationfunction="RegularExpressionValidatorEvaluateIsValid" data-val-validationexpression="\d{0,14}" style="visibility:hidden;"> <img src='err.png' alt='*' title='Your phone number can be no longer than 14 digits'></span></td>
- </tr><tr>
- <td>
- <span class="rqd">*</span> <span id="doblbl">D.O.B</span> <span style="font-style: italic; font-size: x-small;">(dd/mm/yyy)</span>
- </td><td><input name="dob" type="text" id="dob" class="datePicker" style="width:140px;" /><span data-val-controltovalidate="dob" data-val-errormessage="Please enter your Date of Birth" id="dobRqd" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;"> <img src='err.png' alt='*' title='Please enter your Date of Birth'></span><span data-val-controltovalidate="dob" data-val-errormessage="Please enter a valid date in the format dd/mm/yyy" id="dateValidator" data-val="true" data-val-type="Date" data-val-dateorder="dmy" data-val-cutoffyear="2029" data-val-century="2000" data-val-evaluationfunction="CompareValidatorEvaluateIsValid" data-val-operator="DataTypeCheck" style="visibility:hidden;"> <img src='err.png' alt='*' title='Please enter a valid date in the format dd/mm/yyy'></span></td>
- </tr><tr>
- <td>
- <span class="rqd">*</span> <span id="movielbl">Favourite Move</span></td><td><select name="movie" id="movie" style="width:140px;">
- <option value="We Bought a Zoo">We Bought a Zoo</option>
- <option value="The Breakfast Club">The Breakfast Club</option>
- <option value="Puss in Boots">Puss in Boots</option>
- </select><span data-val-controltovalidate="movie" data-val-errormessage="Please pick a movie" id="movieReq" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;"> <img src='err.png' alt='*' title='Please pick a movie'></span></td>
- </tr><tr>
- <td>
- <span class="rqd">*</span> <span id="genderlbl">Gender</span></td><td><select name="gender" id="gender" style="width:140px;">
- <option value="male">Male</option>
- <option value="female">Female</option>
- </select><span data-val-controltovalidate="gender" data-val-errormessage="Please pick a gender" id="genderReq" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;"> <img src='err.png' alt='*' title='Please pick a gender'></span></td>
- </tr>
- </table>
- <div id="buttons">
- <input type="submit" name="submit" value="Submit" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("submit", "", true, "", "", false, false))" id="submit" /> <input type="reset" name="reset" value="Clear" id="reset" />
- </div>
- <span id="resultLbl"></span>
- <div id="ValidationSummary1" data-valsummary="true" style="display:none;">
- </div>
- </div>
- </div>
- </form>
- <script>
- $(function () {
- $(".datePicker").datepicker({
- changeMonth: true,
- changeYear: true,
- showOn: "button",
- buttonImage: "calendar.gif",
- buttonImageOnly: true,
- dateFormat: 'dd-mm-yy'
- });
- })();
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
