HTML Forms

PHOTO

Sat Sep 14 2024 06:30:21 GMT+0000 (Coordinated Universal Time)

1.
<!DOCTYPE html>
<html>
<head>
    <title>Registration Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 50px;
        }
        h1 {
            text-align: center;
        }
        form {
            max-width: 400px;
            margin: auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
        }
        table {
            width: 100%;
            margin-bottom: 10px;
        }
        td {
            padding: 8px;
        }
        input[type="text"], input[type="password"], textarea {
            width: 100%;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        input[type="submit"] {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <h1>Registration Form</h1>
    <form action="display.php" method="POST">
        <table>
            <tr>
                <td>Name:</td>
                <td><input type="text" name="name" required></td>
            </tr>
            <tr>
                <td>Username:</td>
                <td><input type="text" name="userName" required></td>
            </tr>
            <tr>
                <td>Password:</td>
                <td><input type="password" name="password" required></td>
            </tr>
            <tr>
                <td>Mobile Number:</td>
                <td><input type="text" name="mobilenumber" maxlength="10" required></td>
            </tr>
            <tr>
                <td>Address:</td>
                <td><textarea name="address" maxlength="200" required></textarea></td>
            </tr>
        </table>
        <div style="text-align: center;">
            <input type="submit" name="register" value="Register">
        </div>
    </form>
</body>
</html>


2.

<!DOCTYPE html>
<html>
<head>
    <title>Event Search</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 50px;
        }
        h1 {
            text-align: center;
        }
        form {
            text-align: center;
            margin-top: 50px;
        }
        input[type="text"] {
            width: 50%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        input[type="submit"] {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <h1>Event Search</h1>
    <form action="search.php" method="POST">
        <input type="text" name="someText" list="text" placeholder="Search for an event..." required>
        <datalist id="text">
            <option value="Bridal party">
            <option value="Engagement parties">
            <option value="Caterer">
            <option value="Wedding ceremony">
            <option value="Wedding reception">
        </datalist>
        <br><br>
        <input type="submit" name="search" value="Search">
    </form>
</body>
</html>

COPY