انواع کنترل‌های فرم

مقدمه

در درس قبل، عنصر form و صفت‌هایش را معرفی و بررسی کردیم اما همانطور که گفتیم، این عناصرِ فرزند form هستند که کار ایجاد کنترل‌ها یا فیلدهای فرم را انجام می‌دهند و عنصر form صرفاً یک ظرف برای تعریف کنترل‌های فرم محسوب می‌شود. کنترل‌های فرم را می‌توان در دو گروه جای داد: یکی کنترل‌هایی که با استفاده از عنصر input ایجاد می‌شوند و گروه دیگر، کنترل‌هایی که با استفاده از سایر عناصر فرزند form ایجاد می‌شوند. در این درس، در مورد کنترل‌های گروه اول یعنی آنهایی که توسط عنصر input و با تخصیص مقادیر مختلف به صفت type این عنصر ایجاد می‌شوند، صحبت می‌کنیم و برای جلوگیری از طولانی شدن بیش از حد درس، بررسی سایر کنترل‌ها را به درس بعد موکول می‌کنیم. قبل از شروع این درس، مایلم نکته‌ای را که در درس قبل هم اشاره‌ی کوتاهی به آن شد، یادآوری کنم: اگرچه ما از اصطلاح عناصر فرزند form استفاده می‌کنیم اما برخی از این عناصر می‌توانند بیرون از یک عنصر form تعریف شوند و به شکلی، وابستگی خود به یک عنصر form را اعلام کنند. در این درس، این موضوع را در عمل خواهیم دید.

کنترل‌های قابل ایجاد با استفاده از عنصر input

با استفاده از عنصر input می‌توانیم انواع مختلفی از فیلدها یا کنترل‌های تعاملی (interactive controls) را ایجاد کنیم که قابلیت دریافت داده‌های کاربران را دارند. اینکه کنترل ایجاد شده با استفاده از input از چه نوعی باشد، موضوعی است که از روی مقداری که به صفت type این عنصر می‌دهیم، تعیین می‌شود. به عنوان مثال، مقدار file برای این صفت، باعث ایجاد یک کنترل برای آپلود فایل می‌شود و یا مقدار button برای این صفت، موجب ایجاد یک کنترل از نوع دکمه می‌شود.

لازم به ذکر است که شکل ظاهری کنترل‌ها علاوه بر وضعیت پشتیبانی مرورگرها به دستگاه مورد استفاده‌ی کاربر نیز بستگی دارد. جدول زیر لیستی از انواع کنترل‌های قابل ایجاد با استفاده از عنصر input ارائه می‌دهد.

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

در جدول زیر، نام صفت‌های قابل تنظیم برای عنصر input و نوع عناصر input یا نوع کنترل‌هایی که از هر صفت پشتیبانی می‌کنند، ارائه شده و توضیح مختصری نیز راجع به هر صفت داده شده است.

پس، نوع کنترل ایجاد شده با input به مقداری که به صفت type این عنصر می‌دهیم، بستگی دارد و با تعیین نوع کنترل، صفت‌های قابل تنظیم برای کنترل مشخص می‌شوند. کاری که در ادامه انجام می‌دهیم، ترکیب و تکمیل اطلاعات دو جدول بالاست به نحوی که اطلاعات مربوط به هر نوع و صفت‌های قابل تنظیم برای آن به صورت مستقل در دسترس باشد.

ایجاد فیلد ورود متن تک خطی

برای ایجاد یک فیلد متنی تک‌خطی (single-line textbox) از یک عنصر <input type=”text”> استفاده می‌شود. البته text مقداری است که به طور پیش‌فرض نیز برای صفت type در نظر گرفته می‌شود و بنابراین، اگر از صفت type استفاده نکنیم، یک کنترل از نوع text ایجاد می‌شود. در یک کنترل متنی تک‌خطی مانند text امکان ایجاد شکست خط (line break) وجود ندارد و لذا در چنین فیلدی فشردن کلید enter با هیچ نتیجه‌ای همراه نیست.

دقت داشته باشید که از این کنترل زمانی استفاده می‌شود که بخواهیم کاربر یک متن تک‌خطی را وارد کند و نوع اطلاعاتی که کاربر قرار است در این فیلد وارد کند، به گونه‌ای است که هیچ کنترل مناسب‌تری برای دریافت این اطلاعات موجود نباشد. برای نمونه، اگر فیلد مورد نظر برای دریافت یک ایمیل یا یک تاریخ در نظر گرفته شده باشد، بهتر است از کنترل‌هایی مانند email و date استفاده کنیم.

یک کنترل از نوع text مانند هر نوع کنترل دیگر، به یک جفت نام و مقدار نیاز دارد که در هنگام ارسال فرم، باید تکلیفشان روشن باشد. نام یک کنترل که به عنوان روش ارجاع به کنترل در سند مقصد فرم مورد استفاده خواهد بود، توسط صفت name تعیین می‌شود و متنی که هنگام ارسال فرم درون فیلد وجود داشته باشد، به عنوان مقدار این فیلد ارسال می‌شود. البته با استفاده از صفتی به نام value نیز می‌توانیم یک مقدار پیش‌فرض یا اولیه را فراهم کنیم که البته پس از بارگذاری فرم، کاربر می‌تواند آن را تغییر دهد و مقدار نهایی فیلد قبل از ارسال، به عنوان مقدار فیلد در نظر گرفته می‌شود.

به طور کلی، صفت‌هایی که می‌توانند برای یک کنترل از نوع text به کار گرفته شوند، عبارتند از:

• name: از این صفت برای تعیین نام کنترل استفاده می‌شود. در سند مقصد فرم، از این نام برای ارجاع به کنترل استفاده می‌شود. صفت name را یک صفت اجباری فرض کنید، زیرا در صورت عدم استفاده از این صفت، راهی برای ارجاع دادن به این کنترل در سند مقصد وجود ندارد و این امر هم‌ارز با عدم ارسال این فیلد است.
• value: با استفاده از این صفت، می‌توانیم یک مقدار اولیه برای کنترل تعیین کنیم. کاربر می‌تواند این مقدار را با مقدار مورد نظر خودش تعویض کند. به عنوان مثال، اگر یک فیلد متنی از نوع text به صورت <input name=”user” value=”leo”> ایجاد شود و کاربری قبل از ارسال فرم، مقداری مثل chris را جایگزین مقدار اولیه‌ی leo کند، جفت نام و مقدار ارسالی برای این فیلد متنی به صورت name=chris ارسال خواهد شد.
• maxlength: این صفت، تعیین‌کننده‌ی تعداد حداکثر کاراکترهایی است که کاربر می‌تواند در فیلد وارد کند. اگر کاربری بخواهد کاراکترهای بیشتری در فیلد وارد کند، از ارسال فرم جلوگیری می‌شود. البته اکثر مرورگرها اصلاً امکان تایپ کاراکترهای بیشتر از تعداد maxlength را نمی‌دهند. مقدار قابل تخصیص به این صفت، یک عدد صحیح مثبت است.
• minlength: این صفت، تعیین‌کننده‌ی تعداد حداقل کاراکترهایی است که کاربر باید در فیلد وارد کند. برای نمونه، یک فیلد متنی به صورت <input type=”text” minlength=4” maxlength=”8”> باعث می‌شود که کاربر ملزم به وارد کردن 4 تا 8 کاراکتر در فیلد متنی بشود. در غیر این صورت، یعنی چنانچه کاربری کمتر از 4 کاراکتر و یا بیشتر از 8 کاراکتر در فیلد وارد کند، امکان ارسال فرم وجود نخواهد داشت.
• required: یک صفت بولین است که وجود آن به معنای اجباری بودن فیلد است و تا زمانی که این فیلد خالی باشد، امکان ارسال فرم وجود نخواهد داشت. در فرم‌های وب، معمولاً یک کاراکتر ستاره یا چیزی شبیه آن در کنار این فیلدها قرار می‌دهند تا کاربر پی به اجباری بودن آنها ببرد.
• pattern: با استفاده از صفت pattern می‌توانیم الگویی را برای یک فیلد متنی تعیین کنیم که عبارت ورودی آن فیلد، ملزم به تطابق با آن الگو باشد. مقدار این صفت یک عبارت باقاعده (regular expression) است که گرامر آن توسط زبان جاوااسکریپت و شیء RegExp ارائه می‌شود. برای کار با این صفت، باید با عبارات باقاعده و گرامر آنها در جاوااسکریپت آشنا باشید اما به عنوان یک مثال ساده، اگر بخواهیم کاربر را به وارد کردن 4 تا 8 کاراکتر متشکل از حروف کوچک (lowercase) ملزم کنیم، می‌توانیم از یک عنصر input به صورت <input pattern=”[a-z]{4-8}”> استفاده کنیم.
• placeholder: مقدار این صفت، متنی است که به عنوان یک راهنمایی برای کاربر در مورد محتوایی که باید در فیلد وارد کند، درون فیلد نمایش داده می‌شود. این فیلد تا زمانی که فوکوس به فیلد مورد نظر نرسد، معمولاً با رنگی روشن‌تر از معمول درون فیلد نمایش داده می‌شود.
• list: این صفت، گزینه‌های از پیش‌تعریف‌شده را به کاربر ارائه می‌دهد تا در صورت تمایل، یکی از آنها را برای نمایش در فیلد انتخاب کند. مقداری که باید به این صفت اختصاص داد، مقدار id یک عنصر datalist است که حاوی گزینه‌های از پیش‌تعریف‌شده‌ای است که به کاربر ارائه می‌شود.
• disabled: صفت disabled یک صفت عمومی است که همانطور که از نامش نیز پیداست، باعث غیرغعال شدن فیلد ورودی و یا هر عنصر دیگری که این صفت را به کار گرفته، می‌شود. وقتی فیلدی را با استفاده از این صفت غیرفعال کنیم، این فیلد به‌کلی غیر قابل تعامل خواهد بود. بنابراین، کاربر نمی‌تواند مقداری را در این فیلد وارد کند، امکان فوکوس روی آن وجود ندارد و هنگام ارسال فرم نیز، داده‌ی مربوط به این فیلد برای سرور ارسال نمی‌شود. مرورگرهای وب از یک استایل پیش‌فرض متفاوت برای فیلدهای disabled استفاده می‌کنند و ممعولاً یک پس‌زمینه‌ی خاکستری برای آن در نظر می‌گیرند.
• readonly: صفت readonly که بر خلاف diasabled یک صفت عمومی نیست و فقط برای برخی از عناصر از جمله input از نوع text در دسترس است، موجب می‌شود که فیلد ورود داده به صورت یک فیلد فقط‌خواندنی دربیاید که امکان ویرایش آن وجود ندارد اما در عین حال، فیلد مورد نظر می‌تواند فوکوس را در صفحه دریافت کند و محتوای آن نیز هنگام ارسال فرم، برای سرور فرستاده می‌شود.
• size: این صفت یک عدد صحیح مثبت دریافت می‌کند که تعیین می‌کند که چه‌تعداد از کاراکترهای ورودی نمایش داده شوند. مقدار پیش‌فرض این صفت برای کنترل‌های text برابر با 20 است. در واقع، این صفت اندازه‌ی عرض فیلد را تعیین می‌کند.
• autocomplete: این صفت برای فعال یا غیرفعال کردن قابلیت تکمیل خودکار محتوای فیلد جاری و احیاناً (در صورت فعال کردن این قابلیت) روش پیاده‌سازی این قابلیت، کاربرد دارد.
• autofocus: یک صفت بولین که وجود آن باعث می‌شود پس از تکمیل فرایند بارگذاری صفحه، روی فیلد جاری فوکوس شود و بنابراین، این فیلد بدون نیاز به کلیک ماوس یا ضربه زدن توسط کاربر، آماده‌ی دریافت ورودی باشد.
• dirname: با استفاده از صفت dirname می‌توانیم ترتیبی دهیم که جهت‌گیری محتوای یک فیلد نیز به همراه سایر داده‌های فرم، برای سرور ارسال شود. در حقیقت، اگر برای یک فیلد فرم از صفت dirname استفاده کنیم، تأیید و ارسال داده‌های فرم منجر به ارسال دو جفت نام و مقدار برای فیلد مورد نظر خواهد شد. یعنی علاوه بر جفت نام و مقداری که به صفت‌های name و value مربوط است، یک جفت نام و مقدار دیگر نیز برای این فیلد ارسال خواهد شد که نام آن از روی مقدار صفت dirname بدست می‌آید و مقدار آن (ltr یا rtl) توسط مرورگر تعیین می‌شود.
• form: این صفت برای اعلام تعلق فیلد متنی به یک فرم کاربرد دارد. مقدار دریافتی این صفت، مقدار id فرم مالک این فیلد است.
• spellcheck: یک صفت عمومی (global) که برای هر محتوای قابل ویرایش و از جمله کنترل‌های از نوع text قابل تنظیم است و با دریافت یکی از مقادیر true یا false فعال یا غیرفعال بودن قابلیت بررسی املای متن ورودی در یک فیلد را تعیین می‌کند.

