ویجت های Native فرم در HTML — راهنمای کاربردی

در این بخش از سری مقالات آموزش HTML به بررسی دقیق کارکرد ویجت‌های مختلف فرم می‌پردازیم و گزینه‌هایی که برای گردآوری انواع داده‌ها وجود دارند را مورد بررسی قرار می‌دهیم. این راهنما به نوعی یک راهنمای جامع است و همه ویجت های نیتیو فرم را شامل می‌شود.

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

• ساختاردهی فرم‌های HTML — راهنمای جامع

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

خصوصیت‌های مشترک

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

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

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

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

نکته: فیلدهای متنی HTML کنترل‌های ورود متن ساده‌ای هستند. این بدان معنی است که نمی‌توان از آن‌ها برای انجام عملیات «ویرایش کامل» (حروف درشت، ایتالیک و غیره) استفاده کرد. همه ویرایشگرهای rich text که در صفحه‌های وب می‌بینید، ویجت‌های سفارشی هستند که با استفاده از HTML ،CSS و JavaScript ساخته شده‌اند.

همه فیلدهای متنی برخی رفتارهای مشترک دارند:

• آن‌ها می‌توانند به صورت readonly علامت‌گذاری (کاربر نمی‌تواند مقدار ورودی را تغییر دهد) یا حتی غیر فعال (disabled) شوند، یعنی مقدار ورودی هرگز به همراه بقیه داده‌های فرم ارسال نمی‌شود.
• این ویجت‌ها یک placeholder دارند. placeholder متنی است که درون کادر ورود متن ظاهر می‌شود و هدف از آن کادر را به اختصار شرح می‌دهد.
• ویجت‌ها می‌توانند اندازه محدودی داشته باشند (اندازه فیزیکی کادر). همچنین می‌توان طول (تعداد بیشینه کاراکترهایی که می‌توان در کادر وارد کرد) را محدود ساخت.
• این ویجت‌ها می‌توانند در صورت پشتیبانی مرورگر، از امکان غلط‌یاب املایی بهره بگیرند.

نکته: عنصر <input> یک ویجت خاص است، زیرا می‌تواند تقریباً هر چیزی باشد. با تعیین خصوصیت Type می‌توان در آن تغییرات زیادی ایجاد کرد. از آن برای ایجاد اغلب انواع ویجت‌ها شامل فیلدهای متنی تم خطی، کنترل‌های بدون ورود متن، کنترل‌های زمان و تاریخ، و دکمه‌ها استفاده می‌شود. با این وجود، برخی استثناها نیز وجود دارند مثلاً <textarea> برای ورودی متن چندخطی استفاده می‌شود. در زمان مطالعه این مقاله به این موارد توجه ویژه‌ای داشته باشید.

فیلدهای متنی تک خطی

فیلد متنی تک‌خطی با استفاده از عنصر <input> ساخته می‌شود که مقدار خصوصیت Type آن به صورت text تنظیم شده است. البته اگر مقداری نیز برای این خصوصیت تعیین نکرده باشید، مقدار پیش‌فرض همان text است. مقدار text برای این خصوصیت در مواردی که مقدار تعیین‌شده این خصوصیت برای مرورگر ناشناس باشد، به عنوان یک مقدار fallback نیز عمل می‌کند. برای نمونه اگر مقدار "type="date وارد کرده باشید و مرورگر از ابزارهای انتخاب تاریخ داخلی پشتیبانی نکند به صورت پیش‌فرض به حالت فوق در می‌آید.

در ادامه نمونه‌ای از این فیلد متنی تک‌خطی را مشاهده می‌کنید:

1<input type="text" id="comment" name="comment" value="I'm a text field">

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

در HTML5 فیلدهای متنی تک‌خطی ابتدایی با افزودن مقادیر خاصی برای خصوصیت type بهبود یافته‌اند. این مقادیر یک عنصر <input> را همچنان به یک فیلد متنی تک‌خطی تبدیل می‌کنند، اما چند قید و قابلیت اضافی نیز به این فیلد اضافه می‌کنند.

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

این نوع از فیلد به همراه مقدار email برای خصوصیت type تنظیم می‌شود:

1<input type="email" id="email" name="email" multiple>

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

