انواع ورودی فرم در HTML؛ input، textarea و select | درس 13

درس 13 از دوره 60 قسمتی آموزش HTML و CSS ارومیا دیزاین

در درس 12 درباره ساختار فرم در HTML با form، label و روش ارسال آشنا شدیم. حالا باید تصمیم بگیریم هر پرسش را با چه کنترلی از کاربر بپرسیم. برای یک نشانی ایمیل، یک خط کافی است؛ پیام چند جمله ای به فضای بیشتری نیاز دارد و انتخاب خدمت از فهرستی محدود، با یک منوی کشویی روشن تر می شود. در این درس انواع ورودی فرم در HTML را با input، textarea و select یاد می گیریم و در پایان یک فرم تمرینی می سازیم.

اگر به تازگی به دوره ملحق شده اید، فهرست کامل آموزش HTML و CSS را ببینید. برای یادآوری تفاوت تگ و ویژگی نیز درس 5 درباره تگ ها و ویژگی ها را مرور کنید.

انتخاب کنترل مناسب برای هر نوع داده

input خانواده ای از کنترل های تک خطی و انتخابی می سازد که رفتار آن با ویژگی type تغییر می کند. textarea برای متن چندخطی است و select گزینه هایی را از یک فهرست مشخص نشان می دهد. انتخاب درست کنترل، ورود اطلاعات را برای کاربر ساده تر می کند و به مرورگر درباره ماهیت داده سرنخ می دهد. با این حال ظاهر و شیوه نمایش برخی کنترل ها ممکن است بسته به مرورگر و دستگاه فرق کند.

ویژگی type در input چه کاری می کند؟

اگر type را ننویسید، نوع پیش فرض text است. با مقدار email مرورگر می تواند قالب کلی نشانی ایمیل را پیش از ارسال بررسی کند. tel برای شماره تلفن و نمایش صفحه کلید مناسب در برخی دستگاه های همراه کاربرد دارد، اما به تنهایی قالب شماره را اعتبارسنجی نمی کند. number برای مقدار عددی است؛ شماره تلفن، کد پستی و کد ملی را صرفا به دلیل داشتن رقم با آن نسازید، چون این داده ها ممکن است با صفر آغاز شوند یا نشانه های دیگری داشته باشند. date برای تاریخ است و شکل انتخابگر آن در دستگاه ها یکسان نیست.

نمونه زیر چهار کنترل مستقل را نشان می دهد. ارتباط for و id هر برچسب را به فیلد خودش وصل می کند و name کلید داده هنگام ارسال است. برای دیدن ساختار کامل صفحه ای که این کد داخل آن قرار می گیرد، درس 4 درباره head و body را ببینید.

<label for="full-name">نام:</label>
<input type="text" id="full-name" name="full_name">

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

<label for="phone">تلفن:</label>
<input type="tel" id="phone" name="phone">

<label for="quantity">تعداد:</label>
<input type="number" id="quantity" name="quantity" min="1">

min="1" در مثال تعداد، حداقل مقدار مجاز را برای بررسی سمت مرورگر مشخص می کند. می توانید بسته به نیاز از max و step هم استفاده کنید. بررسی های مرورگر جای بررسی داده در برنامه سمت سرور را نمی گیرند. در درس های بعد درباره اعتبارسنجی دقیق تر صحبت می کنیم.

ورودی های radio و checkbox؛ یک انتخاب یا چند انتخاب؟

وقتی کاربر باید از میان چند گزینه فقط یکی را انتخاب کند، از دکمه های رادیویی با type="radio" استفاده کنید. همه دکمه های یک گروه باید name یکسان داشته باشند، ولی id هر گزینه یکتا است. اگر کاربر بتواند چند گزینه را هم زمان برگزیند، type="checkbox" مناسب است. مقدار value تعیین می کند در صورت انتخاب شدن هر گزینه چه داده ای ارسال شود. گزینه انتخاب نشده معمولا در داده های ارسالی حضور ندارد.

<fieldset>
  <legend>نوع سایت مورد نظر</legend>
  <input type="radio" id="corporate" name="site_type" value="corporate">
  <label for="corporate">شرکتی</label>
  <input type="radio" id="store" name="site_type" value="store">
  <label for="store">فروشگاهی</label>
</fieldset>

<fieldset>
  <legend>خدمات تکمیلی</legend>
  <input type="checkbox" id="seo" name="extras" value="seo">
  <label for="seo">سئو</label>
  <input type="checkbox" id="support" name="extras" value="support">
  <label for="support">پشتیبانی</label>
</fieldset>

fieldset گزینه های مرتبط را در یک گروه قرار می دهد و legend نام آن گروه را نشان می دهد. این ساختار به ویژه وقتی چند انتخاب مشابه در یک فرم دارید، فهم آن را برای کاربران و ابزارهای کمکی آسان می کند. نام یکسان extras می تواند چند مقدار انتخاب شده را به عنوان چند جفت نام و مقدار بفرستد؛ روش خواندن این داده ها در سمت سرور به فناوری آن برنامه وابسته است.

textarea برای پیام های چندخطی

برای توضیح پروژه، پیام یا دیدگاه طولانی، textarea انتخاب بهتری از ورودی تک خطی است. ویژگی rows تعداد تقریبی سطرهای قابل مشاهده را تعیین می کند؛ محدودیت طول متن نیست. اگر به محدودیت تعداد نویسه نیاز داشتید، maxlength را جداگانه تعیین کنید. متن اولیه، اگر لازم باشد، بین تگ آغاز و پایان قرار می گیرد و textarea ویژگی value مانند input ندارد. برای یک راهنمای کوتاه می توانید placeholder بگذارید، اما برچسب قابل مشاهده را حذف نکنید.