حالا اجازه دهید تا با ارائه‌ی چند مثال، کاربرد صفت‌های بالا را برای کنترل‌های text در عمل ببینیم. اولین مثال، یک فیلد متنی ساده است که تنها از صفت name و صفت عمومی id استفاده کرده است. البته در این مثال، از یک عنصر label نیز استفاده شده که در آینده به صورت کامل معرفی خواهد شد اما فعلاً کافیست بدانید که این عنصر همانطور که از نامش برمی‌آید، حکم یک برچسب را برای یک کنترل دارد و با استفاده از صفتی به نام for به آن کنترل مربوط می‌شود. همچنین، یک کنترل submit نیز درون این فرم قرار دارد که در اینجا به یک مقصد واقعی برای فرم جاری اشاره نمی‌کند و بنابراین، با کلیک روی آن، داده‌های وارد شده در کنترل های فرم که در این مثال تنها شامل یک کنترل text است، حذف می‌شوند.

HTML

<form action="#">
  <label for="username">User Name: </label>
  <input type="text" id="username" name="username">
  <input type="submit">
</form>

در مثال بعدی، کاربرد صفت‌های minlength و maxlength را می‌بینیم که به ترتیب، تعیین کننده‌ی تعداد حداقل و حداکثر کاراکترهایی است که کاربر باید در فیلد متنی مورد نظر وارد کند. چنانچه تعداد کاراکترهای ورودی یک کاربر از تعداد مشخص شده توسط minlength کمتر و یا از maxlength بیشتر باشد، از ارسال فرم برای سرور جلوگیری می‌شود. این امر را می‌توانید با وارد کردن متنی با کمتر از 4 یا بیشتر از 8 کاراکتر در فیلد متنی زیر تحقیق کنید (البته اکثر مرورگرها به کاربر اجازه نمی‌دهند که بعد از رسیدن تعداد کاراکترهای ورودی آنها به maxlength کاراکتر دیگری را تایپ کنند):

HTML

<form action="#">
  <label for="username">User Name (4 to 8 characters): </label>
  <input type="text" id="username" name="username" minlength="4" maxlength="8">
  <input type="submit"> 
</form>

کد زیر، با افزودن صفت required به مثال قبلی ایجاد شده است. صفت required یک صفت بولین است که همانطور که نامش نشان می‌دهد، برای اجباری کردن یک فیلد کاربرد دارد. اگر هنگام تأیید و ارسال فرم، مقداری برای یک فیلد اجباری فراهم نشده باشد، فرم ارسال نخواهد شد و پیغام پیش‌فرض هر مرورگر برای کاربر نمایش داده می‌شود.

HTML

<form action="#">
  <label for="username">User Name (4 to 8 characters): </label>
  <input type="text" id="username" minlength="4" maxlength="8" required>
  <input type="submit">
</form>

گفتیم که با استفاده از صفت pattern می‌توانیم الگویی را برای یک فیلد متنی تعیین کنیم که عبارت ورودی آن فیلد ملزم به تطابق با آن الگو باشد. مقدار این صفت یک عبارت باقاعده است که گرامر آن توسط زبان جاوااسکریپت ارائه می‌شود. برای کار با این صفت، باید با عبارات باقاعده و گرامر آنها در جاوااسکریپت آشنا باشید اما به هر حال، در اینجا یک مثال ساده ارائه می‌دهیم که عبارت باقاعده‌ی مورد استفاده به گونه‌ای است که کاربر را ملزم به وارد کردن 4 تا 8 کاراکتر به صورت حروف کوچک (lowercase) می‌کند.

HTML

<form action="#">
  <label for="username">User Name (4 to 8 characters): </label>
  <input type="text" id="username" pattern="[a-z]{4,8}" size="10" required>
  <input type="submit">
</form>

در صورت عدم رعایت قاعده‌ی موجود در الگو، مرورگر مانع ارسال داده‌های فرم می‌شود.

صفت بعدی placeholder است که برای ارائه‌ی یک متن راهنما در مورد محتوایی که باید در فیل وارد شود، کاربرد دارد. اگر مثال زیر را اجرا کنید، خواهید دید که متنی که به عنوان مقدار این صفت وارد شده، تا زمانی که کاربر اقدام به ورود متن کند، درون فیلد مورد نظر با رنگی روشن‌تر نمایش داده می‌شود.

HTML

<form action="#">
  <label for="username">User Name: </label>
  <input type="text" id="username" placeholder="enter your username" required>
  <input type="submit">
</form>

در مثال بعدی، کاربرد صفت list را می‌بینیم. صفت list مقدار id یک عنصر datalist در صفحه را دریافت کرده و به این ترتیب، کنترل متنی را به آن مقید (bind) می‌کند. یک عنصر datalist شامل مجموعه‌ای از مقادیر از پیش‌تعریف‌شده است که با مقید شدن یک کنترل متنی به آن، لیست این مقادیر برای وارد کردن در کنترل متنی به کاربر پیشنهاد می‌شود. البته کاربر این آزادی عمل را دارد که یکی از این گزینه‌ها را انتخاب کند و یا اینکه مقدار دیگری را به صورت دستی در فیلد وارد کند.

همانطور که در مثال زیر می‌بینید، عنصر datalist مقادیر مورد نظرش را با استفاده از عنصر فرزند option و صفت value مربوط به این عنصر ایجاد می‌کند.

HTML

<form action="#">
  <label for="browser">Choose your browser from the list:</label>
  <input list="browsers" id="browser" name="browser">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Opera">
  </datalist>
</form>

