create two files named:
- index.html
- style.css
Html Code:(index.html)
<!DOCTYPE>
<html>
<head>
<title>signup form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="box">
<h1>Registration form</h1>
<form>
<table>
<tr>
<td><label>Your Name</label></td>
<td><input type="text" value="" type="" placeholder="enter your first name" id="fname" />
<input type="text" value="" name="" placeholder="enter your last name" id="lname" /><br/></td>
</tr>
<tr>
<td><label>Username</label></td>
<td><input type="text" value="" name="" /><br/></td>
</tr>
<tr>
<td><label>Date of birth</label></td>
<td><input type="date" name="" /><br/></td>
</tr>
<tr>
<td><label>Gender</label></td>
<td><input type="radio" name="gender" id="male" /><label for="male" id="four">Male</label> <input type="radio" name="gender" id="female"><label for="female" id="five">Female</label><br/></td>
</tr>
<tr>
<td><label>Email</label></td>
<td><input type="email" name="" placeholder="e.g:example@email.com" /><br/></td>
</tr>
<tr>
<td><label>confirm your Email</label></td>
<td><input type="email" name="" placeholder="e.g:example@email.com" /><br/></td>
</tr>
<tr>
<td><label>password</label></td>
<td><input type="password" name="" value="" /><br/></td>
</tr>
<tr>
<td><label>confirm your password</label></td>
<td><input type="password" name="" value="" /><br/></td>
</tr>
<tr>
<td><label>phone number</label></td>
<td><input type="tel" name="" placeholder="e.g:03XX-XXXXXXX" /><br/></td>
</tr>
<tr>
</table>
<div align="center" id="button">
<input type="submit" value="signup" />
</div>
</form>
</div>
<script>
var fname=document.getElementById("fname");
if(fname.value=""){
alert("please enter your first name");
fname.focus();
}
</script>
</body>
</html>
Css Code:(style.css)
#box{
border:2px solid red;
display:flex;
flex-direction:column;
width:600px;
margin:10px auto;
padding:10px;
min-height:600px;
text-align:center;
background-color:pink;
}
form input{
margin-top:20px;
margin-bottom:20px;
margin-left:5px;
border:2px solid green;
border-radius:10px;
outline:none;
padding:10px;
}
form label{
font-size:20px;
}
form label:hover{
background-color:red;
}
#fname{
width:150px;
}
#lname{
margin-left:10px;
width:150px;
}
#button input:hover{
cursor:pointer;
background-color:pink;
}
@media screen and (max-width:660px){
#box tr{
display:flex;
flex-direction:column;
}
#box{
width:300px;
}
form input{
margin-top:0;
}
#lname{
margin-left:5px;
}
}
0 Comments