فرم‌ها در HTML

تا این لحظه صفحه‌هایی ساخته‌اید که فقط به کاربر چیزی نشان می‌دهند. اما وب تعاملی است: جست‌وجو می‌کنید، ثبت‌نام می‌کنید، دیدگاه می‌نویسید. همهٔ این‌ها با فرم (Form) انجام می‌شود؛ بخشی از صفحه که از کاربر داده می‌گیرد و آن را به سرور می‌فرستد. در این درس اجزای فرم و قواعد ضروری ساخت آن را می‌آموزید.

چارچوب فرم: form

همهٔ ورودی‌ها داخل عنصر form می‌آیند. دو ویژگی مهم آن مسیر و روش ارسال را تعیین می‌کنند: action نشانی مقصد داده‌ها روی سرور و method روش ارسال، که یا get است یا post:

<form action="/search" method="get">
  <!-- Inputs go here -->
</form>

قاعدهٔ سرانگشتی: get برای جست‌وجوها و داده‌های بی‌خطری که در نشانی صفحه دیده می‌شوند، و post برای داده‌های حساس یا تغییردهنده مثل ثبت‌نام و پرداخت که در بدنهٔ درخواست ارسال می‌شوند.

برچسب: label و اتصال به ورودی

هر ورودی به یک برچسب (Label) نیاز دارد که بگوید چه چیزی باید وارد شود. عنصر label با ویژگی for به شناسهٔ ورودی وصل می‌شود؛ مقدار for باید دقیقاً برابر id ورودی باشد. نتیجهٔ این اتصال دو چیز است: با کلیک روی برچسب هم ورودی فعال می‌شود و صفحه‌خوان هم می‌فهمد این برچسب برای کدام ورودی است:

<label for="email">Email</label>
<input type="email" id="email" name="email">

انواع ورودی: input

عنصر input عنصر خالی است و با ویژگی type شکل و رفتارش عوض می‌شود. پرکاربردترین نوع‌ها:

برای گروه radio باید به همهٔ دکمه‌های یک گروه، مقدار name یکسان بدهید تا مرورگر بفهمد انتخاب‌های رقیب هم‌اند. دو ویژگی دیگر در هر ورودی حیاتی‌اند: name نامی که داده با آن به سرور فرستاده می‌شود؛ بدون name مقدار ورودی اصلاً ارسال نمی‌شود. و required که ورودی را اجباری می‌کند و مرورگر پیش از ارسال، خالی بودن آن را خطا می‌گیرد:

<form action="/signup" method="post">
  <label for="username">Username</label>
  <input type="text" id="username" name="username" required>
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Sign Up</button>
</form>

اگر کاربر در فیلد email چیزی غیر از نشانی رایانامه بنویسد و روی دکمه بزند، مرورگر پیش از ارسال، پیام خطا نشان می‌دهد؛ این اعتبارسنجی (Validation) پیش‌فرض، بدون یک خط جاوااسکریپت کار می‌کند.

منو و متن چندخطی

برای انتخاب از میان چند گزینه از پیش تعریف‌شده، عنصر select با فرزندان option را به کار ببرید؛ هر option می‌تواند ویژگی value داشته باشد. برای متن بلند چندخطی مثل دیدگاه، عنصر textarea مناسب است:

<label for="city">City</label>
<select id="city" name="city">
  <option value="tehran">Tehran</option>
  <option value="shiraz">Shiraz</option>
  <option value="tabriz">Tabriz</option>
</select>

<label for="comment">Your comment</label>
<textarea id="comment" name="comment" rows="4"></textarea>

دکمه‌ها و گروه‌بندی

دکمهٔ ارسال با عنصر button ساخته می‌شود. داخل فرم، نوع پیش‌فرض دکمه submit است؛ اما اگر دکمه‌ای می‌خواهید که فرم را نفرستد و فقط برای جاوااسکریپت باشد، حتماً type="button" بنویسید. برای دسته‌بندی مجموعه‌ای از ورودی‌های مرتبط، به‌ویژه گروه‌های رادیویی، از fieldset استفاده کنید و legend عنوان گروه را می‌گیرد:

<fieldset>
  <legend>Programming Experience Level</legend>
  <label><input type="radio" name="level" value="beginner" checked> Beginner</label>
  <label><input type="radio" name="level" value="mid"> Intermediate</label>
  <label><input type="radio" name="level" value="pro"> Professional</label>
</fieldset>

نکتهٔ این کد را ببینید: وقتی label تمام ورودی را در بر می‌گیرد، دیگر به for و id نیاز ندارند؛ این الگوی کوتاه‌تر برای دکمه‌های رادیویی و جعبه‌های علامت‌زنی رایج است.

تمرین‌ها

<!-- Write your code here -->

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="track">Learning Track</label>
  <select id="track" name="track">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="python">Python</option>
  </select>

  <fieldset>
    <legend>Delivery Style</legend>
    <label><input type="radio" name="delivery" value="daily" checked> Daily</label>
    <label><input type="radio" name="delivery" value="weekly"> Weekly</label>
  </fieldset>

  <button type="submit">Subscribe</button>
</form>

:::

خلاصه

• فرم با form ساخته می‌شود؛ action مقصد داده و method روش ارسال است.
• هر ورودی با label و اتصال for به id برچسب می‌خورد؛ placeholder جای برچسب را نمی‌گیرد.
• ویژگی type روی input نوع و اعتبارسنجی ورودی را تعیین می‌کند.
• بدون name مقدار ورودی به سرور نمی‌رسد و required ورودی را اجباری می‌کند.
• select برای منو، textarea برای متن بلند و fieldset با legend برای گروه‌بندی به کار می‌روند.

فرم‌ها داده را از کاربر می‌گیرند؛ در درس پایانی این دوره یاد می‌گیرید کل صفحه را با عنصرهای معنایی بچینید و برای موتورهای جست‌وجو آماده کنید.