Htmlslip1 - Posts - OneCompiler

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Styled Form</title> <style> body { font-family: Arial, sans-serif; }

    h1 {
        font-size: 16pt; /* Set font size to 16pt */
        color: red; /* Set text color to red */
        background-color: yellow; /* Set background color to yellow */
        padding: 10px; /* Adding padding for better visibility */
    }

    form {
        margin-top: 20px; /* Add margin to the top of the form */
    }

    label {
        display: block; /* Display labels on a new line */
        margin-bottom: 5px; /* Add margin to the bottom of labels */
    }

    input, select {
        margin-bottom: 10px; /* Add margin to the bottom of form elements */
    }

    input[type="submit"] {
        background-color: green; /* Set background color of the submit button to green */
        color: white; /* Set text color of the submit button to white */
        padding: 8px 12px; /* Add padding to the submit button */
        cursor: pointer; /* Change cursor to pointer on hover */
    }
</style>

</head> <body> <h1>Styled Form Heading</h1> <form action="#" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="age">Age:</label>
    <input type="number" id="age" name="age" required>

    <label for="gender">Gender:</label>
    <select id="gender" name="gender" required>
        <option value="male">Male</option>
        <option value="female">Female</option>
    </select>

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

</body> </html>