آموزش HTML : فرمها و دکمهها در HTML
فرمها و دکمههای HTML ابزارهای قدرتمندی برای تعامل با کاربران وبسایت هستند. معمولاً، آنها کنترلهایی را در اختیار کاربران قرار میدهند تا در صورت نیاز، رابط کاربری (UI) را دستکاری کنند یا دادهها را وارد کنند.
در این مقاله، مقدمهای بر اصول اولیه فرمها و دکمهها ارائه میدهیم. چیزهای بیشتری برای دانستن وجود دارد - بسیاری از انواع ورودیها و ویژگیهای فرم ذکر نشدهاند - اما این مقاله پایه محکمی برای اکثر موارد به شما میدهد. میتوانید کاربردهای پیشرفته یا تخصصی را بر اساس نیاز به عنوان بخشی از یادگیری مداومی که در طول حرفه خود انجام خواهید داد، بیاموزید.
تا اینجای دوره، شما چند روش تعامل کاربران با وب را دیدهاید:
از لینکها میتوان برای پیمایش به بخشهای مختلف محتوا، چه در همان صفحه و چه در صفحهای متفاوت، استفاده کرد.
عناصر و عموماً دارای کنترلهایی مانند پخش/مکث، جلو بردن سریع، عقب بردن و غیره هستند که به کاربران امکان میدهند محتوای رسانه را به دلخواه خود مصرف کنند.
با این حال، این ویژگیها تمایل دارند تعاملات یک طرفه را تسهیل کنند، به طوری که کاربران به صورت غیرفعال محتوا را مصرف میکنند. این خوب است، اما وب یک تجربه دو طرفه است. کاربران وبسایت ترجیحات خود را برای نحوه تجربه محتوا و خدمات تعیین میکنند. آنها تاکسی سفارش میدهند و درخواست تماس مجدد میکنند. آنها بازخورد ارائه میدهند و شکایت میکنند. آنها محصولات را میخرند و آنها را درب منزل خود تحویل میگیرند.
برای ارائه این تجربه دو طرفه، باید از دکمهها و فرمها استفاده کنید.
دکمهها معمولاً با استفاده از عناصر در HTML ایجاد میشوند (همچنین گاهی اوقات با استفاده از عناصر با ویژگیهای نوع تنظیم شده روی مقداری مانند button یا submit ایجاد میشوند). این دکمههای فشاری همه منظوره هستند - میتوانید آنها را برای فعال کردن هر عملکردی که میخواهید، محدود به تخیل و مهارتهای کدنویسی خود، تنظیم کنید.
فرمها با استفاده از عناصری مانند و ایجاد میشوند. عناصر فرم میتوانند برای ایجاد کنترلهای پیچیدهتر از دکمههای ساده استفاده شوند - به عنوان مثال، یک منوی کشویی حاوی چندین گزینه که به شما امکان میدهد بین تمهای مختلف برای یک عنصر رابط کاربری انتخاب کنید.
با این حال، نکته مهم این است که آنها همچنین میتوانند برای ایجاد فرمهایی برای کاربران استفاده شوند تا هنگام نیاز به ارسال اطلاعات به سرور وبسایت، آنها را پر کنند. به سایتهای تجارت الکترونیک فکر کنید - وقتی میخواهید محصولی را برای خرید جستجو کنید، از یک فرم برای وارد کردن عبارات جستجو استفاده میکنید. وقتی میخواهید هزینه برخی از اقلام را پرداخت کنید و تحویل را نهایی کنید، از یک فرم برای وارد کردن آدرس پستی خود و فرم دیگری برای وارد کردن جزئیات کارت اعتباری خود استفاده میکنید.
ما در این مقاله عمدتاً بر روی این کاربرد - سنتیتر - عناصر فرم تمرکز خواهیم کرد. توجه داشته باشید که دکمهها معمولاً در داخل فرمها نیز برای ارسال دادههای وارد شده به سرور استفاده میشوند.
با کنار گذاشتن این نظریه مهم، بیایید به بررسی کد و نحوه پیادهسازی دکمهها و فرمها بپردازیم.
همانطور که در بالا اشاره شد، دکمهها چند کاربرد اصلی در وب دارند. اول از همه، آنها برای فعال کردن عملکرد استفاده میشوند که هنگام ایجاد کنترلهای رابط کاربری مفید است. سادهترین دکمه با استفاده از کد زیر پیادهسازی میشود:
متنی که بین تگهای <button></button> ظاهر میشود، درون دکمه رندر میشود و مرورگر به آن استایل اولیه میدهد تا به طور پیشفرض مانند یک دکمه به نظر برسد و رفتار کند. تا اینجا که خوب بوده است. با این حال، یک مشکل وجود دارد - دکمهی تکی ما به خودی خود هیچ کار مفیدی انجام نمیدهد. برای اینکه کاری مفید انجام دهد، باید آن را درون یک فرم قرار دهید (که بعداً به آن خواهیم پرداخت) یا مقداری جاوا اسکریپت اضافه کنید.
به عنوان مثال، اگر جاوا اسکریپت زیر را روی دکمهی بالا اعمال کنید نتیجه جالب خواهد بود:
فعلاً از شما انتظار نمیرود که نحوهی کار جاوا اسکریپت را بفهمید. در ادامهی دوره، اطلاعات بیشتری در مورد آن کسب خواهید کرد.
در بخش بعدی، نمایشی از دومین کاربرد اصلی دکمهها - ارسال فرمها - را مشاهده خواهید کرد.
یک فرم پایه شامل سه چیز است:
- یک عنصر که تمام محتوای فرم دیگر را در بر میگیرد. هر کنترل فرمی که درون تگهای قرار گیرد، بخشی از همان فرم است و دادههای آنها هنگام ارسال فرم گنجانده میشود.
- یک یا چند جفت که هر کدام شامل یک عنصر و یک عنصر کنترل فرم هستند (معمولاً یک عنصر ، اما انواع دیگری نیز وجود دارد، به عنوان مثال ):
عنصر کنترل فرم به کاربر اجازه میدهد تا برخی دادهها را انتخاب یا وارد کند، که هنگام ارسال فرم به سرور ارسال میشوند.
عنصر یک برچسب شناسایی مرتبط با کنترل فرم ارائه میدهد که دادههایی را که باید در آن وارد شود توصیف میکند.
- یک عنصر که برای ارسال فرم استفاده میشود.
بیایید به یک مثال پایه که شامل سه مورد فوق است، نگاهی بیندازیم. این فرم میتواند برای درخواست نام و ایمیل کاربر، ثبت نام آنها در خبرنامه استفاده شود (نگران نباشید - به هیچ سروری متصل نیست، بنابراین در حال حاضر کاری انجام نمیدهد).
مثال بالا را در محیط تست وارد کنید و ببینید چه شکلی میشود.
اگر بلافاصله روی «sign me up» کلیک کنید، به دلیل عدم ورود اطلاعات، خطای اعتبارسنجی مشاهده خواهید کرد. اگر فیلدها را با نام و آدرس ایمیل پر کنید و سپس روی «sign me up» کلیک کنید، پیام خطای ۴۰۴ را مشاهده خواهید کرد.
همانطور که قبلاً گفتیم، عنصر به عنوان پوشش بیرونی فرم عمل میکند و تمام کنترلهای فرم را درون خود گروهبندی میکند. وقتی فشرده میشود، تمام دادههای نمایش داده شده توسط کنترلهای فرم به سرور ارسال میشوند. عنصر میتواند ویژگیهای زیادی را بپذیرد، اما دو مورد از مهمترین آنها که در مثال خود گنجاندهایم، به شرح زیر است:
: شامل مسیری به صفحهای است که میخواهیم دادههای فرم ارسالی را برای پردازش به آن ارسال کنیم. بعداً، پس از ارسال فرم، خواهید دید که /submit_page در URL گنجانده شده است. همچنین یک پاسخ خطای ۴۰۴ دریافت خواهید کرد زیرا صفحه در واقع وجود ندارد، اما فعلاً مشکلی نیست.
: روش انتقال دادهای را که میخواهید برای ارسال دادههای فرم به سرور استفاده کنید، مشخص میکند. فعلاً زیاد نگران این موضوع نباشید؛ مقدار get باعث میشود دادهها به عنوان پارامترهایی که به انتهای URL متصل میشوند، ارسال شوند.
ویژگیهای action و method باعث میشوند دادههای فرم در یک URL با استفاده از خطوط زیر ارسال شوند:
شما میتوانید هر عنصر HTML که دوست دارید را درون یک عنصر قرار دهید تا خود عناصر فرم را ساختاردهی کرده و محفظههایی را برای هدفگیری با CSS جهت استایلدهی و غیره فراهم کنید.
در مثال ما، یک عنصر عنوان را برای توصیف هدف فرم قرار دادهایم.
همچنین هر جفت ورودی/برچسب و دکمه ارسال را درون یک جداگانه قرار دادهایم، به طوری که هر کدام در یک خط جداگانه ظاهر میشوند. این عناصر به طور پیشفرض درونخطی هستند، به این معنی که اگر این کار را نمیکردیم، همه آنها در یک خط قرار میگرفتند.
این یک الگوی رایج برای ساختاردهی فرم است. برخی افراد از عناصر برای جدا کردن عناصر فرم خود استفاده میکنند، برخی از عناصر یا حتی استفاده میکنند. تا زمانی که عناصر استفاده شده از نظر معنایی معنیدار باشند، اهمیت زیادی ندارد. به عنوان مثال، تقسیم گروههای عناصر فرم به پاراگرافها یا بخشهای جداگانه از محتوا یا حتی موارد موجود در یک لیست منطقی است. نمایش آنها به صورت نقل قول، حاشیه یا آدرس، منطقیتر نخواهد بود.
یک عنصر تخصصی برای گروهبندی عناصر فرم با هم به نام وجود دارد. این در شرایط خاص، مانند فرمهای پیچیده و هنگام گروهبندی چندین کادر انتخاب و دکمههای رادیویی مفید است. بعداً به چند مثال از خواهیم پرداخت.
عناصر نشاندهندهی اقلام دادهای مختلفی هستند که در فرم وارد میشوند. بیایید یکی از مثالهای فرم پایه خود را بررسی کنیم:
این ویژگیها به شرح زیر هستند:
- type: نوع کنترل فرمی که باید ایجاد شود را مشخص میکند. انواع مختلفی از کنترلهای فرم وجود دارد، از فیلدهای متنی ساده با انواع مختلف گرفته تا دکمههای رادیویی، چکباکسها و موارد دیگر. Type text یک فیلد متنی پایه را ارائه میدهد که میتواند هر مقداری را بپذیرد.
- name: نامی را برای آیتم داده مشخص میکند. وقتی فرم ارسال میشود، دادهها به صورت جفتهای نام/مقدار ارسال میشوند. در هر مورد، نام برابر با مقدار این ویژگی نام و مقدار برابر با متن وارد شده در فیلد متن است.
- id: شناسهای را مشخص میکند که میتواند برای شناسایی عنصر استفاده شود. در این حالت، برای مرتبط کردن کنترل فرم با آن استفاده میشود.
- required: مشخص میکند که قبل از ارسال فرم، باید مقداری در عنصر فرم وارد شود. این فقط باید روی ورودیهایی که نیاز دارید تنظیم شود، نه روی فیلدهای اختیاری.باید توجه داشته باشید که برخی از انواع ورودی معمولاً مقادیر خود را از متن وارد شده در یک فیلد دریافت نمیکنند. به عنوان مثال، یک ویجت انتخاب رنگ را نمایش میدهد که شما یک رنگ را از آن انتخاب میکنید، در حالی که یک کنترل دکمه رادیویی را نمایش میدهد که میتواند انتخاب شود یا نشود.
در مورد دکمههای رادیویی، معمولاً باید مقداری را که در صورت انتخاب شدن در داخل یک ویژگی مقدار خاص ارسال میشود، ارائه دهید. توجه داشته باشید که میتوانید یک ویژگی مقدار را برای انواع ورودی مانند متن و رنگ مشخص کنید - نتیجه این است که مقدار هنگام اولین رندر، از قبل در فیلد فرم پر میشود.
ویژگیهای required و value در عمل
دوباره، به مثالی که در یک برگه جداگانه بارگذاری کردید بروید و سعی کنید فرم را بدون وارد کردن هیچ مقداری در هر دو فیلد ارسال کنید. خواهید دید که یک پیام خطا در کنار فیلد "نام" ظاهر میشود و میگوید چیزی شبیه به "لطفاً این فیلد را پر کنید" (در مرورگرهای مختلف متفاوت خواهد بود). این ویژگی مورد نیاز - و اعتبارسنجی فرم پیشفرض سمت کلاینت مرورگر - در عمل است.
حالا سعی کنید فرم را با یک نام معتبر وارد شده در فیلد اول ارسال کنید، اما مقداری که یک آدرس ایمیل معتبر در فیلد دوم نیست (چیزی شبیه به "aaaa" کافی است). این بار یک پیام خطا در کنار فیلد "ایمیل" ظاهر میشود که میگوید چیزی شبیه به "لطفاً یک آدرس ایمیل وارد کنید" است.
سعی کنید فرم را ویرایش کنید تا مقدار را در ورودی اول وارد کنید. وقتی کد را دوباره بارگذاری میکنید، خواهید دید که فیلد اول به طور پیشفرض مقدار "Bob" را دارد.
ورودیهای فیلد متنی تخصصی
تمرین دوم بالا نکته جالبی را مطرح میکند. فیلد ورودی دوم به طور خاص انتظار یک آدرس ایمیل را دارد و مقادیر وارد شده را به همین ترتیب اعتبارسنجی میکند. اگر دوباره به کد فرم نگاه کنید، متوجه خواهید شد که چرا - دوم یک type ایمیل دارد.
چندین نوع ورودی فیلد متنی تخصصی وجود دارد که برای مدیریت انواع خاصی از دادهها مانند و غیره طراحی شدهاند.
برای فهمیدن اینکه این انواع ورودی برای چه مواردی استفاده میشوند، برخی از لینکهای بالا را دنبال کنید. نگاهی به مرجع ما بیندازید و ببینید آیا میتوانید انواع ورودی فیلد متنی تخصصیتری پیدا کنید.
همانطور که در بالا گفتیم، عناصر برچسبهای شناسایی مرتبط با کنترلهای فرم را ارائه میدهند که دادههایی را که باید در آنها وارد شوند توصیف میکنند. میتوانید هر محتوای متنی را که دوست دارید در عناصر قرار دهید، اما آنها باید دقیقاً توصیف کنند که کنترل فرم مرتبط چه دادههایی را انتظار دارد. این ارتباط با دادن یک ویژگی id به کنترل فرم و سپس دادن یک ویژگی for به عنصر با همان مقدار شناسه کنترل ایجاد میشود.
به عنوان مثال:
عناصر به دلایل مختلفی مهم هستند، که مهمترین آنها عبارتند از:
هنگامی که کاربران کمبینا از یک صفحهخوان برای کمک به خواندن و تعامل با محتوای صفحه وب استفاده میکنند، صفحهخوان هنگام مواجهه با هر کنترل، متن برچسب مرتبط را میخواند. این امر درک محتوای مورد نظر در هر کنترل را برای کاربران آسانتر میکند.
آنها به شما این امکان را میدهند که با کلیک بر روی متن برچسب و همچنین کنترلها، عناصر فرم را متمرکز کنید. این امر به ویژه برای کاربران تلفن همراه مفید است، جایی که انتخاب دقیق یک عنصر فرم با انگشت روی صفحه لمسی میتواند دشوار باشد. بزرگتر کردن ناحیه ضربه در چنین شرایطی مفید است.
برچسبهای فرم صریح و ضمنی
سبک برچسب فرمی که در بالا دیدید، برچسب فرم صریح نامیده میشود - ارتباط بین کنترل و برچسب به طور صریح از طریق ویژگیهای id و for برقرار میشود. همچنین میتوانید با قرار دادن کنترل درون برچسب، یک برچسب فرم ضمنی پیادهسازی کنید، مانند این:
این تودرتو بودن یک ارتباط ضمنی بین کنترل و برچسب ایجاد میکند و دیگر نیازی به شناسه و ویژگیها برای آن ندارید.
هر دو رویکرد خوب هستند، اما ما استفاده از رویکرد برچسبگذاری صریح را توصیه میکنیم. دلیل این امر این است که ارتباط صریح معمولاً شناسایی و درک آن آسانتر است، به خصوص با پیچیدهتر شدن کد HTML شما. علاوه بر این، صفحهخوانها (و سایر فناوریهای کمکی) همیشه برچسبهای ضمنی را به درستی مدیریت نمیکنند.
وقتی یک عنصر درون یک عنصر قرار میگیرد، رفتار پیشفرض آن این است که فرم را ارسال میکند، مشروط بر اینکه هیچ داده نامعتبری وجود نداشته باشد، که باعث میشود ارسال توسط اعتبارسنجی فرم سمت کلاینت مسدود شود. شما قبلاً این رفتار را هنگام کار با مثال فرم پایه ما در بالا مشاهده کردهاید.
سایر رفتارهای دکمه را میتوان از طریق ویژگی type عنصر مشخص کرد:
- به صراحت اعلام میکند که یک دکمه باید مانند یک دکمه ارسال رفتار کند. شما هرگز نیازی به اعلام این موضوع ندارید، مگر اینکه به دلایلی دکمههای دیگری را در خود قرار دهید و بخواهید مشخص کنید که دکمه ارسال کدام یک است. این اتفاق بسیار نادر خواهد بود.
- یک دکمه تنظیم مجدد ایجاد میکند - این بلافاصله تمام دادهها را از فرم حذف میکند و آن را به حالت اولیه خود بازنشانی میکند. از دکمههای تنظیم مجدد استفاده نکنید - آنها در اوایل وب محبوب بودند، اما معمولاً بیشتر از اینکه مفید باشند، آزاردهنده هستند. اکثر افراد تجربه پر کردن یک فرم طولانی و کلیک تصادفی روی دکمه تنظیم مجدد به جای دکمه ارسال را داشتهاند، به این معنی که باید دوباره شروع کنند.
- دکمهای با همان رفتار دکمههای مشخص شده در خارج از عناصر ایجاد میکند. همانطور که قبلاً دیدیم، آنها به طور پیشفرض هیچ کاری انجام نمیدهند و برای ارائه عملکرد به آنها به جاوا اسکریپت نیاز است.
اگرچه میتوانید این نوع دکمهها را با استفاده از یک عنصر با مقادیر نوع یکسان - مانند - ایجاد کنید، اما در مقایسه با همتایان خود، معایب زیادی دارند. بنابراین باید به جای آن از استفاده کنید.
نکتهای فرعی در مورد دسترسیپذیری
ما قبلاً در مورد اهمیت برچسبهای فرم برای دسترسیپذیری صحبت کردهایم، اما همچنین میخواستیم در مورد اهمیت کلی استفاده از عناصر معنایی صحیح برای ایجاد فرمها (به عنوان مثال، از یک برای ارسال فرم خود استفاده کنید، نه از یک که طوری برنامهریزی شده که مانند یک رفتار کند) توضیحاتی ارائه دهیم. استفاده از ترکیبی از CSS و جاوا اسکریپت برای ایجاد ظاهری و رفتاری تقریباً هر عنصر HTML مانند یک عنصر فرم کاملاً امکانپذیر است. توسعهدهندگان معمولاً این کار را به دلایل طراحی انجام میدهند - برخی از کنترلهای فرم به سختی قابل استایلبندی هستند.
با این حال، وقتی این کار را انجام میدهید، زندگی را برای خود و کاربرانتان سختتر میکنید. مرورگر به طور پیشفرض چندین ویژگی و کنترل فرم را ارائه میدهد، بدون نیاز به جاوا اسکریپت یا کد اضافی دیگر، تا فرمها برای همه کاربران قابل استفادهتر شوند.
به عنوان مثال:- عناصر معنایی توسط فناوریهای کمکی مانند صفحهخوانها درک میشوند که معنای خود را به کاربرانی که نمیتوانند آنها را ببینند، منتقل میکنند.
- کنترلها و دکمههای فرم به طور پیشفرض از طریق صفحهکلید قابل دسترسی هستند. در مثال قبلی، سعی کنید با استفاده از Tab و Shift + Tab (که "tabbing" نامیده میشود) بین عناصر فرم به جلو و عقب حرکت کنید.
- همچنین توجه کنید که چگونه Tabbing بین عناصر فرم باعث میشود عنصر مورد نظر با استفاده از یک خط آبی (که طرح فوکوس نامیده میشود) برجسته شود. این یک ویژگی مهم برای کاربران صفحهکلید است تا بدانند در حال حاضر در کجای فرم هستند.
اگر از عناصر معنایی صحیح برای پیادهسازی فرمهای خود استفاده نکنید، عناصر فرم شما مطابق انتظار کاربران رفتار نخواهند کرد و به نظر خراب میرسند. شما باید تمام این قابلیتها را خودتان دوباره پیادهسازی کنید، که همه اینها به هم اضافه میشوند.
انواع کنترلهای بسیار دیگری نیز وجود دارند که میتوانید برای جمعآوری دادهها در یک فرم از آنها استفاده کنید. بیایید به یک مثال کمی پیچیدهتر نگاهی بیندازیم و سپس آن را بررسی و توضیح دهیم.
در این مثال، فرض میکنیم کاربر قبلاً ثبتنام کرده و وارد سیستم شده است، از این رو نیازی به جمعآوری جزئیاتی مانند نام و ایمیل نیست.
توصیه میکنیم هنگام مطالعهی بخشهای بعدی که به ترتیب به بررسی هر نوع کنترل میپردازیم، این مثال را در یک تب مرورگر جداگانه باز کنید. برای انجام این کار، کد را با استفاده از ویرایشگر کد خود در یک فایل HTML کپی کنید و آن را در یک تب مرورگر باز کنید.
قبل از ادامه، با کنترلهای فرم مختلف در نسخه محلی خود بازی کنید و چند مقدار انتخاب کنید. فرم را ارسال کنید و ببینید دادههای ارسالی در URL چگونه به نظر میرسند.
دکمههای «انتخاب نوع اتاق هتل» با استفاده از کنترلهای پیادهسازی شدهاند. این دکمهها به صورت مجموعهای از کنترلهای دکمهای نمایش داده میشوند که در هر زمان فقط میتوان یکی از آنها را انتخاب کرد - نمیتوانید بیش از یکی را همزمان انتخاب کنید. نام آنها از دکمههای رادیوهای قدیمی گرفته شده است، جایی که یک دکمه را فشار میدهید و دکمهی انتخاب شدهی قبلی دوباره ظاهر میشود.
کد مثال ما به این شکل است:
انواع ورودی رادیویی عمدتاً مانند انواع ورودی متنی کار میکنند، اما با چند تفاوت:
- ویژگیهای نام برای هر مجموعه از دکمههای رادیویی باید حاوی مقدار یکسانی باشند تا آنها را به عنوان یک مجموعه به هم مرتبط کنند. اگر حاوی مقادیر مختلفی باشند، عملاً مجموعههای جداگانهای با مقادیر مختلف در هنگام ارسال خواهند بود.
- شما باید یک ویژگی مقدار شامل مقداری که باید برای هر دکمه رادیویی ارسال شود را اضافه کنید. مقدار ارسالی یک جفت نام/مقدار خواهد بود، اما نام همیشه یکسان خواهد بود، به عنوان مثال، hotel=economy یا hotel=superior.
- برای هر دکمه رادیویی باید آن مقدار خاص را توصیف کند، نه مقدار کلی که انتخاب میکنید. روش ترجیحی برای توصیف مقدار کلی انتخاب شده، قرار دادن آنها در یک است که یک عنصر را به عنوان فرزندی که شامل توضیحات است، میگیرد.
علاوه بر ساختاردهی و برچسبگذاری فرمها، مجموعه فیلدها کاربردهای دیگری نیز دارند، مانند غیرفعال کردن کل مجموعه کنترلها به عنوان یک واحد تکی.
همچنین شایان ذکر است که ما ویژگی checked را به اولین دکمه رادیویی اعمال کردهایم - این باعث میشود که هنگام اولین بارگذاری صفحه، این دکمه انتخاب شود. این بدان معناست که همیشه یک گزینه انتخاب میشود و شما نمیتوانید بدون انتخاب دکمه رادیویی دیگر، انتخاب یک دکمه رادیویی را لغو کنید.
برای مشاهده تأثیر آن، ویژگی checked را از اولین دکمه رادیویی حذف کنید، ذخیره کنید و سپس دوباره بارگذاری کنید. قبل از ادامه، آن را دوباره قرار دهید.
غیرفعال کردن کنترلهای فرم
در مثال دکمه رادیویی، متوجه خواهید شد که دکمه رادیویی سوم دارای ویژگی disabled است. این باعث میشود کنترل رندر شده خاکستری و غیرقابل انتخاب شود. این در بسیاری از موقعیتها که یک گزینه معمولاً در دسترس است، اما نه در حال حاضر، مفید است. به عنوان مثال، ممکن است یک محصول موجود نباشد، یا مانند مثال ما، سوئیتهای پنتهاوس همگی رزرو شده باشند!
شما میتوانید ویژگی disabled را روی هر کنترل فرم، از جمله عناصر تنظیم کنید. عناصر همچنین میتوانند ویژگی disabled را بپذیرند - این باعث میشود که هر کنترل فرم درون fieldset غیرفعال شود.
سعی کنید ویژگی disabled را روی دو عنصر تنظیم کنید، ذخیره کنید، سپس دوباره بارگذاری کنید تا تأثیر آن را ببینید. قبل از ادامه، دوباره آنها را حذف کنید.
انتخابگرهای «کلاسهای مورد نظر ما» با استفاده از کنترلهای پیادهسازی شدهاند. این کنترلها به صورت مجموعهای از چکباکسهای حالت روشن/خاموش رندر میشوند. برخلاف دکمههای رادیویی، میتوانید بیش از یک مورد را به طور همزمان انتخاب کنید.
همانطور که از قطعه کدها مشاهده میکنید، دکمههای رادیویی و کادرهای انتخاب به روشی بسیار مشابه پیادهسازی شدهاند (همچنین میتوانند ویژگیهای checked را دریافت کنند تا هنگام بارگذاری صفحه، از پیش انتخاب شده باشند). آنها همچنین به روشی نسبتاً مشابه رفتار میکنند، با این تفاوت که دکمههای رادیویی به شما امکان میدهند صفر یا یک مورد را از بین موارد متعدد انتخاب کنید و کادرهای انتخاب به شما امکان میدهند صفر یا چند مورد را از بین موارد متعدد انتخاب کنید.
تفاوت اصلی (جدا از نوع مقدار!) این است که هر کادر انتخاب دارای یک نام و مقدار متفاوت است و معمولاً به آنها ویژگیهای مقداری داده نمیشود. از نظر رفتاری، این بدان معناست که آنها مقادیر داده متفاوتی را نشان میدهند، در حالی که یک مجموعه دکمه رادیویی فقط یک مقدار را نشان میدهد. در هنگام ارسال، هر مقدار با مقدار روشن ارسال میشود اگر کادر انتخاب تیک خورده باشد - yoga=on، balloon=on و غیره.میتوان با دادن یک ویژگی value به یک چکباکس، مقدار ارسالی برای آن را تغییر داد، برای مثال: در صورت تیک خوردن، نتیجه yoga=yes ارسال میشود.
منوهای کشویی، برای مثال، کنترل انتخاب «How are you getting here» در مثال ما، نه با نوع ، بلکه با عناصر و پیادهسازی میشوند:
عنصر تمام گزینههای مختلف مقدار را در بر میگیرد. در اینجا شما ویژگی id را که کنترل را به برچسب آن مرتبط میکند، و ویژگی name را که نام آیتم دادهای که باید ارسال شود را تعیین میکنید.
هر مقدار ممکن برای آیتم داده توسط یک عنصر نمایش داده میشود که درون عنصر قرار دارد. هر عنصر میتواند یک ویژگی value بگیرد که مقداری را که باید ارسال شود در صورت انتخاب آن گزینه از لیست کشویی مشخص میکند. اگر مقداری مشخص نکنید، متن داخل تگهای به عنوان مقدار استفاده میشود.
همچنین میتوانید گزینههای داخل یک منوی کشویی را با استفاده از عنصر به چندین زیرگروه تقسیم کنید. برای فهمیدن چگونگی این کار، به صفحه مرجع این عنصر نگاهی بیندازید.
اگر میخواهید یک گزینه خاص در هنگام بارگذاری صفحه انتخاب شود، میتوانید یک ویژگی selected را به عنصر مربوطه اضافه کنید.
فیلدهای ورودی متن چند خطی
فیلدهای ورودی متن چند خطی با استفاده از عناصر ایجاد میشوند:
آنها مانند عناصر رفتار میکنند، با این تفاوت که اجازه میدهند چندین خط متن وارد شود. ویژگی rows تعداد ردیفهایی را که ناحیه متن به طور پیشفرض ارتفاع خواهد داشت، مشخص میکند، در حالی که ویژگی cols تعداد ستونهایی را که ناحیه متن به طور پیشفرض عرض خواهد داشت، مشخص میکند. اگر این مقادیر مشخص نشده باشند، مقادیر و استفاده میشوند.
بیشتر مرورگرها ناحیههای متن را با یک دستگیره کشیدن در یک گوشه رندر میکنند که میتوان از آن برای تغییر اندازه آن استفاده کرد. سعی کنید از این برای تغییر اندازه ناحیه متن در نسخه آزمایشی ما استفاده کنید.
پیش از این، برخی از اعتبارسنجیهای اولیه فرم سمت کلاینت که توسط مرورگر ارائه میشوند را بررسی کردیم. ویژگی required برای مشخص کردن اینکه یک فیلد باید قبل از ارسال فرم پر شود، استفاده میشود. همچنین بررسی میکند که نوع مقدار صحیح برای انواع مقادیر خاص مانند آدرسهای ایمیل، URLها، اعداد و غیره وارد شده است یا خیر. اعتبارسنجی به دو دلیل اصلی مهم است:
اطمینان از اینکه دادهها در قالب صحیح ارسال میشوند تا در برنامه شما خطایی ایجاد نکنند.
اطمینان از اینکه دادهها مشکلات امنیتی ایجاد نمیکنند. افراد بد میدانند که چگونه دادههایی را که به طور خاص قالببندی شدهاند ارسال کنند تا در برنامههای ناامن، بتوانند دستوراتی را برای حذف پایگاههای داده یا به دست گرفتن کنترل یک سیستم اجرا کنند.
اعتبارسنجی فرم موضوع بسیار مهمی است که فراتر از محدوده این مقاله است، بنابراین فعلاً آن را اینجا میگذاریم. فقط به خاطر داشته باشید که دو نوع اعتبارسنجی فرم وجود دارد:
اعتبارسنجی سمت کلاینت، که در مرورگر اتفاق میافتد، با استفاده از ترکیبی از ویژگیهای اعتبارسنجی فرم (مانند required) و جاوا اسکریپت پیادهسازی میشود. اعتبارسنجی سمت کلاینت برای ارائه نکات فوری به کاربران در هنگام وارد کردن دادههای اشتباه مفید است، اما در جلوگیری از ورود دادههای مخرب چندان مؤثر نیست. غیرفعال کردن جاوا اسکریپت یا تغییر کد سمت کلاینت به گونهای که اعتبارسنجی دیگر کار نکند، بسیار آسان است.
اعتبارسنجی سمت سرور، که روی سرور انجام میشود، با استفاده از هر زبانی که سرور استفاده میکند، پیادهسازی میشود. پیامهای بدشکل میتوانند به طور تصادفی یا عمدی به سرور ارسال شوند. عقل سلیم میگوید که مطمئن شوید سرور شما به هیچ چیزی که کلاینت ارسال میکند اعتماد نمیکند تا از اشکالات یا مشکلات امنیتی ناشی از پیامهای نادرست جلوگیری شود. اعتبارسنجی سمت سرور برای متوقف کردن پیامهای مخرب عالی است، زیرا دستکاری کدی که روی سرور اجرا میشود دشوارتر است. اعتبارسنجی سمت سرور در ارائه نکات به کاربران در مورد دادههای نادرست چندان خوب نیست زیرا دادهها باید برای اعتبارسنجی به سرور بروند، سپس نتیجه باید قبل از اینکه کاربر مطلع شود، به کلاینت ارسال شود.
به طور خلاصه، بین استفاده از اعتبارسنجی سمت کلاینت یا سمت سرور یکی را انتخاب نکنید - به هر دو نیاز خواهید داشت. شما به اعتبارسنجی سمت کلاینت نیاز دارید تا به کاربران در مورد ورودیهایشان بازخورد بدهید و به اعتبارسنجی سمت سرور نیاز دارید تا مطمئن شوید پیامها در قالبی هستند که سرور شما میتواند با خیال راحت آن را مدیریت کند. اگر میخواهید در مورد اعتبارسنجی بیشتر بدانید، اعتبارسنجی فرم سمت کلاینت جای خوبی برای شروع است.