همچنین با گنجاندن خصوصیت multiple می‌توان به کاربر امکان وارد کردن چند نشانی ایمیل (جداشده با کاما) در یک ورودی منفرد را داد. روی برخی دستگاه‌ها (به خصوص موبایل) هنگام تپ کردن روی این ویجت می‌توان یک کیبورد مجزا باز کرد که برای وارد کردن ایمیل مناسب‌تر باشد.

فیلد رمز عبور

این نوع از فیلد با استفاده از تعیین مقدار password برای خصوصیت type تنظیم می‌شود:

1<input type="password" id="pwd" name="pwd">

این فیلد هیچ قید خاصی برای متن وارد شده اضافه نمی‌کند، اما مقدار وارد شده در فیلد را با استفاده از ستاره یا نقطه مبهم می‌سازد تا از سوی افراد دیگر قابل خواندن نباشد.

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

مرورگرهای مدرن تبعات امنیتی ارسال داده‌های فرم روی یک اتصال غیر امن را تشخیص می‌دهند و هشدارهایی ارائه می‌کند تا کاربران را از استفاده از فرم‌های ناامن باز دارند. برای کسب اطلاعات بیشتر در مورد پیاده‌سازی‌های این موارد در فایرفاکس به صفحه «رمزهای عبور ناامن» (+) مراجعه کنید.

فیلد جستجو

این نوع از فیلد با استفاده از مقدار search برای خصوصیت type تنظیم می‌شود:

1<input type="search" id="search" name="search">

تفاوت اصلی بین یک فیلد متنی و یک فیلد جستجو در شیوه استایل‌بندی آن از سوی مرورگر است. فیلدهای جستجو در اغلب موارد با استفاده از گوشه‌های گرد رندر می‌شوند و یا یک کاراکتر × در انتهای آن وجود دارد که با کلیک روی آن می‌توان مقدار وارد شده را پاک کرد. با این وجود، قابلیت اضافی دیگری نیز وجود دارد که لازم به ذکر است، در فیلدهای جستجو می‌توان مقادیر را به صورت خودکار ذخیره کرد تا روی صفحه‌های مختلف از یک وب‌سایت به صورت «تکمیل خودکار» (auto completed) عرضه شوند.

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

این نوع از فیلد با استفاده از تعیین مقدار tel برای خصوصیت type به دست می‌آید:

1<input type="tel" id="tel" name="tel">

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

فیلد URL

این نوع از فیلد با استفاده از مقدار url برای خصوصیت type تعیین می‌شود:

1<input type="url" id="url" name="url">

بدین ترتیب قیدهای اعتبارسنجی خاصی روی فیلد اعمال می‌شود و در صورتی که URL-های نامعتبری وارد شوند، مرورگر خطا گزارش می‌کند.

نکته: به صرف اینکه یک URL ساختار درستی دارد، به این معنی نیست که حتماً به مکانی که قطعاً وجود دارد اشاره می‌کند.

نکته: فیلدهایی که قیدهای خاصی دارند، زمانی که خطا داشته باشد از ارسال فرم جلوگیری می‌کنند، به علاوه می‌توانند طوری استایل‌بندی شوند که خطا را واضح‌تر نمایش دهند. این مسئله را در ادامه این سری مقاله‌ها و در مقاله‌ای با عنوان «اعتبارسنجی فرم داده‌ها» بیشتر مورد بررسی قرار می‌دهیم.

فیلدهای متنی چندخطی

یک فیلد متنی چندخطی فیلدی است که به جای استفاده از عنصر <element> با استفاده از عنصر <textarea> تعیین شده است.

1<textarea cols="30" rows="10"></textarea>

تفاوت اصلی بین یک textarea و یک فیلد متنی تک‌خطی این است که کاربران می‌توانند متنی وارد کنند که در آن متن به چند خط شکسته شده باشد.

نکته: در اغلب موارد فیلدهای متنی چندخطی در مرورگرهای مختلف دارای یک دستگیره کشیدن در گوشه راست-پایین هستند که به کاربر امکان می‌دهد اندازه آن را تغییر دهد. این توانایی تغییر دادن اندازه را می‌توان با تعیین خصوصیت resize به صورت none در CSS غیر فعال کرد.

<textarea> چند خصوصیت دیگر نیز می‌پذیرد که شیوه رندر شدن آن را در چند خط کنترل می‌کند:

خصوصیت‌های عنصر <textarea>

توجه کنید که عنصر <textarea> کمی متفاوت‌تر از عنصر <input> نوشته می‌شود. عنصر <input> یک عنصر خالی است، یعنی نمی‌تواند شامل هیچ عنصر فرزند باشد و از سوی دیگر عنصر <textarea> یک عنصر معمولی است که می‌تواند شامل فرزندان با محتوای متنی باشد.

دو نکته کلیدی مرتبط در اینجا وجود دارند که باید مورد اشاره قرار گیرند:

• اگر می‌خواهید یک مقدار عددی برای یک عنصر <input> تعریف کنید، باید از خصوصیت value استفاده کنید. در سوی دیگر، برای یک عنصر <textarea> باید متن پیش‌فرض بین تگ آغازین و پایانی تگ <textarea> قرار گیرد.
• عنصر <textarea> به دلیل ماهیت خود تنها محتوای متنی می‌پذیرد و این بدان معنی است که هر نوع محتوای HTML درون <textarea> به صورت محتوای متنی ساده رندر خواهد شد.

محتوای بازشدنی

ویجت «بازشدنی» (Drop-down) روشی ساده است که به کاربران امکان می‌دهد یکی از گزینه‌های فراوان را بدون اشغال فضای زیاد در رابط کاربری انتخاب کنند. HTML دو شکل از محتوای بازشدنی دارد که یکی «کادر انتخاب» (select box) و دیگری «کادر تکمیل خودکار» (autocomplete box) است. در هر دو حالت شیوه تعامل یکسان است. زمانی که کنترل فعال می‌شود، مرورگر لیستی از مقادیر را نمایش می‌دهد که کاربر می‌تواند از بین آن‌ها انتخاب کند.

کادر انتخاب

کادر انتخاب به وسیله یک عنصر <select> با یک یا دو عنصر <option> به عنوان فرزند ایجاد می‌شود که هر کدام از آن‌ها یکی از مقادیر ممکن را تعیین می‌کنند.

1<select id="simple" name="simple">
2  <option>Banana</option>
3  <option>Cherry</option>
4  <option>Lemon</option>
5</select>

اگر مقدار پیش‌فرض برای یک کادر انتخاب الزامی باشد، می‌توان با استفاده از خصوصیت selected روی عنصر <option> مطلوب آن را تعیین کرد. بدین ترتیب در زمان بارگذاری صفحه، این گزینه از قبل انتخاب شده است. عناصر <option> می‌توانند درون عناصر <optgroup> نیز به صورت تو در تو تعریف شوند تا به لحاظ بصری گروه‌هایی از مقادیر را تشکیل دهند:

1<select id="groups" name="groups">
2  <optgroup label="fruits">
3    <option>Banana</option>
4    <option selected>Cherry</option>
5    <option>Lemon</option>
6  </optgroup>
7  <optgroup label="vegetables">
8    <option>Carrot</option>
9    <option>Eggplant</option>
10    <option>Potato</option>
11  </optgroup>
12</select>

اگر یک عنصر <option> با استفاده از یک خصوصیت value تنظیم شده باشد، این مقدار خصوصیت زمانی که فرم تحویل می‌شود ارسال خواهد شد. اگر خصوصیت value نادیده گرفته شود، محتوای عنصر <option> به عنوان مقدار کادر انتخاب مورد استفاده قرار می‌گیرد.

روی عنصر <optgroup>، خصوصیت label پیش از مقادیر نمایش پیدا می‌کند، اما حتی اگر ظاهر آن تا حدودی شبیه یک گزینه باشد در عمل غیر قابل انتخاب است.

کادر انتخاب چند گزینه‌ای

هر کادر انتخاب به صورت پیش‌فرض امکان انتخاب یک مقدار منفرد را به کاربر می‌دهد. با افزودن خصوصیت multiple به عنصر <select> می‌توان امکان انتخاب چند مقدار را به کاربر داد. در این حالت از سازوکار پیش‌فرض سیستم عامل استفاده می‌شود. یعنی کاربر باید کلیدهای cmd (در مک) یا Ctrl (در ویندوز) را برای کلیک و انتخاب چند مورد نگه دارد.

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

1<select multiple id="multi" name="multi">
2  <option>Banana</option>
3  <option>Cherry</option>
4  <option>Lemon</option>
5</select>

