HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS Form Validation | codeshield.blogspot.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form action="https://codeshield.blogspot.com">
<h1 style="text-align:center; color:red;">CodeShield</h2>
<label for="firstname">First name</label></br>
<input type="text" name="firstname" id="firstname" placeholder=" " required></br></br>
<label for="lastname">Last name</label></br>
<input type="text" name="lastname" id="lastname" placeholder=" " required></br></br>
<label for="tel">Phone No.</label></br>
<input type="tel" name="tel" id="tel" placeholder=" Phone No."
pattern="^(\s*)?(\+)?([- _():=+]?\d[- _():=+]?){10,14}(\s*)?$" required></br></br>
<label for="email">Email</label></br>
<input type="email" name="email" id="email" placeholder="Email" required></br></br>
<label for="password">Password</label></br>
<input type="password" name="password" id="password" placeholder="Include albhabet,special symbol,numaber"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" required></br></br>
<input type="submit" value="Sign up"/>
</form>
</body>
<form action="https://codeshield.blogspot.com">
<h1 style="text-align:center; color:red;">CodeShield</h2>
<label for="firstname">First name</label></br>
<input type="text" name="firstname" id="firstname" placeholder=" " required></br></br>
<label for="lastname">Last name</label></br>
<input type="text" name="lastname" id="lastname" placeholder=" " required></br></br>
<label for="tel">Phone No.</label></br>
<input type="tel" name="tel" id="tel" placeholder=" Phone No."
pattern="^(\s*)?(\+)?([- _():=+]?\d[- _():=+]?){10,14}(\s*)?$" required></br></br>
<label for="email">Email</label></br>
<input type="email" name="email" id="email" placeholder="Email" required></br></br>
<label for="password">Password</label></br>
<input type="password" name="password" id="password" placeholder="Include albhabet,special symbol,numaber"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" required></br></br>
<input type="submit" value="Sign up"/>
</form>
</body>
</html>
CSS
body {
font-family: Arial;
padding: 20px;
}
*{
box-sizing: border-box;
}
form{
max-width: 400px;
margin: 0 auto;
}
form{
margin-top: 5px;
position: relative;
background: white;
border:4px solid;
padding: 20px;
}
label{
opacity: 1;
font-weight: bold;
position: absolute;
font-size: 20px;
}
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="tel"]{
width: 100%;
border: 0;
margin-top: 5px;
padding: 5px 5px 5px 5px;
background: #99ebff;
}
form > input[type="text"]:focus,
form > input[type="email"]:focus,
form > input[type="password"]:focus,
form > input[type="tel"]:focus{
outline: 0;
background:#ffe6e6;
}
form > input[type="text"]:focus + label,
form > input[type="email"]:focus + label,
form > input[type="password"]:focus + label,
form > input[type="tel"]:focus + label{
opacity: 0;
}
form > input[type="text"]:valid,
form > input[type="email"]:valid,
form > input[type="password"]:valid,
form > input[type="tel"]:valid{
background-color:#00b300;
}
form > input[type="text"]:valid + label,
form > input[type="email"]:valid + label,
form > input[type="password"]:valid + label,
form > input[type="tel"]:valid + label{
opacity: 50;
}
form > input[type="text"]:invalid:not(:focus):not(:placeholder-shown),
form > input[type="email"]:invalid:not(:focus):not(:placeholder-shown),
form > input[type="password"]:invalid:not(:focus):not(:placeholder-shown),
form > input[type="tel"]:invalid:not(:focus):not(:placeholder-shown){
background-color:red;
background-position: 415px 18px;
}
form > input[type="text"]:invalid:not(:focus):not(:placeholder-shown) + label,
form > input[type="email"]:invalid:not(:focus):not(:placeholder-shown) + label,
form > input[type="password"]:invalid:not(:focus):not(:placeholder-shown) + label,
form > input[type="tel"]:invalid:not(:focus):not(:placeholder-shown) + label{
opacity: 0;
}
form input[type="submit"]{
display: block;
width: 50%;
margin: 20px;
background: green;
color: white;
border: 0;
padding: 5px;
font-size: 1.2rem;
}
font-family: Arial;
padding: 20px;
}
*{
box-sizing: border-box;
}
form{
max-width: 400px;
margin: 0 auto;
}
form{
margin-top: 5px;
position: relative;
background: white;
border:4px solid;
padding: 20px;
}
label{
opacity: 1;
font-weight: bold;
position: absolute;
font-size: 20px;
}
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="tel"]{
width: 100%;
border: 0;
margin-top: 5px;
padding: 5px 5px 5px 5px;
background: #99ebff;
}
form > input[type="text"]:focus,
form > input[type="email"]:focus,
form > input[type="password"]:focus,
form > input[type="tel"]:focus{
outline: 0;
background:#ffe6e6;
}
form > input[type="text"]:focus + label,
form > input[type="email"]:focus + label,
form > input[type="password"]:focus + label,
form > input[type="tel"]:focus + label{
opacity: 0;
}
form > input[type="text"]:valid,
form > input[type="email"]:valid,
form > input[type="password"]:valid,
form > input[type="tel"]:valid{
background-color:#00b300;
}
form > input[type="text"]:valid + label,
form > input[type="email"]:valid + label,
form > input[type="password"]:valid + label,
form > input[type="tel"]:valid + label{
opacity: 50;
}
form > input[type="text"]:invalid:not(:focus):not(:placeholder-shown),
form > input[type="email"]:invalid:not(:focus):not(:placeholder-shown),
form > input[type="password"]:invalid:not(:focus):not(:placeholder-shown),
form > input[type="tel"]:invalid:not(:focus):not(:placeholder-shown){
background-color:red;
background-position: 415px 18px;
}
form > input[type="text"]:invalid:not(:focus):not(:placeholder-shown) + label,
form > input[type="email"]:invalid:not(:focus):not(:placeholder-shown) + label,
form > input[type="password"]:invalid:not(:focus):not(:placeholder-shown) + label,
form > input[type="tel"]:invalid:not(:focus):not(:placeholder-shown) + label{
opacity: 0;
}
form input[type="submit"]{
display: block;
width: 50%;
margin: 20px;
background: green;
color: white;
border: 0;
padding: 5px;
font-size: 1.2rem;
}
No comments:
Post a Comment