html registration form । css registration form । php registration form

<!DOCTYPE html>
<html lang="en">
    <meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
    <meta charset="utf-8">
    <title>Registration Form</title>
        h2 {
            color: #F3F1F1;

        form {
            width: 310px;
            height: 390px;
            background-color: #171D9A;
            margin: 0 auto;
            margin-top: 40px;
            padding-top: 10px;
            padding-left: 2px;
            border-radius: 10px;

        input[type="email"] {
            margin-bottom: 10px;
            border: solid 1px #999;
            box-sizing: border-box;
            padding: 12px 8px;
            width: 200px;

        input[type=submit] {
            background-color: #EACC16;
            border: 1px solid #365899;
            color: white;
            font-size: 14px;
            height: 35px;
            width: 200px;
            padding: 0 19px;

        input[type=submit]:hover {
            background-color: #465e91;
<form action="submit.html" method="POST">
        <h2>Registration Form</h2>
        <!-- Name -->
        <input type="text" required name="name" placeholder="Name">
        <!-- Password -->
        <input type="password" required name="password" placeholder="Password">
        <!-- Gender -->
        <font color="#EACC16">
                Gender :
                <input type="radio" name="gender" value="male">Male
                <input type="radio" name="gender" value="female">Female
        <!-- Email -->
        <input type="email" required name="email" placeholder="Email">
        <!-- Phone Number -->
        <input type="number" required name="phone" placeholder="Phone Number">
        <!-- Submit Button -->
        <input type="submit" name="signup" value="Sign Up">

Explanations for each section of the code:

1. The `form` action attribute has been set to `"submit.html"`. This means that when the form is submitted, the data will be sent to the "submit.html" file for processing.

2. The `<h2>` element is used to display the header title "Registration Form".

3. Input fields are created using the `<input>` element. Different types of input fields (`text`, `password`, `number`, and `email`) are styled uniformly and have their respective attributes set (such as `required`, `name`, and `placeholder`).

4. Radio buttons for gender have been modified to have distinct values (`value="male"` and `value="female"`) to differentiate between the selected options.

5. The submit button's appearance is styled, and a hover effect is applied to enhance user interactivity.

Feel free to customize the code further as needed for your project.
Next Post Previous Post
No Comment
Add Comment
comment url