نکته: همه مرورگرها از عنصر <select> پشتیبانی می‌کنند و همچنین همه آن‌ها از خصوصیت multiple نیز روی آن پشتیبانی می‌کنند.

کادر تکمیل خودکار

می‌توان مقادیر پیشنهاد شده با تکمیل خودکار را در ویجت‌هایی که از عنصر <datalist> استفاده می‌کنند ارائه کرد و مقادیری که قرار است نمایش پیدا کنند نیز با استفاده از عناصر <option> تعیین می‌شوند.

در این حالت لیست داده‌ها محدود به فیلد متنی (به طور معمول عنصر <input>) با استفاده از خصوصیت list خواهد بود.

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

1<label for="myFruit">What's your favorite fruit?</label>
2<input type="text" name="myFruit" id="myFruit" list="mySuggestion">
3<datalist id="mySuggestion">
4  <option>Apple</option>
5  <option>Banana</option>
6  <option>Blackberry</option>
7  <option>Blueberry</option>
8  <option>Lemon</option>
9  <option>Lychee</option>
10  <option>Peach</option>
11  <option>Pear</option>
12</datalist>

نکته: بر اساس مشخصات HTML (+)، خصوصیت list و عنصر <datalist> را می‌توان به همراه هر نوع از ویجت که نیازمند ورودی کاربر است استفاده کرد. با این حال مشخص نیست که طرز کار آن با کنترل‌هایی به جز متن (برای مثال با رنگ) چگونه می‌تواند باشد و مرورگرهای مختلف نیز بسته به مورد رفتار متفاوتی نشان می‌دهند. به همین دلیل در هنگام استفاده از این قابلیت روی هر چیزی به جز فیلدهای متنی هوشیار باشید.

پشتیبانی از datalist و fallback

عنصر <datalist> یکی از جدیدترین امکانات فرم‌های HTML است، از این رو پشتیبانی مرورگر آن نسبت به آن چه تاکنون بررسی کردیم، تا حدودی محدودتر است. برای مثال IE10 و نسخه‌های قبل آن و همچنین سافاری در زمان نگارش این مقاله هنوز از آن پشتیبانی نمی‌کرده‌اند.

برای رفع این مشکل، ترفند کوچکی را معرفی می‌کنیم که می‌توانید به وسیله آن روی این مرورگرها fallback تعریف کنید:

1<label for="myFruit">What is your favorite fruit? (With fallback)</label>
2<input type="text" id="myFruit" name="fruit" list="fruitList">
3    
4<datalist id="fruitList">
5  <label for="suggestion">or pick a fruit</label>
6  <select id="suggestion" name="altFruit">
7    <option>Apple</option>
8    <option>Banana</option>
9    <option>Blackberry</option>
10    <option>Blueberry</option>
11    <option>Lemon</option>
12    <option>Lychee</option>
13    <option>Peach</option>
14    <option>Pear</option>
15  </select>
16</datalist>

مرورگرهایی که از عنصر <datalist> پشتیبانی می‌کنند همه عناصری را که عناصر <option> نیستند نادیده گرفته و مطابق انتظار عمل خواهند کرد. از سوی دیگر، مرورگرهایی که از عنصر پشتیبانی نمی‌کنند، برچسب و کار انتخاب را نمایش خواهند داد. البته روش‌های دیگری نیز برای مدیریت فقدان پشتیبانی برای عنصر <datalist> وجود دارد، اما این ساده‌ترین روش است، چون روش‌های دیگر نیازمند استفاده از جاوا اسکریپت هستند.

آیتم‌های قابل بررسی

«آیتم‌های قابل بررسی» (Checkable items) ویجت‌هایی هستند که حالت آن‌ها را می‌توان با کلیک کردن رویشان تغییر داد. دو نوع از آیتم قابل بررسی وجود دارند: کادر بررسی و دکمه‌های رادیویی. هر دو این آیتم‌ها از خصوصیت checked استفاده می‌کنند تا نشان دهند که ویجت به صورت پیش‌فرض تیک خورده است یا نه.

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

