فرم ها

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

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

برای برطرف کردن این نیازها 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>

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

 

نمونه فرم login
نمونه فرم login

 

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

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

کنترل های متنی فرم در انواع مختلف با هدف های متفاوت در 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 عناصر کنترل ورودی دیگری نیز وجود دارند اما ما در این مطلب مهمترین های آنها را بررسی کردیم.

35 دیدگاه برای “فرم ها

  1. سلام وقتی بخوایم رنگ انتخاب شده ی option رو عوش کنیم چی کار باید بکنیم؟

    test1
    havij
    banana
    apple
    circle
    joje
    mahi
    shampo

    الان وقتی apple رو انتخاب میکنیم رنگ متن سفید و رنگ پس زمینه نارنجی میشه (تو ubuntu) برای تغییر این رنگ ها چطوریه؟

  2. سلام
    من یک فرم ساده طراحی کرم اما توی تراز بندیش مشکل دارم .
    بعنوان مثال
    نام : [ ]
    نام خانوادگی : [ ]
    نظرات : [ ]
    میخوام به فرمم نظم بدم ، همه اینها تراز شده باشد .
    ممنون میشم راهنمایی بفرمایید . یا اگر نمونه ای وجود داره …

      1. میخند؟؟
        بخون بفهم تفاوتش رو:

        Both ways are in full use. I’d venture to say you’d find many use both and use them interchangeably. I know I do. Perhaps people might sometimes steer towards website when concerned about the ambiguity that site can create in a given context. For example, I might say, “I visited Amazon’s site,” but say, “I visited Barnes & Noble’s website,” because Amazon is only known as being Internet-based, whereas Barnes & Noble is also known for having brick-and-mortar stores, so saying I visited their site could mislead the hearer to think I had visited a physical location rather than an electronic one. Aside from that scenario, I don’t see any rhyme or reason to how people choose to use site or website. Maybe we’ll see website slide away over time as the abbreviated site takes firmer hold. Maybe not.

  3. خیلی مفید بود.
    یک سوال
    وقتی گزینه های اینپوت تایپ چک باکس رو انگلیسی میذارم نظمش به هم میخوره. ینی مربع انتخاب در عقب گزینه قرار میگیره. راه حلش چیه؟ دیرکشن و تکست الاین رو امتحان کردم ولی حل نشد
    مهارت های خود را انتخاب کنید
    HTML
    CSS
    JS
    PHP

  4. سلام ؛ با تشکر و عرض خسته نباشید .
    آیا بهتر نبود در نمونه فرم ثبت نامی که قرار دادید بجای p که صرفا بخاطر بلاک کردن و زیر هم قرار گرفتن عناصر فرم استفاده شده ؛ از تگ div استفاده می شد که به مفهوم خاصی اشاره نداره ؟

    1. سلام، ممنون از سوال خوبتون

      اگر فقط بحث ظاهر باشه حرف شما کاملا درست خواهد بود، اما نکته ای که باید توی فرم ها بهش توجه کرد اینه که فرم رو باید مثل یک متنی که کاربر پشت سر هم میخونه ساخت، و توی یک متن ما تکه های اون رو با استفاده از پاراگراف از هم جدا میکنیم، اینجا هم به همون دلیل تکه های فرم میرن داخل یک عنصر پاراگراف. (اتفاقا این کار توصیه خود W3C هستش).

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

  6. سلام
    من میخوام یک دکمه داشته باشم که عملیات شروع کاری رو برام انجام بده در واقع با کمک onclick ارجاع داده میشه به یک صفحه php
    اما مسئله اینجاست که میخوام وقتی کلید استارت زده شد و صفحه مورد نظر اجرا شد در صفحه اصلی کلید استارت به کلید توقف تبدیل بشه و با کمک اون بتونم عملیاتی رو که درحال انجام هست رو متوقف کنم.
    شدنیه؟؟؟؟؟؟؟؟

  7. سلام وقت بخیر
    من یه باکس ورود عدد دارم که افراد قیمت وارد می کنند
    چطوری میتونم وقتی عدد را دارند می زنند سه رقم سه رقم جدا کنه

    1. سلام، وقت شما هم بخیر

      شاید سایه باشه، شاید حاشیه باشه، در کل با inspect مرورگرتون میتونید بفهمید چیه و بعد توی سی اس اس حذفش کنید. کد رو هم اگر بتونید به من نشون بدید میتونم کمک کنم.

  8. سلام روزتون بخیر
    من با استفاده از input تایپ radio و label دو تا گزینه ساختم که میخوام روی هرکدوم کلیک شد یه منو باز بشه بار اول همه چی درسته ولی وقتی دوباره روشون کلیک میکنم دیگه فرمها باز نمیشه چکار باید بکنم؟؟
    ممنون میشم راهنماییم کنید

  9. سلام وقت بخیر .. خیلی ممنون بابت سایت خوبتون

    ببخشید میشه تفاوت و را توضیح بدید؟

    خیلی ممنون

    1. ویژگی for برای مرتبط کردن یک label به یک عنصر کنترلی مثل input استفاده میشه. مثلا یک کاربردش ایه که باعث میشه وقتی روی label کلیک کنید خودکار input فعال بشه.

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *