html registration form । css registration form । php registration form

<!DOCTYPE html>
<html lang="en">
<head>
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
<meta charset="utf-8">
<title>Registration Form</title>
<style>
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="text"],
input[type="password"],
input[type="number"],
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;
}
</style>
</head>
<body>
<form action="submit.html" method="POST">
<center>
<h2>Registration Form</h2>

<input type="text" required name="name" placeholder="Name">
<br>

<input type="password" required name="password" placeholder="Password">
<br>

<font color="#EACC16">
<b>
Gender :
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
</b>
</font>
<br><br>

<input type="email" required name="email" placeholder="Email">
<br>

<input type="number" required name="phone" placeholder="Phone Number">
<br>

<input type="submit" name="signup" value="Sign Up">
</center>
</form>
</body>
</html>

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.

html registration form । css registration form । php registration form

Popular Posts

Categories