Code of making Sign Up Forms with HTML and CSS
The HTML and CSS part can be separeted from the code. But for better view I included both of them in the same code
 |
| The code will action like that |
HTML Codes-
<html>
<head>
<title>Sign up</title>
<link rel="shortcut icon" href="image.jpg" type="image">
<style>
h2{color:red;}
.srch{margin-left:80px;}
th{color:darkblue;}
p{margin-top:10px;}
.fld-set{width:400px;
padding-top:0px;
margin-top:0px;
margin-bottom:0px;}
.form1{width:432px;
margin-left:450px;}
/*body{background-image:url('mountainskies.jpg');*/
width:100%;
height:100vh;
/* background-repeat:no-repeat;*/
background-size:100% 100%;
/*background-size:10% 19%;*/
background-attachment:fixed;}
form{background-color:white;
width:100%;
/*height:100vh;*/
/* background-repeat:no-repeat;*/
background-size:10% 19%;
background-attachment:fixed;
margin-top:35px;}
.fld-set{border-radius:10px;}
table{border-radius:10px;}
</style>
</head>
<body>
<div class="form1">
<div class="form2">
<form action="form.html" method="post/get">
<fieldset align="#" class="fld-set">
<legend><h2>Your Info</h2></legend>
<table border="12" cellspacing="0" cellpadding="5">
<tr><th colspan="3" style="text-align:center;">SignUp Form</th></tr>
<tr>
<th>Username:</th>
<td colspan="2"><input type="text" name="a"
placeholder="Enter your name" required></td>
</tr>
<tr>
<th>Password:</th>
<td colspan="2"><input type="password" name="b" placeholder="Enter a password" required></td>
</tr>
<tr>
<th>Email Id:</th>
<td colspan="2"><input type="email" name="c" placeholder="Enter your email" required></td>
</tr>
<tr>
<th>Phone Number:</th>
<td colspan="2" class="num"><input type="number" name="d" placeholder="Enter number(Optional)"></td>
</tr>
<tr>
<th>Gender:</th>
<td><input type="radio" name="i">Male</td>
<td><input type="radio" name="i">Female</td>
</tr>
<tr>
<th>Intrests:</th>
<td colspan="2"><input type="checkbox" name="e">Travelling<br><input type="checkbox" name="f">Writting<br><input type="checkbox" name="g">Sports<br><input type="checkbox" name="h">Reading<br></td>
</tr>
<tr>
<th>Why you want the job:</th>
<td colspan="2"><textarea cols="22"rows=""></textarea></td>
</tr>
<tr>
<th colspan="3">
<ul>
<li><p>Read All The Instractions Carefully.</p></li>
</ul>
</th>
</tr>
<tr>
<td colspan="3"><input type="checkbox" name="l" required>Yes, I Have Read
& Agree To Your All Agreements </td>
</tr>
<tr><th colspan="3" style="text-align:center;"><input type="submit" name="m" value="submit"></th>
</tr>
</table>
<br>
<div class="srch"><input type="search" name="de" placeholder="search for help"><input type="submit" name="m" value="Search"></div>
</fieldset>
</form>
</div>
</div>
</body>
</html>
<html>
<head>
<title>Sign up</title>
<link rel="shortcut icon" href="image.jpg" type="image">
<style>
h2{color:red;}
.srch{margin-left:80px;}
th{color:darkblue;}
p{margin-top:10px;}
.fld-set{width:400px;
padding-top:0px;
margin-top:0px;
margin-bottom:0px;}
.form1{width:432px;
margin-left:450px;}
/*body{background-image:url('mountainskies.jpg');*/
width:100%;
height:100vh;
/* background-repeat:no-repeat;*/
background-size:100% 100%;
/*background-size:10% 19%;*/
background-attachment:fixed;}
form{background-color:white;
width:100%;
/*height:100vh;*/
/* background-repeat:no-repeat;*/
background-size:10% 19%;
background-attachment:fixed;
margin-top:35px;}
.fld-set{border-radius:10px;}
table{border-radius:10px;}
</style>
</head>
<body>
<div class="form1">
<div class="form2">
<form action="form.html" method="post/get">
<fieldset align="#" class="fld-set">
<legend><h2>Your Info</h2></legend>
<table border="12" cellspacing="0" cellpadding="5">
<tr><th colspan="3" style="text-align:center;">SignUp Form</th></tr>
<tr>
<th>Username:</th>
<td colspan="2"><input type="text" name="a"
placeholder="Enter your name" required></td>
</tr>
<tr>
<th>Password:</th>
<td colspan="2"><input type="password" name="b" placeholder="Enter a password" required></td>
</tr>
<tr>
<th>Email Id:</th>
<td colspan="2"><input type="email" name="c" placeholder="Enter your email" required></td>
</tr>
<tr>
<th>Phone Number:</th>
<td colspan="2" class="num"><input type="number" name="d" placeholder="Enter number(Optional)"></td>
</tr>
<tr>
<th>Gender:</th>
<td><input type="radio" name="i">Male</td>
<td><input type="radio" name="i">Female</td>
</tr>
<tr>
<th>Intrests:</th>
<td colspan="2"><input type="checkbox" name="e">Travelling<br><input type="checkbox" name="f">Writting<br><input type="checkbox" name="g">Sports<br><input type="checkbox" name="h">Reading<br></td>
</tr>
<tr>
<th>Why you want the job:</th>
<td colspan="2"><textarea cols="22"rows=""></textarea></td>
</tr>
<tr>
<th colspan="3">
<ul>
<li><p>Read All The Instractions Carefully.</p></li>
</ul>
</th>
</tr>
<tr>
<td colspan="3"><input type="checkbox" name="l" required>Yes, I Have Read
& Agree To Your All Agreements </td>
</tr>
<tr><th colspan="3" style="text-align:center;"><input type="submit" name="m" value="submit"></th>
</tr>
</table>
<br>
<div class="srch"><input type="search" name="de" placeholder="search for help"><input type="submit" name="m" value="Search"></div>
</fieldset>
</form>
</div>
</div>
</body>
</html>
 |