برای این که بالاترین سطح از کاربردپذیری/دسترس‌پذیری را داشته باشیم، بهتر است هر لیست از آیتم‌های مرتبط را در یک <fieldset> قرار دهیم و به همراه آن یک <legend> نیز عرضه کنیم که توضیحی کلی در مورد لیست ارائه می‌کند. هر جفت منفرد از عناصر <label>/<input> باید در آیتم لیست مخصوص خود قرار گیرد. در ادامه این موضوع را با طرح مثال‌هایی بیشتر روشن می‌سازیم.

همچنین در صورتی که می‌خواهید این کنترل‌ها معنادار باشند، باید مقادیری برای این نوع از ورودی‌ها درون خصوصیت value ارائه کنید. در صورتی که مقداری ارائه نشده باشد، کادرهای بررسی و دکمه‌های رادیویی مقدار on خواهند داشت.

کادر بررسی

یک کادر بررسی یا چک باکس با استفاده از عنصر <input> به همراه خصوصیت type آن مقداری برابر با checkbox خواهد داشت.

1<input type="checkbox" checked id="carrots" name="carrots" value="carrots">

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

دکمه رادیویی

دکمه رادیویی با استفاده از عنصر <element> به همراه تعیین مقدار radio برای خصوصیت type به دست می‌آید.

1<input type="radio" checked id="soup" name="meal">

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

1<fieldset>
2  <legend>What is your favorite meal?</legend>
3  <ul>
4    <li>
5      <label for="soup">Soup</label>
6      <input type="radio" checked id="soup" name="meal" value="soup">
7    </li>
8    <li>
9      <label for="curry">Curry</label>
10      <input type="radio" id="curry" name="meal" value="curry">
11    </li>
12    <li>
13      <label for="pizza">Pizza</label>
14      <input type="radio" id="pizza" name="meal" value="pizza">
15    </li>
16  </ul>
17</fieldset>

دکمه‌ها

درون فرم‌های HTML سه نوع دکمه وجود دارد:

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

• Submit: این نوع دکمه داده‌ها را به سرور ارسال می‌کند. در مورد عناصر <button> وارد نکردن خصوصیت type (یا مقدار نامعتبر type) موجب می‌شود به دکمه submit تبدیل شوند.
• Reset: این نوع دکمه همه ویجت‌های فرم را به مقادیر پیش‌فرضشان ریست می‌کند.
• Anonymous: این نوع دکمه‌ها هیچ جلوه اتوماتیک ندارند، اما می‌توانند با استفاده از کد جاوا اسکریپت سفارشی‌سازی شوند.

هر دکمه‌ای با استفاده از عنصر <button> یا عنصر <input> ایجاد می‌شود. این مقدار خصوصیت type است که نوع خاص دکمه نمایش یافته را تعیین می‌کند.

submit

1<button type="submit">
2    This a <br><strong>submit button</strong>
3</button>
4
5<input type="submit" value="This is a submit button">

resetSection

1<button type="reset">
2    This a <br><strong>reset button</strong>
3</button>
4
5<input type="reset" value="This is a reset button">

anonymousSection

1<button type="button">
2    This an <br><strong>anonymous button</strong>
3</button>
4
5<input type="button" value="This is an anonymous button">

دکمه‌ها همواره رفتار یکسانی دارند، چه از یک عنصر <button> استفاده کنید و چه از عنصر <input> بهره بگیرید. با این حال برخی تفاوت‌های قابل توجه وجود دارند:

• چنان که در مثال‌های فوق می‌بینید، عناصر <button> امکان استفاده از محتوای HTML را در برچسب‌هایشان می‌دهند که درون تگ‌های آغازین و پایانی <button> درج می‌شود. در سوی دیگر عناصر <input> عناصری خالی محسوب می‌شوند و برچسب‌هایشان درون خصوصیت‌های value درج می‌شود، لذا تنها محتوای متنی ساده می‌پذیرند.
• در عناصر <button> امکان تعیین مقداری متفاوت از برچسب دکمه وجود دارد و این مقدار متفاوت در خصوصیت value قرار می‌گیرد. البته این وضعیت در نسخه‌های اینترنت اکسپلورر قبل از IE 8 پایدار نیست.

به بیان فنی تقریباً هیچ تفاوتی بین یک دکمه که با عنصر <button> تعریف شده و دکمه‌ای که با عنصر <input> تعریف شده وجود ندارد. تنها تفاوت قابل توجه در برچسب خود دکمه است. درون یک عنصر <input> برچسب می‌تواند داده‌های کاراکتری باشد، در حالی که در عنصر <button> برچسب می‌تواند محتوای HTML باشد و از این رو می‌تواند استایل‌دهی شود.

