آموزش و يادگيري تگ form در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <form> آشنا مي‌شويم. اين تگ براي ايجاد فرم‌هاي دريافت اطلاعات از کاربر در صفحات وب استفاده مي‌شود.

تگ form در HTML چيست؟

تگ <form> يک کانتينر براي دريافت داده‌ها از کاربر مانند متن، ايميل، رمز عبور، انتخاب از منوها و دکمه‌ها است. داده‌هاي وارد شده معمولاً به سرور ارسال مي‌شوند تا پردازش يا ذخيره شوند.

مثال ساده از تگ form

<form action="/submit" method="post">
  <label for="name">نام:</label>
  <input type="text" id="name" name="name">

  <label for="email">ايميل:</label>
  <input type="email" id="email" name="email">

  <button type="submit">ارسال</button>
</form>

در اين مثال، يک فرم ساده با فيلدهاي نام و ايميل و دکمه ارسال ساخته شده است.

ويژگي‌هاي مهم تگ form

ويژگي	توضيح
action	آدرس سروري که داده‌ها به آن ارسال مي‌شود
method	روش ارسال داده‌ها (GET يا POST)
enctype	نوع کدگذاري داده‌ها هنگام ارسال (مثلاً براي فايل)
name	نام فرم براي شناسايي آن

مثال با استايل CSS

<style>
  form {
    display: flex;
    flex-direction: column;
    max-width: 300px;
    margin: 10px;
  }
  label {
    margin-top: 10px;
    font-weight: bold;
  }
  input {
    padding: 5px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
  }
  button {
    margin-top: 15px;
    padding: 8px;
    background-color: #2196f3;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
  button:hover {
    background-color: #1976d2;
  }
</style>

<form action="/submit" method="post">
  <label for="name">نام:</label>
  <input type="text" id="name" name="name">

  <label for="email">ايميل:</label>
  <input type="email" id="email" name="email">

  <button type="submit">ارسال</button>
</form>