Form Validation with HTML5 AND CSS3
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>welcome to form validation</title>
<link href="form validation.css" rel="stylesheet">
</head>
<body>
<form name="loginform">
<fieldset>
<ul>
<li>User Name</li>
<li>
<div class="symbol">n</div>
<input type="text" placeholder="User Name" required pattern="[a-z]{4,10}">
<span valid="W" invalid="X"></span>
</li>
<li>Password</li>
<li>
<div class="symbol">I</div><input type="password" placeholder="Password" required pattern="[a-z]{4,10}[@#$]{1}">
<span valid="W" invalid="X"></span>
</li>
<li><input type="Button" value="Submit"></li>
</ul>
</fieldset>
</form>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>welcome to form validation</title>
<link href="form validation.css" rel="stylesheet">
</head>
<body>
<form name="loginform">
<fieldset>
<ul>
<li>User Name</li>
<li>
<div class="symbol">n</div>
<input type="text" placeholder="User Name" required pattern="[a-z]{4,10}">
<span valid="W" invalid="X"></span>
</li>
<li>Password</li>
<li>
<div class="symbol">I</div><input type="password" placeholder="Password" required pattern="[a-z]{4,10}[@#$]{1}">
<span valid="W" invalid="X"></span>
</li>
<li><input type="Button" value="Submit"></li>
</ul>
</fieldset>
</form>
</body>
</html>
css
*{
border:0px;
padding:0px;
margin:0px;
}
@font-face {
font-family:mysymbol_font;
src:url(symbol.otf);
}
div.symbol {
font-family:mysymbol_font;
position:absolute;
top:0px;
left:10px;
font-size:30px;
}
body {
background:#f1f1f1;
}
fieldset {
border:solid 1px #CCC;
padding:20px;
width:35%;
margin:15% auto;
background:#FFF;
}
input {
border:solid 1px #CCC;
line-height:40px;
width:90%;
margin:5px 0px;
padding-left:30px;
}
input[type=button]{
width:100% !important;
}
ul li {
list-style:none;
position:relative;
}
input:valid+span:after {
content:attr(valid);
font-family:mysymbol_font;
font-size:30px;
position:absolute;
right:30px;
top:0px;
}
input:invalid+span:after {
content:attr(invalid);
font-family:mysymbol_font;
font-size:30px;
position:absolute;
right:30px;
top:0px;
}
Comments
Post a Comment