ویجت‌های پیشرفته فرم

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

فیلم آموزش طراحی وب با HTML اچ تی ام ال – تکمیلی در فرادرس

کلیک کنید

اعداد

ویجت‌هایی که برای وارد کردن عدد استفاده می‌شوند با استفاده از عنصر <input> ایجاد می‌شوند و خصوصیت type آن نیز روی مقدار number قرار می‌گیرد. این کنترل ظاهری شبیه به یک فیلد متنی دارد، اما تنها امکان وارد کردن اعداد اعشاری را به کاربر می‌دهد و دکمه‌هایی برای افزایش یا کاهش مقدار ویجت ارائه می‌کند.

در این ویجت امکان اجرای کارهای زیر وجود دارد:

• تعیین محدودیت بر اساس تنظیم خصوصیت‌های min و max
• تعیین مقداری برای خصوصیت step که دکمه‌های افزایش و کاهش ویجت به آن میزان عدد درون فیلد را تغییر می‌دهند.

مثال

1<input type="number" name="age" id="age" min="1" max="10" step="2">

بدین ترتیب ویجتی ایجاد می‌کنیم که مقدار آن محدود به هر مقداری بین 1 و 100 است و دکمه‌های افزایش و کاهش آن مقدارش را 2 واحد تغییر می‌دهند.

ورودی‌های number در نسخه‌های 10 و پایین‌تر از اینترنت اکسپلورر پشتیبانی نمی‌شوند.

Slider

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

اسلایدر با استفاده از تعیین مقدار range برای خصوصیت type عنصر <input> به دست می‌آید. پیکربندی صحیح اسلایدر حائز اهمیت بالایی است. به این منظور قویاً توصیه می‌شود که خصوصیت‌های min، max و step تعیین شوند.

مثال

1<input type="range" name="beans" id="beans" min="0" max="500" step="10">

این مثال یک اسلایدر می‌سازد که مقدار آن می‌تواند در بازه‌ای بین 0 و 500 تغییر پیدا کند و دکمه‌های افزایش/کاهش مقدار را به میزان 10+ و 10- تغییر می‌دهند.

یک مشکل اسلایدرها این است که هیچ نوع بازخورد بصری در مورد این که اسلایدر اکنون روی چه میزانی قرار دارد ارائه نمی‌کنند. شما باید خودتان با استفاده از جاوا اسکریپت این امکان را فراهم بسازید، اما اجرای آن هم چندان دشوار نیست. در این مثال ما یک عنصر خالی <span> اضافه می‌کنیم که در آن مقدار کنونی اسلایدر را نمایش داده و به محض تغییر آن را به‌روزرسانی می‌کنیم.

1<label for="beans">How many beans can you eat?</label>
2<input type="range" name="beans" id="beans" min="0" max="500" step="10">
3<span class="beancount"></span>

این مثال را می‌توان با استفاده از نوعی کد جاوا اسکریپت ساده پیاده‌سازی کرد:

1var beans = document.querySelector('#beans');
2var count = document.querySelector('.beancount');
3
4count.textContent = beans.value;
5
6beans.oninput = function() {
7  count.textContent = beans.value;
8}

در این مثال ارجاعی به ورودی بازه و span در دو متغیر ذخیره می‌کنیم و سپس بی‌درنگ textContent این span را روی value کنونی ورودی تنظیم می‌کنیم. در نهایت یک دستگیره رویداد oninput تنظیم می‌کنیم به طوری که هر بار اسلایدر جابجا می‌شود، textContent این span به مقدار ورودی جدید به‌روزرسانی شود.

ورودی‌های range در اینترنت اکسپلورر نسخه‌های زیر 10 پشتیبانی نمی‌شوند.

انتخاب‌گر تاریخ و زمان

گردآوری مقادیر تاریخ و زمان به طور سنتی یک کابوس برای توسعه‌دهنده‌های وب محسوب می‌شد. HTML5 برخی بهبودها در این زمینه ارائه کرد و کنترل‌های خاصی برای مدیریت این نوع خاص از داده‌ها عرضه کرده است.

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

datetime-local

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