| Final Form Result |
Form Action Page-
<html>
<head>
<style>
.mhs{background-color:yellow;
text-align:center;}
.aaa{background-color:green;}
.bbb{background-color:lime;}
.ccc{background-color:greenyellow;}
.ddd{background-color:greenyellow;}.eee
{background-color:lime;}
.fff{background-color:green;}
</style>
</head>
<body>
<div class="aaa"><br><br><br><br></div>
<div class="bbb"><br><br><br><br></div>
<div class="ccc"><br><br><br><br></div>
<div class="mhs"><br><br><br>
<h1>Congrats, Your Form Have Been Registered Successfully !</h1>
<br><br><br>
</div>
<div class="ddd"><br><br><br><br></div>
<div class="eee"><br><br><br><br></div>
<div class="fff"><br><br><br><br></div>
</body>
</html>
<head>
<style>
.mhs{background-color:yellow;
text-align:center;}
.aaa{background-color:green;}
.bbb{background-color:lime;}
.ccc{background-color:greenyellow;}
.ddd{background-color:greenyellow;}.eee
{background-color:lime;}
.fff{background-color:green;}
</style>
</head>
<body>
<div class="aaa"><br><br><br><br></div>
<div class="bbb"><br><br><br><br></div>
<div class="ccc"><br><br><br><br></div>
<div class="mhs"><br><br><br>
<h1>Congrats, Your Form Have Been Registered Successfully !</h1>
<br><br><br>
</div>
<div class="ddd"><br><br><br><br></div>
<div class="eee"><br><br><br><br></div>
<div class="fff"><br><br><br><br></div>
</body>
</html>
 |
| Form Action Result |
No comments