Home >>HTML Tutorial >HTML Registration Form

HTML Registration Form

Registration Form in HTML 5

Registration form have various types are used intensively on preregistration of website to allow for user or visitor can create their own profile on your website.

<html>
<head>
<title>HTML Table</title>
</head>
<body>
<form method="" action="">
<table border="1" align="center" width="400" bgcolor="#CCCCCC" >
<caption>Registration form</caption>
<tr>
<th>Enter your first name</th>
<td><input type="text" name="fn" id="fn1" maxlength="10" title="enter your first name" placeholder="enter your first name" required/></td>
</tr>
<tr>
<th>Enter your last name</th>
<td><input type="text"/></td>
</tr>
<tr>
<th>Enter your password</th>
<td><input type="password"/></td>
</tr>
<tr>
<th>ReEnter your password</th>
<td><input type="password"/></td>
</tr>
<tr>
<th>Enter your email</th>
<td><input type="email"/></td>
</tr>
<tr>
<th>Enter your mobile</th>
<td><input type="number"/></td>
</tr>
<tr>
<th>Enter your address</th>
<td><textarea rows="8" cols="20"></textarea></td>
</tr>
<tr>
<th>Select your gender</th>
<td>
male<input type="radio" name="g" value="m"/>
female<input type="radio" name="g" value="f"/>
</td>
</tr>
<tr>
<th>Select your hobbies</th>
<td>
hobby1<input type="checkbox" name="x[]" value="h"/>
hobby2<input type="checkbox" name="x[]" value="h2"/>
hobby3<input type="checkbox" name="x[]" value="h3"/>
</td>
</tr>
<tr>
<th>Select your DOB</th>
<td><input type="date"/></td>
</tr>
<tr>
<th>Select your Country</th>
<td>
<select name="country">
<option value="" selected="selected" disabled="disabled">Select your country</option>
<option value="1">India</option>
<option value="2">Pakistan</option>
</select>
</td>
</tr>
<tr>
<th>Upload your pic</th>
<td><input type="file"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Save My Data"/>
<input type="reset" value="Reset Data"/>
</td>
</tr>
</table>
</form>
</body>
</html>
Output :
HTML Registration form

Try it Yourself

We start our program with html tag. first create table with border=1, align=center. declare twelve different field . inside first field we define <input type="text"> with property maxlength="10" and a placeholder, a password is define inside <input> tag with type=password it takes every input in password form(****). Now create email field inside <input> tag type="email" it takes string input form. create mobile no with <input> type="number". create an address field : define inside textarea in which cols=20 and row=8. its generate a address area(multiple lines). Now generate a gender selection field. input type="radio" radio button is used to select the gender. from radiobox with value=male or female. Another field to create select the hobbies. checkbox button is used because it allows multiple selection of values Create another field (Date of birth) D-O-B. here type="date" define inside <input> it automatically generate a callender. Create field of dropdown list : start with <select> tag of 2 different option with value=(india, pakistan) are defined inside <option> tag. At last an upload field is define. using <input> tag with type="file". it allow you to upload file. Now create two buttons first of type="submit",and second of type="reset" inside <input> type.now close all tags one by one. output will create a complete registration form.