Web Development

Create a HTML Form for User Login and Registration

The task is to create a form for login and user registration asking for most of the possible data fields that may require during the form fill-up.

Some of the tags shown up here are depreciated already so we will be updating on that matter as soon as possible.

<html>

    <head>

        <title>form create</title>                                                                                                                                                                                                                                       </title>

    </head>

    <body>

        <form>

        <fieldset>

            <legend>

                <p><font color=#0000AA><b>Click for Login</b></font color></p>

            </legend>

            <p>If you are already registered, please enter your Username and Password:</p>

        <table>

            <tr>

                <td>Username:</td>

                <td><input type="text"></td>

            </tr>

            <tr>

                <td>Password:</td>

                <td><input type="password"></td>

            </tr>

            <tr>

                <td><input type="button" value="Login"></td>

                <td><input type="reset" value="Refresh"></td>

            </tr>

           

        </table>

        </fieldset>

        </form>

        <form>

            <fieldset>

            <legend>

                <h4>New User Registration</h4>

            </legend>

            <p>If you are not registered, please register below:</p>

            <p>Notes:<font color=red> *(Asterisk) mark for required fields.</font color></p>

   

        <table border=1 width=35%>

            <tr>

                <td>Title</td>

                <td>

                    <select>

                        <option>Mr.</option>

                        <option>Mrs.</option>

                        <option>Miss</option>

                    </select>

                   

                </td>

            </tr>

            <tr>

                <td>*First name</td>

                <td><input type="text"></td>

            </tr>

            <tr>

                <td>Middle name</td>

                <td><input type="text"></td>

            </tr>

            <tr>

                <td>*Last name</td>

                <td><input type="text"></td>

            </tr>

            <tr>

                <td>*Address (Line 1)</td>

                <td><input type="text"></td>

            </tr>

            <tr>

                <td>Address (Line 2)</td>

                <td><input type="text"></td>

            </tr>

            <tr>

                <td>*City Option</td>

                <td>

                    <input type="radio" name="city" value="Ktm">Kathmandu Valley<br/>

                    <input type="radio" name="city" value="oKtm">Other areas of Nepal<br/>

                    <input type="radio" name="city" value="oNepal">Outside Nepal<br/>

                </td>

            </tr>

            <tr>

                <td>Name of City</td>

                <td><input type="text"></td>

            </tr>

            <tr>

                <td>*Country</td>

                <td>

                    <select>

                        <option>Nepal</option>

                        <option>India</option>

                        <option>China</option>

                    </select>

                   

                </td>

            </tr>

            <tr>

                <td>*Phone (Home)</td>

                <td><input type="text"></td>

            </tr>

            <tr>

                <td>E-mail</td>

                <td>

                    <input type="text">

                </td>

            </tr>

            <tr>

                <td>Update your photo</td>

                <td><input type="file"></td>

            </tr>

            <tr>

                <td>Fax:</td>

                <td>

                    <input type="text">

                </td>

            </tr>

        </table>

        <br/><br/>

        <table border=1 width=35%>

            <tr>

                <td>&nbsp;</td>

                <td colspan="2">Account Information:</td>

            </tr>

            <tr>

                <td>*User name</td>

                <td colspan="2"><input type="text"></td>

            </tr>

            <tr>

                <td>*Password</td>

                <td colspan="2"><input type="password"></td>

            </tr>

            <tr>

                <td>*Confirm Password</td>

                <td colspan="2"><input type="password"></td>

            </tr>

            <tr>

                <td>&nbsp;</td>

                <td colspan="2">How did you hear about us?</td>

            </tr>

            <tr>

                <td>&nbsp;</td>

                <td colspan="2">

                    <select>

                        <option>-select If Any-</option>

                        <option>Friends</option>

                        <option>Family</option>

                        <option>Neighbors</option>

                        <option>Other</option>

                    </select>

                   

                </td>

            </tr>

            <tr>

                <td>&nbsp;</td>

                <td colspan="2">Please select which mailing lists you want to be included in.</td>

            </tr>

            <tr>

                <td>&nbsp;</td>

                <td>Site</td>

                <td>Merchandise</td>

            </tr>

            <tr>

                <td>&nbsp;</td>

                <td><input type="checkbox" name="site" value="yes" checked>sites<br/>Updates</td>

                <td><input type="checkbox" name="book" value="no">Books</td>

            </tr>

            <tr>

                <td>&nbsp;</td>

                <td><input type="checkbox" name="event" value="no">Events<br/>Reminders</td>

                <td><input type="checkbox" name="computer" value="yes" checked>Computers and Electronics</td>

            </tr>

            <tr>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td><input type="checkbox" name="electronics value="no">Electronics</td>

                            </tr>

            <tr>

                <td><input type="submit" value="Submit"></td>

                <td colspan="2"><input type="reset" value="Refresh"></td>

            </tr>

           

        </table>

        </form>

    </body>

</html

Tuts

About Author

Tutsmaster.org provides tutorials related to tech and programmings. We are also setting up a community for the users and students.

You may also like

HTML introduction
Web Development

HTML – Introduction, History & Syntax

  • December 21, 2019
So, first of all, I would like to ask a question for the first time when you heard this term
html heading tag
Web Development

HTML – Heading Tag With Syntax

  • December 21, 2019
A heading tag is one of the most important tags we focus on in HTML or web development because, without