ලේසියෙන්ම හොයාගන්න මෙතනින්

HTML 5 - Registration Form - Validation without JavaScript

use HTML 5 more compatible web browsers,
1. Opera          2. Google Chrome          3. Mozilla Firefox
First Name
Middle Name
Last Name
Email Address
Password
Password
GenderMale
Female
Birthday
Birth Time
Mobile Phone
Land Phone
District
School EraFrom
To
Web Site

HTML 5 වල විශේෂ  කරුණක් තමයි JavaScript හෝ වෙනත් Script වර්ගයක් හෝ භාවිතා නොකර අපට පුළුවන් validation කරන්න.
ඒ වගේම අපේ පහසුවට හුගක් input types තියේ. මෙතෙක් කල් භාවිතා කල text යන්නට අමතරව,
ඊමේල්  ලිපිනයක් ඇතුලත් කිරීමට email යන්නත්,
වෙබ්  ලිපිනයක් ඇතුලත් කිරීමට url යන්නත්,
දිනයක් ඇතුලත් කිරීමට date යන්නත්,
වෙලාවක් ඇතුලත් කිරීමට time යන්නත්,
දිනය, වෙලාව දෙකම සඳහා datetime යන්නත්,
ඉලක්කම් ඇතුලත් කිරීමට number යන්නත් ලෙස යොදා ගත හැකි අලුත් tags කිහිපයක්ම තිබේ.
ඉතින් මේ tags භාවිතා කරලා, ඒ ඒ data input එකට ගැලපෙන්න data නොතිබුනොත් browser එකෙන් errors පෙන්වනවා. මේ වම් පස තියෙන උදාහරණය බලන්න. මේකේ Registration Form එකකට ගැලපෙන්නේ නැති, දේවල් තියේ තමා නමුත් ඔයාලට මේ දේවල් පැහැදිලි කරන්න, පෙන්නන්න ඕන නිසා ඔක්කොම දේවල් මේකට ඇතුලත් කළා.


View in Opera Web Browser

Unfilled Form

Filled Form with Valid Data
Source Code ...

<html><head><title>HansA - Registration Form</title></head>
<style type="text/css">
  :invalid {
    background-color: #ffcccc;
  }
  :valid {
    background-color: #ddffdd;
  }
</style>
<body><form><table>
<tr><td>First Name</td><td><input type="text" name="fname" autocomplete="on" placeholder="Hansa" autofocus required/></td></tr>
<tr><td>Middle Name</td><td><input type="text" name="mname" autocomplete="on" placeholder="Madusanka" required /></td></tr>
<tr><td>Last Name</td><td><input type="text" name="lname" autocomplete="on" placeholder="Amarasekara"required /></td></tr>
<tr><td>Email Address</td><td><input type="email" name="email" autocomplete="on" placeholder="hansa0712004212@gmail.com" required /></td></tr>
<tr><td>Password</td><td><input type="password" name="pass1" required /></td></tr>
<tr><td>Re Type Password</td><td><input type="password" name="pass2" required /></td></tr>
<tr><td>Gender</td><td><input type="radio" name="gender" required />Male<br/><input type="radio" name="gender" required />Female</td></tr>
<tr><td>BirthDay</td><td><input type="date" name="bday" required value="1990-06-04"/></td></tr>
<tr><td>BirthDay</td><td><input type="time" name="bday" required value="00:59"/></td></tr>
<tr><td>Mobile Phone</td><td><input type="text" name="mobile" pattern="^[0-9]{10}$" required /></td></tr>
<tr><td>Land Phone</td><td><input type="text" name="land" pattern="^[0-9]{10}$" /></td></tr>
<tr><td>District</td>
<td>
<select>
<option value ="Ampara">Ampara</option>
<option value ="Anuradhapura">Anuradhapura</option>
<option value ="Badulla">Badulla</option>
<option value ="Batticaloa">Batticaloa</option>
<option value ="Colombo">Colombo</option>
<option value ="Galle" selected>Galle</option>
<option value ="Gampaha">Gampaha</option>
<option value ="Hambantota">Hambantota</option>
<option value ="Jaffna">Jaffna</option>
<option value ="Kalutara">Kalutara</option>
<option value ="Kandy">Kandy</option>
<option value ="Kegalle">Kegalle</option>
<option value ="Kilinochchi">Kilinochchi</option>
<option value ="Kurunegala">Kurunegala</option>
<option value ="Mannar">Mannar</option>
<option value ="Matale">Matale</option>
<option value ="Matara">Matara</option>
<option value ="Moneragala">Moneragala</option>
<option value ="Mullaitivu">Mullaitivu</option>
<option value ="Nuwara Eliya">Nuwara Eliya</option>
<option value ="Polonnaruwa">Polonnaruwa</option>
<option value ="Puttalam">Puttalam</option>
<option value ="Ratnapura">Ratnapura</option>
<option value ="Trincomalee">Trincomalee</option>
<option value ="Jaffna">Jaffna</option>
<option value ="Kalutara">Kalutara</option>
<option value ="Kandy">Kandy</option>
<option value ="Kegalle">Kegalle</option>
<option value ="Kilinochchi">Kilinochchi</option>
<option value ="Kurunegala">Kurunegala</option>
<option value ="Mannar">Mannar</option>
<option value ="Matale">Matale</option>
</select>
</td></tr>
<tr><td>School Era</td><td><input type="number" name="schoolfromyear" placeholder="1996" min="1980" max="1998" step="1"/>From
                        <br /><input type="number" name="schooltoyear" placeholder="2009" min="1990" max="2011" step="1"/>To</td></tr>
<tr><td>Land Phone</td><td><input type="url" name="website" placeholder="http://kohomaharigodayamu.blogspot.com"/></td></tr>
<tr><td></td><td><input type="submit" name="submitt" value="Submit"/></td></tr>
</table></form></center>
</body>
</html>
ලිපිය ලියුවේ at Saturday, June 23, 2012
Labels:

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )