خوش آمدید

وب می داند که گاهی کاربر نیاز دارد تا ورودی ها و اطلاعات خود را برای وب سایت فراهم آورد. به عنوان نمونه:

• ثبت نام و ورود به وب سایت
• وارد کردن اطلاعات شخصی مثل نام، نام کاربری، رمزعبور و ایمیل
• جستجو در محتوا
• بارگذاری یک فایل
• و …

ادامه مطلب

 

برای برطرف کردن این نیازها HTML موارد زیر را فراهم کرده است:

• text input
• radio button
• checkboxe
• dropdown
• upload widget
• submit button

تگ های مختلفی برای این کنترل ها وجود دارد اما بیشتر آنها از تگ <input> استفاده می کنند و از آنجایی که تگ <input> از آن دسته از تگ هایی است که فقط تگ آغازین دارند برای معرفی کنترل های مختلف از attribute یا همان ویژگی type استفاده می شود:

<!--  text input -->
<input type="text">
<!--  checkbox -->
<input type="checkbox">
<!--  radio button -->
<input type="radio">

خروجی:

عنصر Form

عنصر <Form> یک عنصر بلاک است که یک قسمت تعاملی را برای کاربر در صفحه فراهم می کند در نتیجه عناصر کنترل فرمی که در بالا مثال زده شد در این عنصر قرار می گیرند. (البته گاهی می توان بدون عنصر Form از این عناصر نیز استفاده کرد)

برای عنصر <Form> دو ویژگی همیشه لازم است:

• action این ویژگی آدرسی که فرم به آن ارسال می شود را مشخص می کند.
• method از این ویژگی برای مشحص کردن روش ارسال اطلاعات فرم استفاده می شود.

معمولا اطلاعات یک فرم به سرور ارسال می شوند. بررسی نحوه این کار و اتفاق هایی که در سرور می افتد در این آموزش نمی گنجد.

فرم را بصورت یک مجموعه ای از کنترل ها ببینید که قرار است یک عمل خاص را انجام دهد. مثلا اگر می خواهیم در یک سایت Login کنیم، فرم مربوط به آن می تواند دارای سه کنترل زیر باشد:

• ورودی ایمیل: <input type="email">
• ورودی رمزعبور: <input type="password">
• دکمه تایید و ارسال: <input type="submit">

این سه عنصر می توانند بصورت زیر درون یک عنصر فرم قرار بگیرند:

<form action="/login" method="POST">
  <input type="email">
  <input type="password">
  <input type="submit">
</form>

نمونه یک فرم ورود به سایت:

 

 

 

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

تقریبا تمام فرم ها ورودی متنی از کاربر می خواهند تا بتوانند اطلاعاتی مثل نام، ایمیل، رمزعبور و آدرس و اطلاعات دیگری را از آنها دریافت کنند.

کنترل های متنی فرم در انواع مختلف با هدف های متفاوت در HTML وجود دارند:

 

متن	<input type="text">		انواع کاراکترها را می پذیرد
ایمیل	<input type="email">		اگر یک ایمیل نامعتبر وارد کنیم اخطاری نمایش می دهد
رمزعبور	<input type="password">		نقطه بجای کاراکتر نشان می دهد
عدد	<input type="number">		می توان از دکمه های جهت بالا و پایین استفاده کرد
شماره تلفت	<input type="tel">		می تواند یک کامل کننده خودکار داشته باشد
متن چند خطی	<textarea></textarea>		اندازه اش قابل تغییر است

 

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

Placeholder

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

<input type="text" placeholder="نام خود را وارد کنید">

خروجی:

ویژگی جالبی که یک placeholder دارد این است که به محض اینکه کاربر شروع به تایپ کردن می کند حذف می شود.

Label

به این دلیل که عناصر ورودی به خودی خود روشن و واضح نیستند بهتر است از عنصر <label> برای توصیف آنها استفاده کرد.

<label>ایمیل</label>
<input type="email">

خروجی:

ایمیل:

درست است که ویژگی placeholder هم نوعی راهنمایی برای کاربر است اما <label>ها این امتیاز را دارند که همیشه وجود دارند حتی زمانی که کاربر در حال تایپ کردن باشد. همینطور برخلاف placeholder از عنصر <label> می توان برای تمام انواع عناصر ورودی استفاده کرد.

شاید به نظر برسد که توضیح مربوط به عنصر را می تواند توسط عناصر دیگر مثل پاراگراف نیز فراهم کرد اما باید بدانیم که عنصر <label> از نظر معنایی مخصوص به همین کار می باشد. همینطور می توان این عنصر را با استفاده از ویژگی for با یک عنصر ورودی جفت کرد.

برای این کار کافی است که مقدار ویژگی for را برابر با id عنصر ورودی قرار دهیم:

<label for="first_name">نام</label>
<input id="first_name" type="text">

این کار باعث می شود زمانی که بر روی label کلیک می شود عنصر ورودی فعال شود. استفاده از این قابلیت مخصوصا در ورودی های checkbox بسیار کاربردی می باشد.

خروجی:

نام:

به دلایل دستیابی پذیری عناصر صفحه هیچگاه از placeholder بجای label استفاده نکنید. هر کدام کاربرد خود را دارند.

Checkbox

عنصر <checkbox> یک عنصر دو حالته تیک خورده یا نخورده می باشد. با استفاده از آن کاربر می تواند بگوید بله یا خیر.

<input type="checkbox"> یادآوری کن

خروجی:

یادآوری کن

چون سخت است برای کاربر تا روی یک دکمه کوچک کلیک کند بهتر است که این عنصر را درون یک <label> قرار دهیم. به این صورت کاربر هرجای نوشته نیز کلیک کند این عنصر انتخاب خواهد شد.

<label>
  <input type="checkbox"> با قوانین موافقم
</label>

خروجی:

با قوانین موافقم

همینطور می توان از روشی که در بالا با استفاده از ویژگی for و id گفته شده استفاده کرد.

بصورت پیشفرض یک checkbox در حالت تیک نخورده می باشد اما می توان با استفاده از ویژگی checked حالت اولیه این عنصر را بصورت تیک خورده قرار داد:

<label>
  <input type="checkbox" checked> در خبرنامه ثبت نام شوم
</label>

خروجی:

در خبرنامه ثبت نام شوم

دکمه Radio

با استفاده از دکمه های Radio می توان لیستی از گزینه ها را برای انتخاب به کاربر ارایه داد.

برای این کار باید گروهی از این دکمه ها را بوجود آورد و همه آنها را با یک نام یکسان عضو این گروه کرد. به عنوان نمونه در مثال زیر ویژگی name همه دکمه های زیر را برابر با status یعنی وضعیت قرار می دهیم:

<label>وضعیت ازدواج</label>
<label>
  <input type="radio" name="status">
  مجرد
</label>
<label>
  <input type="radio" name="status">
  متاهل
</label>
<label>
  <input type="radio" name="status">
  همسرم فوت شده
</label>

خروجی:

وضعیت ازدواج

مجرد


متاهل


همسرم فوت شده

چون ویژگی name دکمه ها یکسان است با انتخاب یکی از آنها دیگر دکمه ها غیرفعال می شوند.

تفاوت Radio با Checkbox

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

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

منو Dropdown

زمانی که آیتم ها و گزینه ها برای انتخاب زیاد شوند باید از منوهای کرکره ای (<select>) که نوع دیگری از کنترل های ورودی می باشند استفاده شود.

این عناصر شبیه به دکمه های نوع رادیو کار می کنند فقط ظاهر آنها متفاوت است.

<select>
  <option>فروردین</option>
  <option>اردیبهشت</option>
  <option>خرداد</option>
  <option>تیر</option>
  <option>مرداد</option>
  <option>شهریور</option>
  <option selected>مرداد</option>
  <option>آبان</option>
  <option>آذر</option>
  <option>دی</option>
  <option>بهمن</option>
  <option>اسفند</option>
</select>

خروجی:

 

می توان به کمک ویژگی selected مقدار پیشفرضی برای این لیست مشخص کرد.

همینطور می توان با استفاده از ویژگی multiple امکان اینکه کاربر بتواند چند مورد را انتخاب کند فراهم کرد:

<label>مرورگرهایی که استفاده می کنید کدام اند؟</label>
<select multiple>
  <option>Google Chrome</option>
  <option>Internet Explorer</option>
  <option>Mozilla Firefox</option>
  <option>Opera</option>
  <option>Safari</option>
</select>

خروجی:

مرورگرهایی که استفاده می کنید کدام اند؟

حال کاربر می تواند با استفاده از دکمه های Ctrl یا Shift چند گزینه را انتخاب کند.

نمونه فرم ثبت نام

<form action="/signup" method="POST">
  <p>
    <label>جنسیت</label>
    <label>
      <input type="radio" name="title" value="خانم">
      خانم
    </label>
    <label>
      <input type="radio" name="title" value="آقا">
      آقا
    </label>
  </p>
  <p>
    <label>نام</label>
    <input type="text" placeholder="مجتبی" value="">
  </p>
  <p>
    <label>نام خانوادگی</label>
    <input type="text" placeholder="سیدی" value="">
  </p>
  <p>
    <label>ایمیل</label>
    <input type="email" placeholder="seyedmojtabaseyedi@gmail.com" value="">
  </p>
  <p>
    <label>شماره تماس</label>
    <input type="tel" placeholder="+989999999999" value="">
  </p>
  <p>
    <label>رمز عبور</label>
    <input type="password" placeholder="حداقل 8 کاراکتر" value="">
  </p>
  <p>
    <label>تایید رمز عبور</label>
    <input type="password" placeholder="کپی نکن که اشتباه نشه" value="">
  </p>
  <p>
    <label>کشور</label>
    <select>
      <option>ایران</option>
      <option>France</option>
      <option>Germany</option>
      <option>Italy</option>
      <option>Japan</option>
      <option>Russia</option>
      <option>United Kingdom</option>
      <option>United States</option>
    </select>
  </p>
  <p>
    <label>
      <input type="checkbox">
      با <a href="/terms">قوانین سایت</a> موافقم
    </label>
  </p>
  <p>
    <input type="submit" value="ثبت نام">
  </p>
</form>

خروجی:

جنسیت

خانم


آقا

نام

نام خانوادگی

ایمیل

شماره تماس

رمز عبور

تایید رمز عبور

کشور

با قوانین سایت موافقم

 

در HTML عناصر کنترل ورودی دیگری نیز وجود دارند اما ما در این مطلب مهمترین های آنها را بررسی کردیم.