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;
    }
    }