در مثال بالا، اگر روی فیلد متنی موجود کلیک کنید، لیست مقادیر تعریف‌شده در datalist به کاربر پیشنهاد داده می‌شود.

مثال بعدی به صفت‌های readonly و disabled اختصاص دارد که شاید در نگاه اول شبیه به نظر برسند اما در حقیقت، کاربرد متفاوتی دارند. صفت disabled یک صفت عمومی است که همانطور که از نامش نیز پیداست، باعث غیرغعال شدن فیلد ورودی و یا هر عنصر دیگری که این صفت را به کار گرفته، می‌شود. وقتی فیلدی را با استفاده از این صفت غیرفعال کنیم، این فیلد به‌کلی غیر قابل تعامل خواهد بود. بنابراین، کاربر نمی‌تواند مقداری را در این فیلد وارد کند، امکان فوکوس روی آن وجود ندارد و هنگام ارسال فرم نیز، داده‌ی مربوط به این فیلد برای سرور ارسال نمی‌شود. مرورگرهای وب از یک استایل پیش‌فرض متفاوت برای فیلدهای disabled استفاده می‌کنند و ممعولاً یک پس‌زمینه‌ی خاکستری برای آن در نظر می‌گیرند.

اما صفت readonly که بر خلاف diasabled یک صفت عمومی نیست و فقط برای برخی از عناصر از جمله input از نوع text در دسترس است، موجب می‌شود که فیلد ورود داده به صورت یک فیلد فقط خواندنی دربیاید که امکان ویرایش آن وجود ندارد اما در عین حال، فیلد مورد نظر می‌تواند فوکوس را در صفحه دریافت کند و داده‌ی آن نیز هنگام ارسال فرم، برای سرور فرستاده می‌شود.

HTML

<form action="#">
  <label for="fname">First name: </label>
  <input type="text" id="fname" name="fname"> <br> <br>
  <label for="lname">Last name: </label>
  <input type="text" id="lname" name="lname" disabled>
  <label for="country">Country: </label>
  <input type="text" id="country" value="Norway" readonly>
  <input type="submit">
</form>

صفت بعدی که مثالی را به آن اختصاص داده‌ایم، صفت size است که با به‌کارگیری آن برای یک فیلد متنی، می‌توانیم اندازه‌ی عرض فیلد را بر حسب تعداد کاراکترها تعیین کنیم. برای فیلدهای متنی یعنی عناصر input از نوع text این صفت دارای مقدار پیش‌فرض 20 است. در حقیقت، مقداری که این صفت می‌تواند دریافت کند، یک عدد صحیح مثبت است که نشان دهنده‌ی تعداد کاراکترهایی است که برای یک فیلد قابل مشاهده است. مثال زیر را ببینید.

HTML

<form action="#">
  <label for="country">Country: </label>
  <input type="text" id="fname" name="fname" size="50"> <br> <br>
  <label for="pin">PIN: </label>
  <input type="text" id="pin" name="pin" maxlength="4" size="4"> <br> <br>
  <input type="submit" value="Submit">
</form>

مثال بعدی به صفت autocomplete اختصاص دارد که اولین بار توسط مرورگر IE به کار گرفته شد و سپس، سایر مرورگرها نیز این صفت را به روش مورد نظر خود پیاده‌سازی کردند. اما HTML5 اولین نسخه‌ای از زبان است که صفت autocomplete را به طور رسمی در مستندات زبان ارائه داده و فلسفه‌ی آن را روشن کرده است. این صفت به ویژگی تکمیل خودکار داده‌ها در مرورگرها مربوط است. اگر برای یک فیلد ورودی از این صفت استفاده نکنیم و یا مقدار on را به آن اختصاص دهیم، مرورگر سعی می‌کند با مراجعه به مقادیر قبلی که کاربر در فیلدهای مشابه وارد کرده، به کاربر در وارد کردن داده‌ی مورد نظرش در فیلد کمک کند. اما چنانچه مقدار off را برای این صفت تعیین کنیم، این قابلیت از کار می‌افتد و مرورگر پیشنهادی به کاربر ارائه نمی‌دهد. البته بد نیست بدانید در عمل، اکثر مرورگرهای مدرن مقدار off را نادیده می گیرند و کار خودشان را انجام می‌دهند.

اما این دو مقدار یعنی on و off تنها مقادیر ممکن برای صفت autocomplete نیستند و مقادیر متعدد دیگری نیز وجود دارد که استفاده از آنها به این معناست که ما قصد داریم منبع پیش‌فرض مرورگر برای تکمیل فیلد (یعنی داده‌های قبلی کاربران)‌ را تغییر داده و نوع داده‌ی مورد انتظار برای فیلد را برای مرورگر مشخص کنیم. در واقع، می توان لیستی از این مقادیر را که با فاصله از هم جدا شده‌اند، برای صفت autocomplete تعیین کنیم. تعدادی از مهمترین این مقادیر عبارتند از:

• name: این مقدار برای فیلدی که برای دریافت نام کامل (full name) در نظر گرفته شده، مناسب است.
• email: مناسب برای ادرس ایمیل.
• username: مناسب برای نام کاربری در یک اکانت.
• new-password: مناسب برای فیلدی که برای دریافت یک پسورد جدید یا تغییر یک پسورد موجود ایجاد شده است.
• current-password: مناسب برای دریافت پسورد یک حساب کاربری.
• one-time-code: مناسب برای فیلدی که باید یک کد یک‌بار مصرف که معمولاً برای تأیید هویت کاربر کاربرد دارد، در ان وارد شود.
• organization-title: مناسب برای فیلدی که برای دریافت عنوان یک شغل یا رسته‌ی شغلی ایجاد شده است.
• tel: مناسب برای دریافت یک شماره تلفن کامل که شامل کد کشور نیز باشد.
• url: مناسب برای دریافت یک آدرس url.

HTML

<form action="#">
  <label for="username">UserName: </label>
  <input type="text" id="username" name="username" autocomplete="on">
  <input type="submit">
</form>

در مثال بعدی، کاربرد صفت autofocus را خواهیم دید. با استفاده از صفت autofocus برای یک فیلد می‌توانیم فوکوس را به آن فیلد منتقل کنیم. در حقیقت، فیلدی که دارای این صفت بولین باشد، پس از تکمیل فرایند بارگذاری صفحه، فوکوس را دریافت می‌کند. توجه داشته باشید که در یک صفحه نمی‌توان این صفت را برای بیش از یک عنصر به کار گرفت. مطلب دیگری که باید در مورد صفت autofocus مد نظر قرار دهیم، این است که پس از بارگذاری صفحه، کاربر به طور خودکار به قسمتی از صفحه که عنصر دریافت‌کننده‌ی فوکوس قرار دارد، منتقل می‌شود. این موضوعی است که گاهی اوقات خیلی خوشایند کاربران و به طور ویژه کاربران ابزارهای صفحه خوان نخواهد بود.

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

HTML

<form action="#">
  <label for="fname">First name: </label>
  <input type="text" id="fname" name="fname" autofocus> <br> <br> 
  <label for="lname">Last name: </label>
  <input type="text" id="lname" name="lname"> <br> <br>
  <input type="submit">
</form>

گفتیم که با استفاده از صفت dirname می‌توانیم ترتیبی دهیم که جهت‌گیری محتوای یک فیلد نیز به همراه سایر داده‌های فرم، برای سرور ارسال شود. در حقیقت، اگر برای یک فیلد فرم از صفت dirname استفاده کنیم، تأیید و ارسال داده‌های فرم منجر به ارسال دو جفت نام و مقدار برای فیلد مورد نظر خواهد شد. یعنی علاوه بر جفت نام و مقداری که به صفت‌های name و value مربوط است، یک جفت نام و مقدار دیگر نیز برای این فیلد ارسال خواهد شد که نام آن از روی مقدار صفت dirname بدست می‌آید و مقدار آن (ltr یا rtl) توسط مرورگر تعیین می‌شود. مثال زیر، موضوع را کاملاً روشن می‌کند.

HTML

<form action="#" method="post">
  <label><input type="text" name="fruit" dirname="fruit.dir" value="cherry">
  <input type="submit">
</form>

مثال پایانی این بخش به صفت form اختصاص دارد که ما را قادر می‌سازد که تعلق یک فیلد را به یک فرم اعلام کنیم و به عبارت دیگر، فیلدی را به یک فرم متناظر کنیم. در حالت عادی، فیلدهای یک فرم درون یک عنصر form قرار دارند و لذا نیازی به استفاده از این صفت نیست اما اگر فیلدی را به هر دلیل، خارج از یک فرم قرار دهیم، در صورت تمایل، می‌توانیم با استفاده از صفت form برای آن فیلد، تعلق فیلد به فرم را اعلام کنیم. مقداری که باید به این صفت داده شود، مقدار id فرم مالک فیلد است. در کد زیر، یک فیلد متنی بیرون از فرم ایجاد شده اما ب تخصیص مقدر id صفت form یعنی form1 به آن فیلد، مشخص شده که این فیلد بخشی از آن فرم محسوب می‌شود.

HTML

<h2>The form attribute</h2>
<form action="#" id="form1">
  <label for="fname">First name: </label>
  <input type="text" id="fname" name="fname"> <br> <br> 
  <input type="submit" value="Submit">
</form>

<p>The "Last name" field below is outside the form element, but still part of the form.</p>
<label for="lname">Last name: </label>
<input type="text" id="lname" name="lname" form="form1">

ایجاد فیلد ورود متن مخفی

اگر بخواهیم فیلدی را ایجاد کنیم تا کاربران مقادیری مانند رمزهای عبور را در آن وارد کنند، از مقدار password برای صفت type یک عنصر input استفاده می‌کنیم. یک عنصر input از نوع password شباهت زیادی به کنترل‌های text دارد اما تفاوتی که این کنترل با کنترل text دارد این است که متن وارد شده در یک کنترل از نوع password نمایش داده نمی‌شود و اصطلاحاً پنهان‌شده (masked) است. در واقع، این کنترل به کاربر امکان می‌دهد که یک پسورد یا رمز عبور را به طور ایمن در فیلد وارد کند. وقتی از امنیت یک کنترل از نوع password صحبت می‌کنیم، منظورمان صرفاً عدم نمایش کاراکترهای ورودی کاربر است و نباید تصور شود که محتوای این فیلدها به صورت رمزنگاری شده برای سرور ارسال می‌شوند. در واقع، کنترل password با تبدیل هر کاراکتر ورودی به نمادی مثل ستاره (asterisk) و یا یک نقطه (dot) از دیده شدن آن کاراکترها جلوگیری می‌کند. نحوه‌ی انجام این کار در مرورگرهای مختلف، فرق دارد و به عنوان مثال، مرورگرهای موبایل معمولاً کاراکترهای تایپ شده را برای لحظه‌ی کوتاهی نمایش می‌دهند و سپس آن را با یک کاراکتر مخفی تبدیل می‌کنند. این کار با این هدف انجام می‌شود که کاربر بتواند از صحت کاراکتر ورودی خود اطمینان حاصل کند.

جفت نام و مقدار براي کنترل password به شکل کاملاً مشابهی با کنترل textbox تعیین می‌شود. یعنی نام را با استفاده از صفت name تعیین می‌کنیم و هر عبارتی که کاربر درون این کنترل وارد کند، به عنوان مقدار براي سرور فرستاده می‌شود.

HTML

<form action="#" method="post">
  <div>
    <label for="username">Username: </label>
    <input type="text" id="username" name="username">
  </div>

  <div>
    <label for="pass">Password: </label>
    <input type="password" id="pass" name="pass">
  </div>
  <br>
  <input type="submit" value="Submit">
</form>

البته مشابه آنچه در مورد کنترل text دیدیم، در مورد کنترل password نیز می‌توانیم با استفاده از صفت value مقدار پیش فرضی را برای این کنترل فراهم کنیم که البته با توجه به کارکرد کنترل password چندان مرسوم نیست. اما به هر حال، با ارسال فرم، جفت نام و مقدار از روی مقدار صفت name و محتوای موجود در فیلد، تعیین می‌شود. در ادامه، لیست صفت‌های قابل تنظیم برای یک کنترل از نوع password را ارائه می‌دهیم و با توجه به تشابه این صفت‌ها در فیلدهای password و text به توضیح کوتاهی برای هر یک اکتفا می‌کنیم:

• name: تعیین نام برای فیلد password مورد نظر.
• value: تعیین مقدار اولیه برای فیلد password مورد نظر.
• maxlength: تعیین حداکثر تعداد کاراکترهای ورودی در فیلد password.
• minlength: تعیین حداکثر تعداد کاراکترهای ورودی در فیلد password.
• required: اجباری کردن فیلد password.
• size: تعداد کاراکترهای قابل نمایش در فیلد password.
• pattern: تعیین الگوی تطابق برای محتوای ورودی فیلد password.
• readonly: تبدیل فیلد password به یک فیلد فقط‌خواندنی.
• disabled: غیرفعال کردن امکان تعامل با فیلد password مورد نظر.
• placeholder: نمایش متن راهنما درون فیلد password.
• autofocus: اعطای قابلیت فوکوس خودکار به فیلد password.
• autocomplete: مدیریت قابلیت تکمیل خودکار داده‌ی ورودی در فیلد password با استفاده از مقادیر on, off, new-password, current-password.
• form: منتسب کردن فیلد password به یک فرم در صفحه.

دقت داشته باشید که اینها لیست همه‌ی صفت‌های قابل تنظیم برای یک کنترل password است و لزومی ندارد که برای هر کنترل password همه‌ی این صفت‌ها به کار گرفته شوند. در ضمن، همه‌ی این صفت‌ها را هنگام بررسی کنترل‌های text دیدیم و تقریباً مطلب جدیدی برای گفتن در مورد این صفت‌ها نداریم. اما شاید توضیح مختصری در مورد صفت autocomplete و به‌کارگیری آن برای یک کنترل password لازم باشد.

از صفت autocomplete برای یک کنترل password زمانی استفاده می‌کنیم که بخواهیم به مرورگرها و ابزارهای password manager اجازه‌ی تکمیل خودکار فیلد password را بدهیم. مقدار on مجوز این کار را صادر می‌کند اما مقادیر current-password برای فیلدهایی که به یک پسورد موجود نیاز دارند و new-password برای فیلدهایی که با هدف وارد کردن یک پسورد جدید ایجاد شده‌اند، نیز قابل استفاده هستند.

ایجاد فیلد ورود آدرس ایمیل

یک کنترل از نوع email همانطور که انتظار می‌رود، برای دریافت یک (یا چند) آدرس ایمیل از کاربر کاربرد دارد. برای ایجاد چنین کنترلی باید مقدار صفت type را برابر با email قرار دهیم. کنترل‌های email مجهز به قابلیت اعتبارسنجی خودکار هستند و لذا مقداری که در یک فیلد email وارد می‌شود، قبل از ارسال فرم، مورد بررسی قرار می‌گیرد. مقدار یک فیلد از نوع email برای اینکه قادر به پاس کردن تست اعتبارسنجی باشد، باید به یکی از سه شکل زیر باشد:

• یک رشته‌ی خالی (“ “) که بیانگر عدم ورود ایمیل توسط کاربر است.
• یک و فقط یک آدرس ایمیل که فرمت مناسبی داشته باشد. منظور از مناسب بودن فرمت مقدار وارد شده، وجود داشتن یا واقعی بودن آدرس ایمیل مورد نظر نیست و فقط به این معناست که ایمیل وارد شده باید فرمت مناسبی مثل username@domain یا username@domain.tld باشد که در ان tld اختصاری است برای top-level domain و به زبان ساده، پسوندی مانند com یا ir است.
• یک لیست از چند آدرس ایمیل با فرمت مناسب که با کاما از یکدیگر جدا شده‌اند، البته به شرطی که از یک صفت multiple نیز برای کنترل مورد نظر استفاده شده باشد. به زبان دقیق‌تر، اگر و فقط اگر یک صفت multiple برای کنترل email استفاده شده باشد، مقدار این فیلد باید یک لیست از چند آدرس ایمیل معتبر باشد.

هر مقدار دیگری به جز یکی از این سه مورد، یک مقدار نامعتبر برای فیلد email محسوب می‌شود و مانع از ارسال فرم می‌شود. همچنین، عدم پشتیبانی یک مرورگر از کنترل email باعث می‌شود که آن مرورگر با این کنترل مثل یک کنترل text رفتار کند و هیچ‌گونه اعتبارسنجی روی مقدار ورودی کاربر انجام ندهد.

HTML