<label for="project-description">توضیح پروژه:</label>
<textarea id="project-description" name="description"
          rows="5" maxlength="500"
          placeholder="نیاز اصلی پروژه را بنویسید"></textarea>

این کد فقط بخش دریافت متن را می سازد. اگر در فرم واقعی به دریافت سفارش نیاز داشته باشید، باید مقصد دریافت و پردازش داده نیز آماده باشد. برای نمونه ای از کاربرد فرم سفارش، چک لیست سفارش طراحی سایت ایده های خوبی درباره اطلاعات مورد نیاز یک پروژه می دهد.

ساخت منوی کشویی با select و option

وقتی پاسخ باید از فهرستی مشخص انتخاب شود، select و گزینه های option را به کار ببرید. مقدار value همان داده ای است که برای گزینه انتخاب شده ارسال می شود؛ متن داخل گزینه چیزی است که کاربر می بیند. اگر value را نگذارید، متن گزینه به عنوان مقدار به کار می رود. برای راهنمای انتخاب، می توان یک گزینه با مقدار خالی گذاشت و بعدا با required انتخاب یک گزینه واقعی را لازم کرد.

<label for="service">خدمت مورد نظر:</label>
<select id="service" name="service" required>
  <option value="">انتخاب کنید</option>
  <option value="web-design">طراحی سایت</option>
  <option value="seo">سئو</option>
  <option value="support">پشتیبانی</option>
</select>

در صفحه های فارسی، بهتر است نام گزینه ها برای کاربر روشن و کوتاه باشد. برای ساخت فهرست کشویی از ul و li به جای کنترل فرم استفاده نکنید؛ فهرست های درس 10 برای نمایش مجموعه ای از موارد هستند، نه دریافت انتخاب فرم.

پروژه کوچک: فرم انتخاب موضوع تمرین

این صفحه را با نام form-controls.html ذخیره و در مرورگر باز کنید. برای آزمایش فقط داده ساختگی و غیرشخصی وارد کنید. روش get باعث می شود مقادیر در نشانی دیده شوند؛ این تمرین پیام را ذخیره نمی کند. اگر با ذخیره فایل و پوشه پروژه آشنا نیستید، درس 3 درباره اولین پروژه وب را مرور کنید.

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>تمرین انواع ورودی فرم</title>
</head>
<body>
  <h1>انتخاب موضوع تمرین</h1>
  <form action="" method="get">
    <label for="topic">موضوع:</label>
    <input type="text" id="topic" name="topic" required>

    <label for="level">سطح:</label>
    <select id="level" name="level" required>
      <option value="">انتخاب کنید</option>
      <option value="basic">مقدماتی</option>
      <option value="advanced">پیشرفته</option>
    </select>

    <label for="note">یادداشت کوتاه:</label>
    <textarea id="note" name="note" rows="3"></textarea>

    <button type="submit">نمایش داده در نشانی</button>
  </form>
</body>
</html>

مثلا اگر موضوع را HTML و سطح را «مقدماتی» بگذارید، در نشانی کلیدهای topic و level را خواهید دید. متن فارسی یادداشت در URL به صورت کدگذاری شده دیده می شود. از این فرم تمرینی برای ارسال رمز، ایمیل واقعی یا اطلاعات خصوصی استفاده نکنید. برای کاربرد حرفه ای در طراحی سایت در ارومیه، فرم به پردازشگر و رعایت امنیت و حریم خصوصی نیاز دارد.

اشتباه های رایج در انواع ورودی فرم

• استفاده از number برای تلفن: شماره تلفن مقدار حسابی نیست؛ tel مناسب تر است.
• نام متفاوت برای radioهای یک گروه: با این اشتباه انتخاب ها مستقل می شوند.
• فراموش کردن value: به ویژه در checkbox و radio، مقدار ارسالی با انتظار شما تفاوت می کند.
• قرار دادن value روی textarea: متن اولیه باید میان دو تگ قرار بگیرد.
• حذف name از select: انتخاب کاربر با کلید مورد انتظار ارسال نمی شود.
• اتکا به کنترل های مرورگر برای امنیت: داده در مقصد نیز باید بررسی شود.

تمرین درس 13

به پروژه بالا یک گروه رادیویی با دو گزینه «تمرین فردی» و «تمرین گروهی» اضافه کنید. هر دو گزینه را با نام mode بفرستید. سپس یک گزینه checkbox برای «نیاز به نمونه کد» با نام sample و مقدار yes بسازید. بعد از ارسال، تفاوت داده های URL را در حالت انتخاب شده و انتخاب نشده بررسی کنید.

<fieldset>
  <legend>شیوه تمرین</legend>
  <input type="radio" id="solo" name="mode" value="solo">
  <label for="solo">فردی</label>
  <input type="radio" id="team" name="mode" value="team">
  <label for="team">گروهی</label>
</fieldset>
<input type="checkbox" id="sample" name="sample" value="yes">
<label for="sample">نیاز به نمونه کد</label>

درس قبلی: فرم ها در HTML | درس 12

درس بعد: اعتبارسنجی فرم در HTML با required، minlength و pattern | درس 14