مشاهده و تمرین روی کد ها

<!DOCTYPE html>
<html>
<style>
input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}
</style>
<body>

<h3 dir="rtl">استفاده از CSS برای استایل دهی به فرم های HTML</h3>

<div>
  <form dir="rtl" action="action_page.php">
    <label for="fname">نام</label>
    <input type="text" id="fname" name="firstname">

    <label for="lname">نام خانوادگی</label>
    <input type="text" id="lname" name="lastname">

    <label for="country">کشور</label>
    <select id="country" name="country">
      <option value="australia">استرالیا</option>
      <option value="iran">ایران</option>
      <option value="cote d voir">ساحل عاج</option>
    </select>
  
    <input type="submit" value="ثبت">
  </form>
</div>

</body>
</html>

فرم ها در CSS