رفتن به محتوا
HarmoniQHarmoniQزبان طراحی هارمونیک

فیلد متنی

وضعیت: در حال بازبینی

برای هماهنگی جلسهٔ اول با شما تماس می‌گیریم.

نشانی ایمیل کامل نیست؛ مثلاً name@company.ir

<div class="hq-field">
  <label class="hq-field__label" for="company">نام شرکت</label>
  <input class="hq-input" id="company" type="text" autocomplete="organization" />
</div>
<div class="hq-field">
  <label class="hq-field__label" for="phone">تلفن همراه</label>
  <input class="hq-input" id="phone" type="tel" dir="ltr" inputmode="tel" autocomplete="tel" aria-describedby="phone-help" />
  <p class="hq-field__helper" id="phone-help">برای هماهنگی جلسهٔ اول با شما تماس می‌گیریم.</p>
</div>
<div class="hq-field">
  <label class="hq-field__label" for="email">ایمیل کاری</label>
  <input class="hq-input" id="email" type="email" dir="ltr" value="ali@" aria-invalid="true" aria-describedby="email-error" />
  <p class="hq-field__error" id="email-error"><svg class="hq-icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path fill="none" d="M14.9 7.2H17.1V24.799H14.9z" data-icon-path="inner-path" transform="rotate(-45 16 16)"/><path d="M16,2A13.914,13.914,0,0,0,2,16,13.914,13.914,0,0,0,16,30,13.914,13.914,0,0,0,30,16,13.914,13.914,0,0,0,16,2Zm5.4449,21L9,10.5557,10.5557,9,23,21.4448Z"/></svg>نشانی ایمیل کامل نیست؛ مثلاً name@company.ir</p>
</div>

گونه‌ها

Section titled “گونه‌ها”
گونه عنصر کاربرد
فیلد متنی <input> متن کوتاه: نام، ایمیل، تلفن
متن بلند <textarea> توضیح، پیام، شرح مساله
فهرست انتخابی <select> انتخاب یکی از چند گزینهٔ از پیش معلوم؛ برای کمتر از پنج گزینه از رادیو استفاده کنید 
<div class="hq-field">
  <label class="hq-field__label" for="challenge">مسالهٔ اصلی کسب‌وکار شما <span class="hq-field__optional">(اختیاری)</span></label>
  <textarea class="hq-input" id="challenge"></textarea>
</div>
<div class="hq-field">
  <label class="hq-field__label" for="industry">صنعت</label>
  <div class="hq-select">
    <select class="hq-input" id="industry">
      <option value="">انتخاب کنید</option>
      <option>مالی و بیمه</option>
      <option>پوشاک و مد</option>
      <option>غذا و نوشیدنی</option>
      <option>خرده‌فروشی</option>
    </select>
    <svg class="hq-icon hq-select__chevron" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M16 22 6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"/></svg>
  </div>
</div>

برچسب و راهنما

Section titled “برچسب و راهنما”
  • هر فیلد برچسب دیدنی دارد. متن نمونه (placeholder) جای برچسب را نمی‌گیرد، چون با تایپ کردن ناپدید می‌شود.
  • فیلدهای اختیاری را با «(اختیاری)» مشخص کنید، نه فیلدهای اجباری را با ستاره؛ بیشتر فیلدهای یک فرم خوب اجباری‌اند.
  • متن راهنما زیر فیلد، کوتاه و فقط وقتی لازم است.

پیام خطا

Section titled “پیام خطا”
  • زیر همان فیلد، با آیکن و رنگ negative.
  • بگویید چه چیزی درست نیست و چطور درستش کنند: «نشانی ایمیل کامل نیست؛ مثلاً name@company.ir»، نه «ورودی نامعتبر».
  • خطا را بعد از ترک فیلد یا هنگام ارسال نشان دهید، نه هنگام تایپ.

جهت متن

Section titled “جهت متن”

ایمیل، نشانی وب، تلفن و کدهای لاتین را با dir="ltr" بگیرید تا شماره‌ها و نشانه‌ها درست چیده شوند. برچسب و پیام‌ها همچنان راست‌به‌چپ می‌مانند.

انجام بدهبرچسب دیدنی بالای فیلد.
انجام ندهمتن نمونه به جای برچسب؛ با شروع تایپ، کاربر نمی‌داند این فیلد چه بود.