In this tutorial I will teach you that how you can design HTML Form Layout. After Styling We will apply style on it. In my last tutorial I teach you about HTML Forms Field. You have need to carefull about tags. Which tag you should use. And where you will use it. Because there are some rules that you must follow. Like you can’t write any tag directly into the tables tag. You can use only tr and td tags in table directly. These things are very important which you will gain by practice. Make more practice and get more knowledge. You should create a form that will look cool. Mean you should be carefull about arrangement. After learning style we will apply on this HTML Form Layout then it will look more cool.
Signup – HTML Form Layout
<html>
<head>
<title>Signup Form</title>
</head>
<body>
<form>
<table>
<tr>
<th colspan=”2″>Create Account</th>
</tr>
<tr>
<td>First Name :</td>
<td><input type=”text” name=”fname”></td>
</tr>
<tr>
<td>Last Name :</td>
<td><input type=”text” name=”lname”></td>
</tr>
<tr>
<td>Username :</td>
<td><input type=”text” name=”username”></td>
</tr>
<tr>
<td>Password :</td>
<td><input type=”password” name=”pass”></td>
</tr>
<tr>
<td>Confirm Password :</td>
<td><input type=”password” name=”cpass”></td>
</tr>
<tr>
<td>Gender :</td>
<td><input type=”radio” name=”gender” value=”male”> Male <input type=”radio” name=”gender” value=”female”>
</tr>
<tr>
<td>Age :</td>
<td><input type=”text” name=”age”></td>
</tr>
<tr>
<td>Country :</td>
<td>
<select name=”country”>
<option value=”pakistan”>Pakistan</option>
<option value=”india”>India</option>
<option value=”usa”>USA</option>
<option value=”uk”>UK</option>
<option value=”uae”>UAE</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td><input type=”submit” name=”submit” value=”Submit”> <input type=”reset” value=”Reset”></td>
</tr>
</table>
</form>
</body>
</html>
You can see in above code that I used form tag outside the table tags. Because I can’t use them in directly table tags. And After writing this code you will see it willl look cool. If you have any problem to understand above code then you can tell us. We will help you. Now you can see below code For Login Form. Write Below code in body tags.
<form>
<table>
<tr>
<th colspan=”2″>Login</th>
</tr>
<tr>
<td>Username :</td>
<td><input type=”text” name=”username”></td>
</tr>
<tr>
<td>Password :</td>
<td><input type=”checkbox” name=”remember_login” value=”remember”>Remember Me!</td>
</tr>
<tr>
<td></td>
<td><input type=”submit” value=”Login”></td>
</tr>
</table>
</form>
This is All about HTML Form Layout. If you have any problem at any place then you can ask. We will tell you your problems. And give you tips how you can make it better. Keep Visiting our Website For Latest Tutorials.
