طراحی سایت تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
02188471521   ۰۲۱۴۰۸۸۱۰۳۸

آموزش HTML – بخش دوازدهم

آموزش HTML | آموزش HTML5

مبحث فرم ها را در آموزش HTML بخش دوازدهم با مباحث زیر ادامه می دهیم:

  • عناصر فرم ها: دو المان دیگر فرم ها عبارتند از لیست های کشویی و ورودی های متن های چند خطی که در این جلسه به بررسی آنها خواهیم پرداخت.
  • المان های افزوده شده به فرم در HTML5: در ادامه این جلسه المان های افزوده شده به فرم را بررسی خواهیم کرد.

المان های یک فرم

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

لیست کشویی

در بعضی فرم ها نیاز است که یک لیست کشویی را ایجاد کنیم تا با باز شدن آن کاربر یکی از موارد لیست را انتخاب کند. این لیست کشویی ( drop-down ) را با تگ <select>  ایجاد می کنیم که یک زوج تگ است و درون تگ <form>  قرار می گیرد.

برای این لیست نامی را با خصیصه name در تگ آغاز انتخاب می کنیم. همچنین موارد این لیست را با تگ <option>  ایجاد می کنیم که برای هر مورد باید خصیصه value را با مقداری دلخواه تنظیم کنیم. تگ <option>  نیز زوج تگ است و محتوایی را که درون خود جای می دهد، آیتم های لیست کشویی هستند.

آموزش html | تگ select

در حالت عادی مورد اول انتخاب شده است و کاربر می تواند آن را تغییر دهد. اگر بخواهیم گزینه دیگری به صورت پیش فرض انتخاب شده باشد خصیصه selected را برای آن مورد به کار می بریم. در مثال زیر مورد دوم به صورت پیش فرض انتخاب شده است.

آموزش html | تگ select

تگ <textarea>

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

این ناحیه باید عرض و ارتفاعی داشته باشد. در این مورد خاص عرض و ارتفاع را با واحد ستون و ردیف تعیین می کنیم که برای این کار دو خصیصه cols برای تعیین عرض ( یعنی تعدا ستون ها ) و rows برای تعیین ارتفاع ( یعنی تعداد سطر ها ) را به کار می بریم که مقدار عددی را برای این خصیصه ها تعیین می کنیم.

با قرار دادن نشانگر موس بر روی مثلث گوشه سمت راست پایین کادر می توان اندازه آن را تغییر داد. اما با تازه سازی صفحه، اندازه کادر به حالت اول بر می گردد.

تگ <textarea>  به صورت زوج تگ است و عبارتی را که می خواهیم به صورت پیش فرض در این کادر قرار بگیرد را درون این تگ قرار می دهیم. توجه کنید که متنی که درون این کادر قرار می گیرد فونتی متفاوت دارد که می توان با CSS این فونت را تغییر داد.

آموزش html | تگ select

دکمه

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

آموزش html | تگ select

Onclick یعنی زمانی که بر روی دکمه کلیک شد، دستور داده شده را انجام بده. Alert تابعی است که پنجره ای مانند عکس بالا را باز می کند و متن درون پرانتز را نمایش می دهید. توجه کنید که متن درون پرانتز ، در علامت نقل قول ( single quotation ) قرار می گیرد.

المان های افزوده شده به فرم در HTML5

در HTML5  المان های افزوده شده به فرم عبارتند از: <keygen> ، <datalist> و <output>  که در مرورگرهای نسخه پایین  نمایش داده نمی شوند. در ادامه به توضیح این سه المان می پردازیم.

المان <datalist>

این المان نیز برای ساختن یک لیست کشویی استفاده می شود و تفاوت آن با لیست کشویی ساخته شده با تگ <select>  در این است که لیستی که با datalist ایجاد می شود در یک ورودی متن قرار می گیرد که کاربر می تواند در آن کلیک و تایپ کند که از موارد موجود در لیست، پیشنهاداتی متناسب با حروف تایپ شده، ظاهر می شود. نحوه ساختن لیست کشویی با این المان را در مثال زیر می بینیم.

آموزش html | تگ select

همانطور که می بینید در ابتدا یک ورودی متن را با خصیصه list و name در فرم ایجاد کردیم و در ادامه المان <datalist>  با خصیصه id ( که مقدار آن دقیقا مقدار خصیصه list است ) را در فرم قرار دادیم.توجه کنید که اگر مقدار خصیصه list و id برابر نباشد، لیست کشویی ایجاد نمی شود.

المان <keygen>

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

آموزش html | تگ select

المان <output>

این تگ وقتی به کار می رود که می خواهیم نتیجه یک عمل ریاضی را نمایش دهیم. در مثال زیر اعداد a و b را بر هم تقسیم می کنیم و نتیجه را همان لحظه و بدون کلیک بر روی دکمه می بینیم. با کلیک بر روی دکمه نمایش اعداد، در آدرس بار مرورگر مقادیر جدید اعداد a و b را مشاهده خواهید کرد.

آموزش html | تگ select

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

نوشته های مرتبط

Comments (1)

سلام . ضمن تشکر از مطالب خوبتون ، ممکنه راهنمایی بفرمایید چطور میتونم مشابه سایت ورزش 3 یک منوی کشویی پایین رونده بسازم و بازیهای هر گروه رو با انتخاب عناصر آن منو مشاهده کنم؟ ممنون میشم یه مثال ساده به ایمیلم بفرستید .

دیدگاه ‏خود را بنویسید