web development-وب-برنامه نویسی وب-فرانت اند-front endدوره رایگان-الگوریتم اول-free-آموزش کامل

لطفا صبر کنید...

فرم ها در HTML

فرم‌ها در HTML برای جمع‌آوری داده‌ها از کاربران استفاده می‌شوند. فرم‌ها می‌توانند شامل ورودی‌های مختلفی مانند متن، دکمه‌ها، چک‌باکس‌ها و لیست‌ها باشند. ساختار اصلی یک فرم به این شکل است:

ساختار فرم:

  1. form: برای تعریف فرم.
  2. input: برای ایجاد فیلدهای ورودی مانند متن، پسورد، دکمه‌ها و غیره.
  3. textarea: برای ورودی‌های چند خطی.
  4. select و option: برای لیست کشویی.
  5. button: برای دکمه‌ها.
  6. label: برای تعیین برچسب‌ها و متنی که به ورودی‌ها تعلق دارد.
  7. fieldset و legend: برای گروه‌بندی ورودی‌ها در یک قسمت منطقی.

مثال ساده از فرم:

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

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

  <label for="message">پیام:</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

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

توضیحات:

  • action: مسیر URL که داده‌ها به آن ارسال می‌شوند.
  • method: روش ارسال داده‌ها (مانند GET یا POST).
  • label: برای نمایش برچسب‌ها برای ورودی‌ها.
  • input: برای ورودی‌های مختلف (مانند متن، پسورد، ایمیل و غیره).
  • textarea: برای ایجاد فیلدهای ورودی چندخطی.
  • button: برای ارسال فرم.

انواع ورودی‌ها:

  1. ورودی متن (Text Input):

    <input type="text" id="username" name="username">

  2. ورودی پسورد (Password Input):

    <input type="password" id="password" name="password">

  3. ایمیل (Email Input):

    <input type="email" id="email" name="email">

  4. ورودی رادیویی (Radio Button):

    <input type="radio" id="male" name="gender" value="male">
    <label for="male">مرد</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">زن</label>

  5. چک‌باکس (Checkbox):

    <input type="checkbox" id="subscribe" name="subscribe">
    <label for="subscribe">عضویت در خبرنامه</label>

  6. لیست کشویی (Select List):

    <select name="country" id="country">
      <option value="iran">ایران</option>
      <option value="usa">آمریکا</option>
      <option value="uk">بریتانیا</option>
    </select>

  7. دکمه (Button):

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

گروه‌بندی ورودی‌ها:

برای گروه‌بندی ورودی‌ها می‌توانید از تگ‌های fieldset و legend استفاده کنید.

<fieldset>
  <legend>اطلاعات شخصی</legend>
  <label for="name">نام:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="age">سن:</label>
  <input type="number" id="age" name="age">
</fieldset>

این تگ‌ها به شما کمک می‌کنند که فرم‌هایی با ورودی‌های مختلف ایجاد کرده و داده‌ها را از کاربران جمع‌آوری کنید.