1<input type="datetime-local" name="datetime" id="datetime">

Month

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

1<input type="month" name="month" id="month">

Time

این مقدار یک ویجت ایجاد می‌کند که با استفاده از آن می‌توان زمانی را انتخاب کرد.

1<input type="time" name="time" id="time">

Week

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

1<input type="week" name="week" id="week">

همه کنترل‌های تاریخ و زمان می‌توانند با استفاده از خصوصیت‌های min و max محدود شوند.

1<label for="myDate">When are you available this summer?</label>
2<input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate">

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

انتخاب‌گر رنگ

مدیریت رنگ در صفحه‌های وب همواره دشوار بوده است. روش‌های مختلفی برای نمایش آن‌ها وجود دارد که شامل مقادیر RGB (ده‌دهی یا هگزادسیمال)، مقادیر HSL، کلیدواژه و غیره است. ویجت رنگ به کاربر امکان انتخاب رنگ را به روش متنی و همچنین بصری می‌دهد. ویجت رنگ با استفاده از تعیین مقدار color برای خصوصیت type عنصر <input> به دست می‌آید.

1<input type="color" name="color" id="color">

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

ویجت‌های دیگر

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

انتخاب‌گر فایل

فرم‌های HTML5 می‌توانند فایل‌ها را به یک سرور ارسال کنند. ویجت انتخاب‌گر فایل روش انتخاب یک یا چند فایل برای ارسال را مدیریت می‌کند.

برای ایجاد ویجت انتخاب‌گر فایل، می‌توانید با تعیین مقدار file برای خصوصیت type عنصر <input> استفاده کنید. نوع فایل‌هایی که قابل قبول هستند را می‌توان با استفاده از خصوصیت accept تعیین کرد. به علاوه اگر می‌خواهید به کاربر امکان انتخاب بیش از یک فایل را نیز بدهید می‌توانید این کار را با افزودن خصوصیت multiple انجام دهید.

مثال

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

1<input type="file" name="file" id="file" accept="image/*" multiple>

محتوای پنهان

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

اگر چنین عنصری را ایجاد می‌کنید، لازم است که خصوصیت‌های name و value را تعیین کنید:

1<input type="hidden" id="timestamp" name="timestamp" value="1286705410">

دکمه تصویر

کنترل «دکمه تصویر» (image button) کنترلی است که دقیقاً مانند یک عنصر <img> نمایش پیدا می‌کند به جز این که وقتی کاربر روی آن کلیک بکند، رفتاری مانند دکمه تحویل فرم دارد.

دکمه تصویر با استفاده از تعیین مقدار image برای خصوصیت type عنصر <input> به دست می‌آید. این عنصر دقیقاً از همان مجموعه خصوصیات عنصر <img> به علاوه همه خصوصیت‌های مورد پشتیبانی از سوی دکمه‌های فرم دیگر پشتیبانی می‌کند:

1<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />

اگر دکمه تصویر برای تحویل فرم استفاده شود، این ویجت مقدار خودش را ارائه نمی‌کند، بلکه به جای آن مختصات X و Y نقطه کلیک روی تصویر ارائه می‌شود. توجه کنید که مختصات بر اساس تصویر، نسبی هستند، یعنی گوشه بالا-چپ تصویر مختصات 0 و 0 را دارد. این مختصات به صورت جفت کلید/مقدر ارسال می‌شود:

• کلید مقدار X مقدار خصوصیت name است که پس از رشته x. می‌آید.
• کلید مقدار Y مقدار خصوصیت name است که پس از رشته y. می‌آید.

بنابراین برای نمونه زمانی که روی تصویر این ویجت کلیک می‌کنید، یک URL مانند زیر ارسال می‌شود:

1http://foo.com?pos.x=123&pos.y=456

این یک روش کاملاً آسان برای ساخت یک hot map است.

متر و نوارهای پیشروی

مترها و نوارهای پیشروی بازنمایی‌های بصری از مقادیر عددی محسوب می‌شوند.

پیشروی

نوار پیشروی مقداری است که در طی زمان تا رسیدن به یک حد بیشینه تعیین شده در خصوصیت max تغییر پیدا می‌کند. چنین نواری با استفاده از عنصر <progress> ایجاد می‌شود.

1<progress max="100" value="75">75/100</progress>