<h3>Show an email field (allows only one email address</h3>
<form action="#">
  <label for="email">Enter your email: </label>
  <input type="email" id="email" name="email">
  <input type="submit">
</form>

<h3>Show an email field (allows multiple email addresses)</h3>
<form action="#">
  <label for="emails">Enter your email: </label>
  <input type="email" id="emails" name="emails" multiple>
  <input type="submit">
</form>

همانند آنچه در مورد کنترل‌های text و password نیز دیدیم، جفت نام و مقدار مربوط به یک کنترل email از روی مقدار صفت name و مقدار وارد شده در فیلد (با امکان تعیین مقدار اولیه با استفاده از صفت value) مشخص می‌شود. سایر صفت‌های قابل تنظیم برای یک کنترل از نوع email عبارتند از:

• list: مقدار id یک عنصر datalist را دریافت می‌کند و گزینه‌های تعریف شده در ان datalist را به عنوان پیشنهاد به کاربر ارائه می‌دهد.
• maxlength: تعداد حداکثر کاراکترهای ورودی را تعیین می‌کند.
• minlength: تعداد حداقل کاراکترهای ورودی را تعیین می‌کند.
• size: تعیین:ننده‌ی تعداد کاراکترهایی است که نمایش داده می‌شوند.
• multiple: یک صفت بولین که وجود ان به این معناست که امکان وارد کردن بیش از یک آدرس ایمیل وجود داشته باشد.
• pattern: الگویی را برای تطابق با مقدار ورودی در فیلد email تعیین می‌کند.
• placeholder: یک متن راهنما را درون فیلد نمایش می‌دهد تا زمانی که کاربر اقدام به ورود مقدار کند.
• readonly: فیلد مورد نظر را به یک فیلد فقط‌خواندنی و غیرقابل ویرایش تبدیل می‌کند.
• disabled: امکان تعامل با فیلد را از کاربر سلب می‌کند و آن را غیرفعال می‌کند.
• required: جکم به اجباری بودن فیلد مورد نظر می‌دهد.
• form: فیلد مورد نر را به یک فرم منتسب می‌کند.
• autocomplete: تکلیف قابلیت تکمیل خودکار محتوای فیلد را روشن می‌کند.
• autofocus: با بارگذاری صفحه، فیلد مورد نظر فوکوس را دریافت می‌کند.

تنها نکته‌ای که در مورد صفت‌های بالا نیاز به اشاره دارد، به استفاده از صفت list برای کنترل‌های email مربوط می‌شود. اگر در بین گزینه‌های ارائه شده توسط datalist مواردی وجود داشته باشد که آدرس‌های ایمیل معتبری نباشند، مرورگر از ارائه‌ی آنها به کاربر خودداری می‌کند. البته این یک قاعده‌ی کلی است که چنانچه گزینه‌ای از datalist با صفت type یک کنترل input همخوانی نداشته باشد، آن گزینه به کاربر پیشنهاد نخواهد شد.

ایجاد فیلد ورد آدرس URL

برای ایجاد یک فیلد متنی جهت دریافت یک آدرس url از کاربران، باید صفت type را برای یک عنصر input برابر با url قرار دهیم. کنترل‌های از نوع url مجهز به قابلیت اعتبارسنجی خودکار هستند و مرورگرها قبل از ارسال فرم مقدار وارد شده در این کنترل‌ها را بررسی می‌کنند. دقت داشته باشید که این بررسی انجام می‌شود تا اطمینان حاصل شود که مقدار وارد شده در فیلد، واقعاً مقدار یک آدرس url است که با یک پروتکل شروع شده و با سایر بخش‌های یک url ادامه می‌یابد و ارتباطی به اینکه url وارد شده، واقعی است و به یک سند در وب اشاره می‌کند یا خیر، ندارد. اگر مقدار وارد شده در یک کنترل url به یکی از دو فرم زیر باشد، تست اعتبارسنجی را پاس کرده و مشکلی برای ارسال آن وجود ندارد:

• یک رشته‌ی خالی (“ “) که به معنای عدم ورود یک آدرس url یا حذف ان قبل از ارسال است.
• یک آدرس مطلق (absoluite url) که فرمت مناسبی داشته باشد. مناسب بودن فرمت یک آدرس مطلق به این معناست که دارای فرم urlscheme://restofurl باشد که در آن، urlscheme بیانگر پروتکل و restofurl نشانگر سایر بخش های یک url است.

جفت نام و مقدار برای یک کنترل url همانند سایر کنترل‌های متنی، باز روی مقدار صفت name و محتوای فیلد در زمان ارسال فرم، تعیین می‌شود. در ضمن، کنترل‌های url به جز صفت‌های عمومی مربوط به عنصر input دارای صفت دیگری نیستند و چنانچه مرورگری از این نوع کنترل پشتیبانی نکند، با آن مانند یک فیلد از نوع text رفتار می‌کند و به عبارت دیگر، برای چنین مرورگری امکان اعتبارسنجی مقدار ورودی وجود ندارد.

HTML

<form action="#">
  <label for="url">Enter an https:// URL: </label>
  <input type="url" name="url" id="orl" pattern="https://.*" required>
</form>

در مثال بالا، از یک صفت pattern استفاده شده تا کاربر محبور به وارد کردن یک آدرس url با پروتکل HTTPS شود.

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

اگر بخواهیم فیلدی را برای دریافت شماره تلفن کاربر ایجاد کنیم، باید از مقدار tel برای صفت type یک عنصر input استفاده کنیم. بر خلاف کنترل‌های email و url این کنترل از قابلیت اعتبارسنجی خودکار برخوردار نیست و علت این امر، تنوع و تعدد فرمت‌های شماره تلفن و تفاوت این فرمت‌ها در نقاط مختلف دنیا است. همانند کنترل‌های قبلی، در مورد کنترل‌های از نوع tel نیز جفت نام و مقدار از روی مقدار صفت name و مقداری که در زمان ارسال درون فیلد قرار داشته باشد، تعیین می‌شود.

HTML

<form action="#">
  <label for="phone">Enter your phone number: </label>
  <input type="tel" name="phone" id="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
  <small>Format: 123-456-7890</small>
</form>

کنترل tel از بسیاری جهات شبیه به کنترل text است اما یک مزیت ویژه‌ی این کنترل این است که در دستگاه‌های موبایل، یک keypad که تنها از اعداد تشکیل شده برای وارد کردن شماره تلفن در این نوع فیلدها نمایش داده می‌شود.

ایجاد فیلد ورود مقادیر عددی

با تخصیص مقدار number به صفت type یک عنصر input می‌توانیم یک فیلد ورودی برای دریافت مقادیر عددی از کاربران ایجاد کنیم. کنترل‌های از نوع number مجهز به قابلیت اعتبارسنجی خودکار هستند و لذا ین کنترل ها مقادیر غیرعددی را نمی‌پذیرند. اگر ماوس را درون یک فیلد number ببریم، یک جفت پیکان (arrow) نمایش داده می‌شود که می‌توانیبم از آنها برای افزایش یا کاهش پلکانی مقدار ورودی استفاده کنیم. صفت‌های name و value کمافی‌السابق برای تعیین جفت نام و مقدار فیلد کاربرد دارند و البته که مقداری که برای value تعیین می‌کنیم، فقط مقدا اولیه است و این کاربر است که مقدار نهایی را در این فیلد وارد می‌کند.

HTML

<form action="#">
  Quantity: <input type="number" name="quantity" min="0" max="100" step="5" value="50">
  <input type="submit">
</form>

در مثال بالا، از صفت‌های min و max برای تعیین نقاط ابتدایی و انتهایی بازه‌ی مقادیر قابل قبول استفاده شده و صفت step برای تعیین گام پرش به کار گرفته شده است. به این ترتیب، برای فیلد number در مثال بالا، مقادیر مجاز عبارتند از اعداد بخشپذیر بر 5 در بازه‌ی اعداد صفر تا صد. صفت step دارای مقدار پیشُرض 1 است و بنابراین، در صورت عدم استفاده از این صفت در مثال بالا، امکان ورود هر عدد صحیح بین صفر تا صد در فیلد number وجود داشت.

ایجاد ویجت انتخاب عدد از یک بازه

اگر بخواهیم یک مقدار عددی از یک بازه‌ی مشخص را از کاربر دریافت کنیم، می‌توانیم مقدار range را برای صفت type یک عنصر input تعیین کنیم. در این صورت، مرورگر به شرط پشتیبانی، یک ویجت از نوع range ایجاد می‌کند که به کاربر امکان می‌دهد با استفاده از یک لغزنده (slider) مقدار عددی مورد نظرش را مشخص کند. اگر مرورگر قادر به شناسایی یک کنترل از نوع range نباشد، به جای ویجت range یک فیلد متنی ساده ایجاد می‌کند. به طور کلی، از مقدار range باید زمانی برای صفت input استفاده کنیم که بخواهیم به کاربر امکان وارد کردن عددی را بدهیم که نباید از یک مقدار مشخص کوچکتر و یا از مقدار مشخص دیگر بزرگتر باشد و مقدار دقیق عدد ورودی نیز مهم نباشد. برای این نوع کنترل‌ها، صفت‌های min و max به ترتیب دارای مقادیر پیش‌فرض صفر و 100 هستند و مقدار پیش فرض value نیز از روی مقادیر min و max و با میانگین گیری از این دو مقدار بدست می‌آید.

برای یک کنترل range نیز جفت نام و مقدار مانند سایر کنترل‌هایی که تا الان دیده‌ایم، به این صورت تعیین می‌شود که مقدار صفت name برای نام و مقداری که در لحظه‌ی ارسال فرم برای این کنترل تعیین شده، به عنوان مقدار ارسال می‌شود. مثال زیر را ببینید.

HTML

<form action="#">
  <input type="range" id="volume" name="volume" min="0" max="10">
  <label for="volume">Volume</label>
  <input type="submit">
</form>

ایجاد فیلد ورود تاریخ و زمان

قبل از صحبت در مورد مقادیر مربوط به تاریخ و زمان و کنترل‌هایی که برای دریافت این نوع از مقادیر قابل تعریف هستند، ابتدا باید با فرمت صحیح مقادیر تاریخ و زمان در HTML آشنا شویم. استاندارد ISO 8601 به مقادیر تاریخ و زمان و فرمت این مقادیر مربوط است و مستندات HTML نیز شامل یک پیاده‌سازی از همین استاندارد است اما به خاطر الگوریتم‌هایی که برای تبدیل و تجزیه‌ی (parsing) این مقادیر پیاده‌سازی کرده، با فرمت مورد انتظار کمی تفاوت دارد.

قبل از هر چیز، باید بدانید که مقادیر مربوط به تاریخ و زمان در HTML همیشه رشته‌های متنی (strings) هستند که از مجموعه‌ی کاراکتری ASCII استفاده می‌کنند و تقویم مبنای این رشته‌ها، تقویم میلادی گریگوری (Grigorian calendar) که در سال 1582 جایگزین تقویم Julian شد. هرچند رابط‌های کاربری می‌توانند امکان ورود مقادیر تاریخ و زمان را بر اساس سایر تقویم‌ها هم فراهم کنند اما در نهایت، رشته‌ی ورودی همیشه بر اساس تقویم گریگوری محاسبه می‌شود. تقویم گریگوری شامل سال‌های قبل از 1582 نیست اما در HTML این تقویم طوری بازطراحی شده که سال‌های قبل از 1582 را نیز شامل است و به طور دقیق‌تر، از اولین سال میلادی به بعد قابل انتخاب است اما از سال‌های قبل از میلاد پشتیبانی نمی‌شود. موضوع دیگری که باید در مورد تقویم گریگوری به آن توجه شود، سال‌های کبیسه یا به قول فرنگی‌ها leap years است که بر خلاف سال‌های 365 روزه‌ی معمولی، 366 روز دارند. هر سالی که بر 400 بخش‌پذیر باشد و یا بر 4 بخشپذیر باشد اما بر 100 نه، یک سال کبیسه‌ی میلادی است. با وجودی که در تقویم‌ها سال‌ها را 365 روزه در نظر می‌گیرند اما واقعیت ماجرا این است که یک گردش کامل زمین در مدار خود به دور خورشید تقریباً 365.2422 روز طول می‌کشد (این اصلاحی است که در تقویم گریگوری نسبت به تقویم Julian که تا قبل از آن مورد استفاده بود، انجام شد) و سال‌های کبیسه به تقویم‌ها کمک می‌کنند که با موقعیت واقعی سیاره در مدار خود هماهنگ شوند. افزودن یک روز به سال در هر دوره‌ی چهار ساله باعث می‌شود طول سال 365.25 روز شود که به مقدار واقعی یعنی 365.2422 نزدیک است. در یک سال کبیسه‌ی میلادی ماه فوریه به جای 28 روز دارای 29 روز است.

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

با تخصیص هر یک از مقادیر جدول بالا به صفت type یک عنصر input می‌توانیم نوعی از کنترل‌های مربوط به تاریخ و زمان را ایجاد کنیم که توضیحات مربوط به هر کنترل و مقادیر استاندارد قابل تخصیص به آن در جدول بالا ارائه شده است. البته معمولاً همه‌ی مرورگرهای امروزی یک تقویم یا کادر انتخاب تاریخ و زمان (datetime picker) نمایش می‌دهند تا کاربر بتواند به جای وارد کردن مقدار مورد نظر به صورت دستی، از این کادر برای انتخاب مقادیر استفاده کند. در ضمن، در صورت عدم پشتیبانی مرورگر از این کنترل‌ها، با آنها مانند کنترل‌های text رفتار می‌شود.

HTML

<form action="#">
  <label for="start">Start date:</label>
  <input type="date" id="start" value="2023-12-22" min="2018-01-01" max="2023-12-31">
  <br> <br>
  <label for="appt">Choose a time for meeting:</label>
  <input type="time" id="appt" min="09:00" max="18:00" required>
  <br> <br>
  <label for="month">Start month:</label>
  <input type="month" id="month" min="2020-01" max="202-05" required>
  <input type="submit">
</form>

ایجاد فیلد جستجو

اگر از مقدار search برای صفت type یک عنصر input استفاده کنیم، یک فیلد متنی ایجاد می‌شود که برای دریافت رشته‌ها وعبارات مورد جستجوی کاربر طراحی شده است. عملکرد یک کنترل search تا حد زیادی مشابه یک کنترل text است اما به هر حال، به لحاظ معنایی (semantic) این دو نوع کنترل، کاربرد متفاوتی دارند. مرورگرها می‌توانند از استایل متفاوتی برای یک کنتترل search استفاده کنند. به عنوان مثال، اکثر مرورگرها با شروع تایپ در فیلد search یک آیکون کوچک را در سمت راست فیلد نمایش می‌دهند که کاربر می‌تواند از آن برای پاک کردن عبارتی که در فیلد وارد کرده، استفاده کند. جفت نام و مقدار برای یک کنترل از نوع search همانند سایر کنترل‌های متنی از روی مقدار صفت name و مقدار موجود در فیلد در زمان ارسال فرم، تعیین می‌شود. توجه داشته باشید که حتماً از صفت name برای این کنترل استفاده کنید. چون در غیر این صورت، داده ی این فیلد ارسال نخواهد شد. معمولاً بر طبق یک قراداد نانوشته، از مقدار q برای صفت name یک کنترل از نوع search استفاده می‌شود. علاوه بر اینها، مرورگرهای مدرن، عبارات جستجو شده را که در فیلدهای search مربوط به یک دامین وارد شده، ذخیره می‌کنند و این عبارات ذخیره شده را به عنوان گزینه‌های تکمیل خودکار برای سایر فیلدهای جستجو در آن دامین ارائه می‌دهند.

HTML

<form action="#">
  <label for="site-search">Search the site</label>
  <input type="search" id="site-search" name="q">
  <input type="submit" value="search">
</form>

مثال بالا نمونه‌ای از یک فرم جستجو است که معمولاً در بخش header صفحه‌ی اصلی یک وبسایت دیده می‌شود و کاربر می‌تواند برای جستجو در محتوای سایت از آن استفاده کند. اما یک مشکل مربوط به فرم‌های جستجو، دسترسی‌پذیری (accessibility) آنهاست. برای بهبود سطح دسترسی‌پذیری این فرم‌ها به‌خصوص برای ابزارهایی مانند صفحه‌خوان‌ها، بهتر است اولاً از یک صفت با نام role و مقدار search برای خود فرم استفاده کنیم و ثانیاً صفتی با نام aria-label را با یک توضیح کوتاه در مورد فیلد جستجو برای عنصر input به کار بگیریم. این صفت‌ها جزء صفت‌های بومی HTML نیستند بلکه بخشی از ویژگی‌های WAI-ARIA هستند که یک تکنولوژی کمکی برای افزایش سطح دسترسی‌پذیری صفحات وب است. در مثال زیر از این صفت‌ها استفاده شده است:

HTML

<form action="#" role="search">
  <label for="site-search">Search the site:</label>
  <input type="search" id="site-search" name="q" arial-label="Search through site content">
</form>

ایجاد فیلد دکمه رادیویی

با ایجاد یک گروه از دکمه‌های رادیویی (radio buttons) می‌توانیم به کاربران امکان بدهیم که یک و فقط یک گزینه را از بین چند گزینه‌ی موجود، انتخاب کنند. این دکمه‌ها معمولاً به صورت دایره‌های کوچکی نمایش داده می‌شوند که در صورت انتخاب، برجسته (highlited) می‌شوند. برای ایجاد یک دکمه رادیویی، باید از مقدار radio برای صفت type یک عنصر input استفاده کنیم و برای ایجاد یک گروه از این دکمه‌ها باید مقدار یکسانی را به صفت name دکمه‌ها اختصاص دهیم.

HTML

<form action="#">
  <p>Please select your gender:</p>
  <input type="radio" name="sex" id="male" value="male" checked>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="female" value="female">
  <label for="male">Female</label>
  <input type="radio" name="sex" id="other" value="other">
  <label for="male">Other</label>
  <input type="submit">
</form>

تعیین جفت نام و مقدار ارسالی برای یک گروه از دکمه‌های رادیویی نسبت به سایر کنترل‌هایی که تا الان دیده‌ایم، کمی متفاوت است. در حقیقت، در یک گروه از دکمه‌های رادیویی، باید مقدار یکسانی را به صفت name هر دکمه اختصاص دهیم تا این گزینه‌ها هم‌گروه شوند و کاربر از بین آنها یک گزینه را انتخاب کند. اما مقدار صفت value برای دکمه های هم‌گروه متفاوت است و مقدار صفت value مربوط به هر گزینه‌ای که هنگام ارسال فرم در حالت انتخاب قرارد ادشته باشد، به عنوان مقدار برای این گروه از دکمه‌ها ارسال می‌شود. بنابراین، در مثال بالا اگر کاربر گزینه‌ی دارای برچسب female را انتخاب کند، جفت نم و مقدار برای این گروه از دکمه‌ها به صورت sex=female ارسال می‌شود.

اگر بخواهیم هنگام بارگذاری صفحه، یکی از گزینه‌های موجود از قبل انتخاب شده باشد، می‌توانیم از صفت بولین checked استفاده کنیم. بدیهی است که برای یک گروه از دکمه‌های رادیویی، تنها یک دکمه می‌تواند دارای این صفت باشد. در مثال بالا، استفاده از صفت checked برای دکمه‌ی اول باعث شده تا هنگام بارگذاری صفحه، گزینه ی اول در حالت انتخاب قرار داشته باشد.

توجه. بد نیست بدانید که علت استفاده از عبارت دکمه‌رادیویی برای این کنترل‌ها، شباهتی است که هم از نظر ظاهری و هم از نظر عملکردی بین این کنترل‌ها و دکمه‌های فشاری موجود در رادیوهای قدیمی است.

ایجاد فیلد چک‌باکس

با تخصیص مقدار checbox به صفت type یک عنصر input می‌توانیم یک کنترل چک‌باکس ایجاد کنیم. یک کنترل چک‌باکس از این نظر که می‌تواند توسط کاربر انتخاب و فعال شود، شبیه کنترل‌های radio است اما بر خلاف کنترل‌های از نوع radio که برای انتخاب یک گزینه از بین گزینه‌های یک گروه کاربرد دارند، کنترل‌های از نوع checkbox به صورت گروهی در نظر گرفته نمی‌شوند، بلکه هر چک‌باکس مربوط به یک گزینه‌ی منفرد و مجزاست که کاربر می‌تواند در مورد فعال یا غیرفعال بودنش تصمیم بگیرد. شکل ظاهری یک کنترل چک‌باکس معمولاً به صورت یک مربع است که در صورت فعال شدن، تیک‌دار می‌شود. البته این مربع می‌تواند دارای گوشه‌های نرم نیز باشد و به طور کلی، شکل ظاهری چک‌باکس‌ها به تنظیمات سیستم‌عاملی بستگی دارد که مرورگر روی آن اجرا می‌شود.

HTML

<form action="#">
  <p>Choose your favorites:</p>
  <input type="checkbox" id="sports" name="sports">
  <label for="sports">Sports</label>
  <input type="checkbox" id="musics" name="musics">
  <label for="musics">Musics</label>
  <input type="checkbox" id="history" name="history">
  <label for="history">History</label>
  <input type="submit">
</form>

برای یک کنترل چک‌باکس، جفت نام و مقدار به این صورت تعیین می‌شود: نام ارسالی از روی مقدار صفت name تعیین می‌شود و در صورتی که از یک صفت value برای کنترل چک‌باکس استفاده کرده باشیم، مقداری که به این صفت داده‌ایم، به عنوان مقدار ارسالی در نظر گرفته می‌شود. اما در غیاب صفت value، برای چک‌باکس تیک خورده یا فعال، عبارت on به عنوان مقدار ارسالی در نظر گرفته می‌شود و برای چک‌باکس تیک‌نخورده یا غیرفعال، مقداری برای سرور ارسال نخواهد شد. برای روشن شدن موضوع، مثال زیر و توضیحات بعد از آن را ببینید.

HTML

<form action="#">
  <p>Choose your favorites:</p>
  <input type="checkbox" id="sports" name="sports" value="yes">
  <label for="sports">Sports</label>
  <input type="checkbox" id="musics" name="musics" checked>
  <label for="musics">Musics</label>
  <input type="checkbox" id="history" name="history">
  <label action="#">History</label>
  <input type="submit">
</form>

فرض کنیم کاربری فرم بالا را به همین صورت و بدون تغییر گزینه‌ها یعنی در حالی که فقط چک‌باکس مربوط به Music فعال است، تأیید و ارسال کند. در این صورت، برای این کاربر، جفت نام و مقدار برای چک‌باکس اول به صورت sports=yes و برای چک‌باکس دوم به صورت music=on ارسال می‌شود و هیچ اطلاعاتی در مورد چک‌باکس سوم ارسال نخواهد شد.

ایجاد فیلد تعیین رنگ

با تخصیص مقدار color به صفت type یک عنصر input می‌توانیم کنترلی ایجاد کنیم که امکان تعیین یک رنگ را به کاربر می‌دهد. شکل ظاهری یک کنترل از نوع color در پلتفرم‌ها و مرورگرهای مختلف، با هم فرق دارد و بسته به این عامل‌ها، می‌تواند یک فیلد متنی ساده باشد که البته مجهز به ویژگی اعتبارسنجی خودکار برای اطمینان از این موضوع است که مقدار وارد شده دارای فرمت مناسبی است و معرف یک رنگ است و یا با نمایش یک کادر انتخاب رنگ (color picker) همراه باشد که به کاربر امکان انتخاب رنگ به صورت بصری (visual) را می‌دهد. در مثال زیر، با استفاده از صفت value یک مقدار پیش‌فرض نیز برای هر یک از کنترل‌های color تعریف شده است.

HTML

<form action="#">
  <p>Choose your monster's colors:</p>
  <input type="color" id="head" name="head" value="#e66465">
  <label for="head">Head</label>
  <br> <br>
  <input type="color" id="body" name="body" value="#f6b730">
  <label for="body">Body</label>
  <br> <br>
  <input type="submit">
</form>

در مورد جفت نام و مقدار ارسالی برای یک کنترل از نوع color، تکلیف نام ارسالی مشخص است و کمافی‌السابق از روی مقدار صفت name هر کنترل تعیین می‌شود. مقدار ارسالی یک کنترل color نیز یک عبارت هفت‌کاراکتری است که معرف یک رنگ RGB در فرمت هگزادسیمال است. این مقدار دارای فرمت کلی #rrggbb است که در آن rr نشانگر مؤلفه‌ی قرمز (Red) و gg نشانگر مؤلفه‌ی سبز (Green) و bb نشانگر مؤلفه‌ی آبی (Blue) در رنگ است و هر یک از این سه زوج می‌توانند مقداری بین صفر تا 255 داشته باشند که در فرمت هگزادسیمال معادل 00 تا ff است. در مثال بالا، جفت نام و مقدار برای کنترل اول به صورت head=#e66465 ارسال می‌شود، البته به شرطی که کاربر رنگ انتخابی پیش‌فرض را تغییر ندهد.

اما همانطور که گفته شد، اکثر مرورگرها یک کادر color picker را نمایش می‌دهند که کار انتخاب رنگ را ساده‌تر می‌کند. این کادرها در مرورگرهای مدرن به گونه‌ای هستند که به کاربر امکان می‌دهند که رنگ مورد نظرشان را با استفاده از هر یک از مودهای رنگی RGB یا HSL انتخاب کنند و کد هگزادسیمال معادل هر رنگ را نیز نمایش می‌دهند. در ضمن، یک قطره‌چکان (eyedropper) نیز در این کادرها دیده می‌شود که امکان انتخاب هر رنگی از محیط کاربری اطراف را به کاربر می‌دهد. البته کنترل‌های از نوع color در HTML به گونه‌ای هستند که تنها امکان تعیین رنگ‌های ساده (یعنی رنگ‌های فاقد مؤلفه‌ی کانال آلفا که مشخص‌کننده‌ی میزان شفافیت یا transparency رنگ است) را به کاربر می‌دهند و بر خلاف CSS امکان انتخاب رنگ بر اساس نام رنگ‌ها و یا با استفاده از توابعی مانند rgb() وhsl() نیز وجود ندارد.

ایجاد فیلد آپلود فایل

با تخصیص مقدار file به صفت type یک عنصر input این امکان برای کاربر فراهم می‌شود که یک یا چند فایل را انتخاب کند تا به همراه داده‌های فرم، برای سرور ارسال شود (شوند). هنگام ایجاد یک کنترل از نوع file معمولاً از صفت accept نیز برای تعیین فرمت فایل‌هایی که امکان انتخاب و آپلود آنها وجود دارد، استفاده می‌شود. مقداری که باید برای صفت accept در نظر بگیریم، می تواند یک پسوند فایل و یا یک MIME type باشد.

HTML

<form action="#">
  <label for="avatar">Choose a profile picture:</label>
  <input type="file" id="avatar" name="avatar" accept=".png, image/jpeg">
  <input type="submit">
</form>

در مثال بالا، امکان انتخاب فقط یک فایل برای کاربر وجود دارد و با توجه به مقدار تعیین‌شده برای صفت accept این فایل باید یک تصویر دارای فرمت .jpg یا .png باشد. اگر بخواهیم این امکان را به کاربران بدهیم که بیش از یک فایل را انتخاب و آپلود کنند، باید از صفت بولین multiple استفاده کنیم. در مثال زیر، کاربر می‌تواند چندین فایل را انتخاب کند و محدودیتی نیز در مورد فرمت این فایل‌ها وجود ندارد.

HTML

<form action="#">
  <label for="avatar">Choose an arbitrary file:</label>
  <input type="file" id="avatar" name="avatar" multiple>
  <input type="submit">
</form>

نام ارسالی برای یک کنترل از نوع file مقددار صفت name کنترل است و مقدار ارسالی نیز نام فایل انتخاب شده است. برای نمونه، در مثال بالا اگر کاربری یک فایل با نام test.png را انتخاب کرده باشد، جفت نام و مقدار مربوط به این کنترل file برای آن کاربر به صورت demo=test.jpg ارسال خواهد شد. اما اگر کاربری بیش از یک فایل را انتخاب کرده باشد، به ازای هر فایل انتخاب‌شده، یک جفت نام و مقدار ارسال خواهد شد. در مثال بالا، اگر کاربری دو فایل با نام‌های test.jpg و test.png را انتخاب کرده باشد، جفت‌های نام و مقدار demo=test.jpg&demo=test.png ارسال خواهند شد.

اگر فایلی که باید آپلود شود، یک عکس یا ویدیو باشد، این امکان وجود دارد که به کاربر امکان دهیم به جای انتخاب یک فایل تصویری یا ویدیویی موجود، فایل را کپچر کند. مدیای مورد استفاده برای کپچر با استفاده از صفتی به نام capture مشخص می‌شود. این صفت درنسخه‌های قبل از HTML5 هم وجود داشت اما به عنوان یک صفت بولین تعریف شده بود اما در HTML5 این صفت می‌تواند یکی از مقادیر user و یا envronment را دریافت کند. مقدار user باعث انتخاب دوربین سلفی که با نام user-camera نیز شناخته می‌شود، به عنوان مدیای مورد استفاده برای کپچر شده و مقدار environment باعث انتخاب دوربین پشتی که با نام environment-camera نیز شناخته می‌شود، به عنوان مدیای کپچر می‌شود.

ایجاد کنترل مخفی

برای ایحاد یک کنترل مخفی، باید مقدار hidden را به صفت type یک عنصر input اختصاص دهیم. برای کاربران امکان مشاهده و ویرایش کنترل‌های hidden وجود ندارد اما مقدار این کنترل‌ها برای سرور ارسال می‌شود. هیچ راهی برای نمایش دادن یک کنترل hidden در صفحه وجود ندارد و طبیعتاً روشی برای فوکوس روی این کنترل‌ها نیز وجود ندارد. البته توجه داشته باشید که یک کنترل از نوع hidden را می‌توان با استفاده از developer tools مرورگرها و یا با استفاده از گزینه‌هایی مانند View Source مشاهده و ویرایش کرد و منظور از مخفی بودن این کنترل‌ها، عدم نمایش آنها به عنوان بخشی از محتوای صفحه‌ی رندر شده است. بنابراین، به‌هیچ‌وجه کنترل hidden را به عنوان یک کنترل امن که مقدارش در دسترس کاربران نیست، تصور نکنید.

به طور کلی، هر جایی از صفحه که بخواهیم داده‌هایی را قرار دهیم که کاربر آنها را نبیند اما همراه سایر داده‌های فرم، برای سرور ارسال شوند، از یک کنترل hidden استفاده می‌کنیم.

HTML

<form action="#">
  <div>
    <label for="title">Post title:</label>
    <input type="text" id="title" name="title" value="My excellent blog post">
  </div>
  <div>
    <label for="content">Post content:</label>
    <input type="text" id="content" name="content">
  </div>
  <input type="submit">
  <input type="hidden" id="postid" name="postid" value="34657">
</form>

آنچه که در کد بالا دیده می‌شود، یکی از مرسوم‌ترین کاربردها و موارد استفاده‌ی کنترل‌های hidden است. در واقع، این کدها برای یک سناریوی فرضی نوشته شده که از این قرار است:

1. کاربر قصد دارد محتوایی را که روی آن کنترل دارد، ویرایش کند. این محتوا برای مثال می‌تواند یک پست بلاگ باشد. برای این منظور، کاربر دکمه‌ای مانند edit یا چیزی شبیه آن را فشار می‌دهد.
2. محتوایی که باید ویرایش شود، از دیتابیس دریافت شده و در یک فرم HTML بارگذاری می‌شود تا کاربر بتواند آن را ویرایش کند.
3. بعد از ویرایش محتوا، کاربر فرم را تأیید و ارسال می‌کند و داده‌های بروزرسانی‌شده برای سرور فرستاده می‌شوند تا تغییرات در دیتابیس نیز صورت گیرد.

در مرحله‌ی دوم این سناریوی پرتکرار، id رکوردی از دیتابیس که باید بروزرسانی شود، در یک کنترل hidden نگهداری می‌شود و وقتی در مرحله‌ی سوم، کاربر اقدام به ارسال فرم کند، این id به همراه محتوای جدید رکورد مورد نظر به صورت خودکار به سرور برگردانده می‌شود. این امر باعث می‌شود که مؤلفه‌ی سمت سرور سایت بداند که دقیقاً کدام رکورد از دیتابیس باید با داده‌های ارسالی بروزرسانی شود.

حالا سناریوی بالا را کمی تغییر می‌دهیم و این بار فرض می‌کنیم که فرمی که کاربر در حال پر کردن آن است، یک فرم بانکی مربوط به یک تراکنش انتقال پول به یک حساب دیگر است. این بار به جای id مربوط به رکورد دیتابیس، یک توکن امنیتی (security token) در قالب یک فیلد hidden نگهداری می‌شود و هنگام ارسال فرم، به همراه سایر داده‌های فرم ارسال می‌شود و سرور می‌تواند از آن برای تصدیق اینکه کاربر همان کسی است که می‌گوید، استفاده کند. این یک تکنیک امنیتی برای مبارزه با نوع خاصی از حملات با نام اختصاری CSRF یا نام کامل Cross Site Request Forgery است. در این نوع حملات خرابکارانه، مهاجم می‌تواند یک فرم جعلی ایجاد کند، خودش را به جای بانک جا بزند و سعی کند کاربر را مجاب به پر کردن فرم جعلی کند. البته باید توجه داشته باشید که صرف قرار دادن توکن امنیتی در یک فیلد مخفی باعث تضمین امنیت شود و این تکنیک باید در ترکیب با رمزنگاری به کار گفته شود.

ایجاد انواع کنترل‌های دکمه

تا الان در مثال‌های مختلف کنترل‌های submit را که کار تأیید و ارسال داده‌های فرم را انجام می‌دهند، به کرّات دیده‌ایم. علاوه بر submit مقادیر image, button و reset نیز باعث ایجاد دکمه می‌شوند که البته نوع این دکمه‌ها با هم فرق دارد. به طور کلی، مقادیری که تخصیص آنها به صفت type باعث ایجاد دکمه می‌شود، عبارتند از:

• submit: این مقدار باعث ایجاد یک دکمه‌ی دارای قابلیت تأیید فرم می‌شود که کلیک روی آن، باعث ارسال داده‌های فرم مالک دکمه برای سرور می‌شود. در یک کنترل از نوع submit، از صفت value براي مشخص کردن متن برچسب دکمه استفاده می‌شود. این صفت در اکثر مرورگرها دارای مقدار پیش‌فرضی مانند Submit یا Submit Query است که خوب البته براي همه‌ی فرم‌ها مناسب نیست و لذا با استفاده از صفت value می‌توانیم این متن را تغییر دهیم.
• image: این مقدار باعث ایجاد یک دکمه‌ی تأیید گرافیکی می‌شود و به عبارتی، ورژن گرافیکی کنترل submit محسوب می‌شود. اگر بخواهیم از یک عکس به عنوان یک دکمه‌ی submit استفاده کنیم، باید مقدار صفت type یک عنصر input را برابر با image قرار دهیم و البته نیاز داریم که صفات width و height و src و alt را که قبلاً توضیح داده شده‌اند، با مقادیرمناسب تنظیم کنیم. اما بدیهی است که این کنترل نیازی به صفت value ندارد.
• button: از این مقدار نیز برای ایجاد دکمه‌های ساده ای استفاده می‌شود که در حالت عادی، کلیک روی آنها با اتفاقی همراه نیست و تعیین رفتار برای این دکمه‌ها نیاز به کدنویسی جاوااسکریپت دارد. البته یک کنترل button در یک صورت نقشی مشابه کنترل‌های submit خوهد داشت و این امر زمانی اتفاق می‌افتد که فقط یک دکمه از نوع button درون یک فرم قرار داشته باشد. البته برای ایجاد دکمه‌های ساده و سفارشی، عنصری با نام button نیز قابل استفاده است که اتفاقاً به خاطر مزایایی مانند امکان استفاده از عکس یا هر محتوای HTML دیگر به جای متن برچسب، به عنصر <input type=”button”> برتری دارد.
• reset: استفاده از عنصر input با مقدار reset برای صفت type باعث نمایش دکمه‌ای می‌شود که کاربر می‌تواند با کلیک روی آن، مقادیر وارد شده در فیلدهای فرم را پاک کرده و مجدداً از مقدار اولیه‌ی آنها استفاده کند. توصیه می‌کنم از کنترل reset در فرم‌های خود استفاده نکنید چون در صورتی که کاربر ناخواسته روی آن کلیک کند، اطلاعات فرم پاک خواهند شد و این دکمه‌ها واقعاً به‌ندرت مفید واقع می‌شوند.

در مورد مقادیر submit و image که هر دو منجر به ایجاد دکمه‌هایی برای تأیید و ارسال داده‌های فرم می‌شوند، صفت‌های formaction، formmethod، formenctype، formtarget و fornovalidate نیز قابل استفاده هستند که اگر دقت کنید، در خواهید یافت که نام آنها از افزودن عبارت form به صفت‌های action و method و سایر صفت‌های مربوط به عنصر form ساخته می‌شود. این صفت‌ها دقیقاً همان نقشی را دارند که صفت‌های مذکور برای عنصر form دارند و مقادیر دریافتی آنها نیز با آن صفت‌ها یکی است اما هر یک از این صفت‌ها نسبت به صفت معادل خود برای عنصر form دارای اولویت بالاتری است و لذا می‌تواند آن صفت را لغو (override) کند. به عنوان نمونه، صفت formaction مربوط به یک کنترل submit که به یک فرم تعلق دارد، نسبت به صفت action تنظیم‌شده برای آن فرم از اولویت بالاتری برخوردار است.

HTML

<form action="#">
  <label for="id">User ID:</label>
  <input type="text" id="id" name="id">
  <input type="reset" value="Reset">
  <input type="submit" value="Submit">
  <input type="image" src="#" alt="alternative text">
</form>

بسیار خوب، کار بررسی عنصر input و انواع کنترل‌های قابل ایجاد با استفاده از این عنصر فرزند form در اینجا به پایان می‌رسد. عنصر input قطعاً مهم‌ترین و پرکاربردترین عنصر فرزند form محسوب می‌شود اما عنصر form فرزندان دیگری هم دارد که برای ایجاد انواع دیگری از کنترل‌ها کاربرد دارند. در ادامه، سایر عناصر فرزند form را معرفی و بررسی می‌کنیم.