SWE Lab Archive

Experiment 3

Design a simple Registration form with following input - Name, Address, Mobile, Email-Id, Gender, Product Preferences, Username, Password, Confirm Password. Add functionalities by adding attributes - Fieldset, legend, ID, Name, value, placeholder, title, req.

<html>
    <head>
        <title>E Commerce Website - Register</title>
    </head>

    <body>
        <nav>
            <table width="100%" border="0">
                <tr>
                    <td align="left">
                        <a href="14-08-2026/14-08-2026.html"><h2>E Commerce Site</h2></a>
                    </td>
                    <td align="center">
                        <input type="text" placeholder="Search For Items" />
                    </td>
                    <td align="right">
                        <a href="21-08-2026-Login.html"
                            ><input type="button" value="Login"
                        /></a>
                        <a href="21-08-2026-Register.html"
                            ><input type="button" value="Register"
                        /></a>
                    </td>
                </tr>
            </table>
        </nav>

        <h2 align="center">Register</h2>

        <div align="center">
            <form>
                <fieldset>
                    <legend>Personal Information</legend>

                    <table border="0" cellpadding="8" cellspacing="0">
                        <tr>
                            <td><label for="fname">First Name:</label></td>
                            <td>
                                <input
                                    type="text"
                                    id="fname"
                                    name="fname"
                                    placeholder="First Name"
                                    required
                                />
                            </td>
                        </tr>
                        <tr>
                            <td><label for="lname">Last Name:</label></td>
                            <td>
                                <input
                                    type="text"
                                    id="lname"
                                    name="lname"
                                    placeholder="Last Name"
                                    required
                                />
                            </td>
                        </tr>
                        <tr>
                            <td align="top">
                                <label for="address">Address:</label>
                            </td>
                            <td>
                                <textarea
                                    id="address"
                                    placeholder="Enter Your Address"
                                    rows="3"
                                    cols="46"
                                    required
                                ></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td><label for="mobile">Mobile Number:</label></td>
                            <td>
                                <input
                                    type="number"
                                    id="mobile"
                                    name="mobile"
                                    placeholder="Enter Your Mobile Number"
                                />
                            </td>
                        </tr>
                        <tr>
                            <td><label for="email">Email Address:</label></td>
                            <td>
                                <input
                                    type="email"
                                    id="email"
                                    name="email"
                                    placeholder="Enter Your Email Address"
                                />
                            </td>
                        </tr>
                        <tr>
                            <td><label>Gender:</label></td>
                            <td>
                                <input type="radio" id="male" name="gender" />
                                <label for="male">Male</label>
                                <input type="radio" id="female" name="gender" />
                                <label for="female">Female</label>
                            </td>
                        </tr>
                        <tr>
                            <td align="top">
                                <label for="preference"
                                    >Product Preference:</label
                                >
                            </td>
                            <td>
                                <input
                                    type="checkbox"
                                    id="luxary"
                                    name="checkbox"
                                /><label for="luxary">Luxary</label>
                                <input
                                    type="checkbox"
                                    id="electronics"
                                    name="checkbox"
                                /><label for="electronics">Electronics</label>
                                <input
                                    type="checkbox"
                                    id="cosmetics"
                                    name="checkbox"
                                /><label for="cosmetics">Cosmetics</label>
                                <input
                                    type="checkbox"
                                    id="furniture"
                                    name="checkbox"
                                /><label for="furniture">Furniture</label>
                                <input
                                    type="checkbox"
                                    id="fresh"
                                    name="checkbox"
                                /><label for="fresh">Fresh</label>
                            </td>
                        </tr>
                    </table>
                </fieldset>

                <br />

                <fieldset>
                    <legend>Credentials</legend>

                    <table border="0" cellpadding="8" cellspacing="0">
                        <tr>
                            <td><label for="username">Username:</label></td>
                            <td>
                                <input
                                    type="text"
                                    id="username"
                                    name="username"
                                    placeholder="Enter Your Username"
                                    required
                                />
                            </td>
                        </tr>
                        <tr>
                            <td><label for="password">Password:</label></td>
                            <td>
                                <input
                                    type="password"
                                    id="password"
                                    name="password"
                                    placeholder="Enter Password"
                                    required
                                />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="cpassword">Confirm Password:</label>
                            </td>
                            <td>
                                <input
                                    type="password"
                                    id="cpassword"
                                    name="cpassword"
                                    placeholder="Confirm Password"
                                    required
                                />
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><input type="submit" value="Submit" /></td>
                        </tr>
                    </table>
                </fieldset>
            </form>
        </div>

        <h4 align="center">
            Already Registered? <a href="21-08-2026-Login.html">Login Now!</a>
        </h4>
    </body>
</html>

Design a login page linking with registration form consisting of username, password, submit and reset.

<html>
    <head>
        <title>E Commerce Website - Login</title>
    </head>

    <body>
        <nav>
            <table width="100%" border="0">
                <tr>
                    <td align="left">
                        <a href="14-08-2026/14-08-2026.html"><h2>E Commerce Site</h2></a>
                    </td>
                    <td align="center">
                        <input type="text" placeholder="Search For Items" />
                    </td>
                    <td align="right">
                        <a href="21-08-2026-Login.html"
                            ><input type="button" value="Login"
                        /></a>
                        <a href="21-08-2026-Register.html"
                            ><input type="button" value="Register"
                        /></a>
                    </td>
                </tr>
            </table>
        </nav>

        <br /><br /><br />

        <h2 align="center">Login</h2>

        <div align="center">
            <form>
                <fieldset>
                    <table border="0" cellpadding="5">
                        <tr>
                            <td align="right">
                                <label for="username">Username:</label>
                            </td>
                            <td>
                                <input
                                    type="text"
                                    id="username"
                                    name="username"
                                    placeholder="Enter Your Username"
                                    required
                                />
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                <label for="password">Password:</label>
                            </td>
                            <td>
                                <input
                                    type="password"
                                    id="password"
                                    name="password"
                                    placeholder="Enter Password"
                                    required
                                />
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td align="left">
                                <input type="submit" value="Submit" />
                            </td>
                        </tr>
                    </table>
                </fieldset>
            </form>
        </div>

        <h4 align="center">
            Forgot Password? <a href="21-08-2026-Register.html">Reset Now!</a>
        </h4>
        <h4 align="center">
            Not Registerd? <a href="21-08-2026-Register.html">Register Now!</a>
        </h4>
    </body>
</html>