از این نوار برای پیاده‌سازی هر چیزی که نیازمند گزارش پیشروی است، مانند درصد کل فایل‌های دانلود شده یا تعداد سؤال‌هایی که در یک پرسشنامه پاسخ داده شده‌اند، استفاده می‌شود.

محتوای درون عنصر <progress> یک fallback برای مرورگرهایی است که از این عنصر پشتیبانی نمی‌کنند و از فناوری‌های حمایتی برای بیان صوتی آن استفاده می‌شود.

متر

«نوار متر» (Meter Bar) نماینده یک مقدار ثابت دریک بازه است که به وسیله مقدار min و max نمایش پیدا می‌کند. این مقدار از نظر بصری به صورت یک نوار نمایش پیدا می‌کند و برای این که بدانید این نوار چگونه به نظر می‌رسد، مقدار آن را با برخی مقادیر تعیین شده دیگر مقایسه می‌کنیم:

• مقادیر low و high بازه را به سه بخش تقسیم می‌کنند:
  • بخش تحتانی بازه بین مقادیر min و low قرار دارد (که شامل آن مقادیر است).
  • بخش میانی بازه بین مقادیر low و high است (آن مقادیر را ندارد).
  • بخش فوقانی بازه بین مقادیر high و max است (شامل آن مقادیر است).
• مقدار بهینه (optimum) در واقع بهینه‌ترین مقدار را برای عنصر <meter> تعریف می‌کند. این مقدار به همراه مقدار low و high بخشی از بازه را تعریف می‌کند که ارجحیت دارد:
  • اگر مقدار optimum در بخش تختانی بازه باشد، بازه تحتانی به عنوان بخش ترجیحی تصور می‌شود، بازه میانی بخش میانگین و بازه فوقانی به عنوان بدترین بخش در نظر گرفته می‌شود.
  • اگر مقدار optimum در بخش مبانی باشد، بخش تختانی به عنوان بخش میانگین تصور می‌شود، بخش میانی به عنوان بخش ارجح تلقی می‌شود و بخش فوقانی نیز میانگین در نظر گرفته می‌شود.
  • اگر مقدار optimum در بخش فوقانی بازه باشد، بازه تحتانی به عنوان بدترین بخش نگریسته می‌شود، بخش میانی میانگین خواهد بود و بخش فوقانی دارای بالاترین ارجحیت تصور می‌شود.

همه مرورگرهایی که عنصر <meter> را پیاده‌سازی کرده‌اند، از مقادیر زیر برای تغییر رنگ نوار متر استفاده می‌کنند:

• اگر مقدار کنونی در بخش ارجح باشد، نوار سبز رنگ است.
• اگر مقدار کنونی در بخش میانگین باشد، نوار زرد رنگ است.
• اگر مقدار کنونی در بدترین بخش باشد، نوار قرمز رنگ است.

چنین نواری با استفاده از عنصر <meter> ساخته می‌شود. این عنصر می‌تواند برای پیاده‌سازی هر نوع متر مورد استفاده قرار گیرد. برای نمونه می‌توان نواری ساخت که فضای کل مصرف شده دیسک را نمایش می‌دهد و زمانی که نزدیک پر شدن دیسک است قرمز می‌شود.

1<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>

محتوای درون عنصر <meter> یک fallback برای مرورگرهایی است که از این عنصر پشتیبانی نمی‌کنند و به فناوری‌های حمایتی برای بیان صوتی آن کمک می‌کند.

پشتیبانی از عناصر پیشروی و متر نسبتاً مناسب است، هر چند اینترنت اکسپلورر از آن پشتیبانی نمی‌کند اما مرورگرهای دیگر از آن به طور کامل پشتیبانی می‌کنند.

سخن پایانی

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

فیلم مجموعه آموزش طراحی سایت با HTML و CSS – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

برای مطالعه قسمت بعدی این مجموعه مطلب می‌توانید روی لینک زیر کلیک کنید:

• ارسال داده های فرم در HTML — راهنمای جامع

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های طراحی سایت با HTML و CSS
• آموزش پروژه محور HTML و CSS
• مجموعه آموزش‌های برنامه‌‌نویسی
• ۵ گام برای درک کدهای پایه HTML – آموزش مقدماتی
• سند و ساختار وب سایت در HTML — راهنمای کاربردی

==