یک سری موارد رو به دلخواه اضافه کردم.
<!DOCTYPE html>
<html>
<head>
<title>FORM</title>
<link rel="stylesheet" href="project.css" type="text/css">
</head>
<body>
<form method="post">
<table dir="rtl" style="width: 100%;">
<thead>
<tr>
<th colspan="2">فرم ازمایشی</th>
</tr>
</thead>
<tbody>
<tr>
<td><label>نام :</label></td>
<td><input type="text" class="sd" name="name"></td>
</tr>
<tr>
<td><lable>نام خانوادگی :</lable></td>
<td><input type="text" class="sd" name="last_name"></td>
</tr>
<tr>
<td> <label>کد ملی:</label></td>
<td><input type="text" class="sd" name="code"></td>
</tr>
<tr>
<td><lable>ایمیل:</lable></td>
<td><input type="email" class="sd" required name="email"></td>
</tr>
<tr>
<td><label>رمز عبور ایمیل :</label></td>
<td><input type="password" class="sd" required name="pass"></td>
</tr>
<tr>
<td><label>ادرس:</label></td>
<td > <input type="text" class="sd" required name="address"></td>
</tr>
<tr>
<td><lable>شماره تلفن:</lable></td>
<td><input type="number" class="sd" required name="phone"> </td>
</tr>
<tr>
<td><lable>سن:</lable></td>
<td><input class="sd" type="number" name="age"></td>
</tr>
<tr>
<td><label>جنسیت :</label></td>
<td><input type="radio" name="gender">خانم
<input type="radio" name="gender">اقا
<input type="radio" name="gender">سایر
</td>
</tr>
<tr>
<td><label>رنگ مورد علاقه:</label></td>
<td><input type="text" class="sd" name="color"></td>
</tr>
<tr>
<td><lable>زبان انگلیسی بلدی:</lable></td>
<td><input type="radio" name="en">بله
<input type="radio" name="en">خیر
<input type="radio" name="en">زیاد نه
</td>
</tr>
<tr >
<td></td>
<td ><button type="submit" name="button">ثبت اطلاعات</button>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
<!--محتوای سی اس اس -->
@charset 'utf-8';
*{
padding: 0px;
margin: 0xp;
font-style: italic;
box-sizin
g: border-box;
}
form {
width: 400px;
border: 2px solid rgb(0, 0, 0);
margin: 100px auto;
direction: rtl;
border-radius: 30px;
padding: 0px 5px;
font-size: large;
background:linear-gradient(rgb(187, 164, 48) 20%,rgb(192, 150, 12) 20%,rgb(209, 176, 11),rgb(143, 133, 4));
}
table thead tr th {
width: 100% ;
padding: 10px 0px;
background-color: black;
color: white;
border-radius:30px ;
}
input[type="radio"]{
margin-left: 5px;
}
input[type="text"],input[type="email"],input[type="password"],input[type="number"]{
width: 100%;
padding: 4px;
border-radius: 5px;
border: 1px solid black;
font-size: medium;
}
.sd:focus{
box-shadow: 0px 0px 0px 4px rgba(2, 0, 0, 0.2);
}
button {
padding: 5px 10px;
border-radius: 30px;
border:1px solid rgb(149, 239, 166);
background-color: rgb(149, 239, 166); ;
color: black;
font-size: larger;
width: 50%;
}
button:hover{
padding: 5px 10px;
border-radius: 30px;
border:1px solid rgb(5, 171, 36);
color: black;
background-color:rgb(5, 171, 36) ;
font-size: larger;
width: 50%;
}