HTML5

Registration form using HTML5 input types

In this tutorial I will show you how to create a registration form using HTML5 input types. A registration form has fields like first name, last name, email, date of birth, gender, drop down select, submit etc. At first let’s have a look at the registration form we will have at the end of this tutorial.

Now let’s have a look at the source code of the registration form above. Write down the following code in the body section of your HTML webpage.

<form>
<table>
    <tr>
        <td>
            First Name:
        </td>
        <td>
            <input type="text" name="firstname" placeholder="Ex: Mosleh" />
        </td>
    </tr>
    <tr>
        <td>
            Last Name:
        </td>
        <td>
            <input type="text" name="lastname" placeholder="Ex: Uddin" />
        </td>
    </tr>
    <tr>
        <td>
            Email:
        </td>
        <td>
            <input type="email" name="email" placeholder="Ex: example@example.com" />
        </td>
    </tr>
    <tr>
        <td>
            Date of Birth:
        </td>
        <td>
            <input type="date" name="birthday" />
        </td>
    </tr>
    <tr>
        <td>
            Pick your lucky number:
        </td>
        <td>
            <input type="number" name="luckynumber" min="0" max="10" value="5" />
        </td>
    </tr>
    <tr>
        <td>
            Your Website:
        </td>
        <td>
            <input type="url" name="homepage" placeholder="Ex: www.findsourcecode.com" />
        </td>
    </tr>
    <tr>
        <td>
            Gender:
        </td>
        <td>
            <select name="gender">
                <option value="male">Male</option>
                <option value="female">Female</option>
                <option value="unknown">Don't wanna share</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <input type="submit" />
        </td>
    </tr>
</table>            
</form>

I have another tutorial on registration form in HTML where I discussed about input elements like radio button and check box. Click Here to see that post.

If you have any questions feel free to ask me in the comment section.

One thought on “Registration form using HTML5 input types

Leave a Reply

Your email address will not be published. Required fields are marked *

5 × 1 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.