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

آموزش HTML – بخش سیزدهم

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

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

  • انواع ورودی های فرم.
  • ورودی های افزوده شده به HTML5 .

وردی های فرم

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

ورودی متن

وقتی که می خواهیم ورودی را در فرم قرار دهیم که با چند کلمه پر شود، مانند ورودی های نام، نام خانوادگی، شهر و … مقدار خصیصه type را text می دهیم. در این صورت ورودی ایجاد می شود که می توان درون آن چند کلمه را تایپ کرد.

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

ورودی رمز

input type="password"  ورودی رمز در یک فرم را ایجاد می کند. کاراکترهایی که در که در این ورودی تایپ می شوند، به صورت دایره های توپر مشکی و یا ستاره نمایش داده می شوند.

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

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

دکمه تایید و ارسال

همانطور که می دانید input type="submit"  دکمه تایید و ارسال را ایجاد می کند و کلمه ای را که می خواهیم بر روی دکمه نوشته شود را در خصیصه value می نویسیم.

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

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

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

دکمه بازنشانی

مقدار reset برای خصیصه type دکمه ای را ایجاد می کند که با کلیک بر روی آن تمام مقادیر ورودی ها حذف می شود و به مقادیر پیش فرض باز نشانی می شوند.

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

دکمه رادیویی

کاربرد دکمه رادیویی زمانی است که می خواهیم کاربر از بین چند گزینه فقط یک گزینه را انتخاب کند. همان طور که دیدید type="radio"  دکمه رادیویی را ایجاد می کند. علاوه بر این خصیصه، name و value را هم باید برای دکمه های رادیویی تنظیم کنیم.

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

دکمه انتخاب

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

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

دکمه

برای ارسال داده های فرم از دکمه ها استفاده می کنیم که به دو صورت ایجاد می شوند. می توان از زوج تگ <button>  استفاده کرد و یا <input type="button">  را به کار ببریم.

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

در مورد خصیصه onclick توضیح اینکه یک رویداد است و به مرورگر می گوید با کلیک بر روی دکمه عبارت درون alert را نمایش بده که پنجره اخطار مروگر باز می شود عبارت نمایش داده می شود. با رویدادها در جاوااسکریپت آشنا خواهیم شد.

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

ورودی های مختلفی در HTML5 اضافه شده است که در ادامه این بخش به آن ها می پردازیم. اگر مرورگر از ورودی خاصی پشتیبانی نکند، آن را ورودی متن در نظر می گیرد.

 ورودی عدد

input type="number"  ورودی انتخاب عدد را در فرم ایجاد می کند. دو خصیصه را دیگر را می توان برای ورودی عدد به کار برد که عبارتند از max که بیشتر عدد مجاز و min که کمترین عدد مجاز را تعیین می کند.

این ورودی در تمام مرورگرها پشتیبانی می شود.

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

در مثال بالا در هر بار فشردن دکمه ورودی، عدد انتخابی یک واحد کم یا زیاد می شود. فرض کنید بخواهیم با هر بار فشردن دکمه ورودی، مقدار عدد، x واحد افزایش یا کاهش یابد. برای این کار خصیصه step را می نویسیم و مقدار عددی x را به آن می دهیم.

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

ورودی انتخاب تاریخ

type="date"  ورودی انتخاب تاریخ را ایجاد می کند. این ورودی در مروگر فایرفاکس پشتیبانی نمی شود.

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

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

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

نتیجه را با مرورگری غیر از فایرفاکس مشاهده کنید.

 ورودی انتخاب رنگ

<input type="color">  ورودی انتخاب رنگ را ایجاد می کند. نحوه نمایش پنجره انتخاب رنگ به مرورگر بستگی دارد.

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

انتخابگر محدوده ای

input type="range"  ورودی را برای انتخاب مقداری عددی در یک بازه تعیین شده و توسط یک دکمه لغزنده را ایجاد می کند. بازه پیش فرض عدد 0 تا 100 است که می توان این بازه را به دلخواه تغییر داد. با خصیصه های max ، min ، step و value آشنا شدیم که در این ورودی نیز به کار می روند.

max بیشترین عددی را که می توان انتخاب کرد را تعیین می کند.

min کمترین عددی که می توان انتخاب کرد را تعیین می کند.

step برای تعیین میزان افزایش یا کاهش با جابجا کردن دکمه.

valueمقدار اولیه ورودی را تعیین می کند.

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

ورودی انتخاب ماه

input type="month"  ورودی را ایجاد می کند که با آن می توان فقط ماه و سال را انتخاب کرد.

این ورودی در مرورگر فایر فاکس و نسخه های قدیمی تر از 11 اینترنت اکسپلورر پشتیبانی نمی شود.

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

ورودی انتخاب هفته و سال

ورودی با خصیصه type="week"  به کاربر این امکان را می دهد که شماره هفته و سال را انتخاب کند. مثلا هفته 25 سال 2015. نحوه نمایش منو انتخاب تاریخ به مرورگر بستگی دارد.

این ورودی نیز در فایر فاکس و اینترنتت اکسپلورر نسخه 11 و قدیمی تر پشتیبانی نمی شود.

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

ورودی زمان

مقدار time ورودی زمان را ایجاد می کند که به کاربر این امکان را می دهد که ساعت و دقیقه را بدون توجه به ناحیه زمانی تعیین کند.

در فایرفاکس و اکسپلورر نسخه 12 و قدیمی تر این ورودی پشتیبانی نمی شود.

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

ورودی دیگری با مقدار datetime-local برای خصیصه type وجود دارد که ورودی را ایجاد می کند که در آن همزمان تاریخ و ساعت انتخاب می شوند.

این ورودی در اینترنت اکسپلورر 12 و قدیمی تر و همچنین فایر فاکس پشتیبانی نمی شود.

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

ورودی ای میل

input type="email"  ورودی ای میل را ایجاد می کند که بعضی از مرورگر ها ای میل وارد شده را اعتبار سنجی می کنند. بعضی از تلفن های هوشمند بر روی صفحه کلید دکمه .com را برای تکمیل آدرس های ای میل دارند.

این ورودی در مرورگر سافاری پشتیبانی نمی شود.

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

ورودی جستجو

input type="search"  ورودی جستجو را ایجاد می کند.

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

ورودی دریافت URL

Type="url"  خصیصه ایست که ورودی را برای دریافت یک آدرس URL از کاربر ایجاد می کند. همانند ورودی ای میل، مرورگرها صحیح و یا غلط بودن آدرس را بررسی کنند. اگر آدرس URL را مطابق الگوی آن وارد نکنید، مرورگر پیغام خطا می دهد.

یادآوری: یک آدرس URL بدین صورت است : http://www.yourdomine .

این ورودی در مرورگر سافاری پشتیبانی نمی شود

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

در این جلسه انواع ورودی های یک فرم را بررسی کردیم. در جلسه بعدی خصیصه های مهم را که برای وردی های یک فرم به کار می روند را بررسی خواهیم کرد. همراه ما باشید در جلسه چهاردهم آموزش HTML .

دوستان و همراهان گرامی سایت سازان در قسمت دیدگاه ها می توانید علاوه بر انتقادات و پیشنهادات، سوالات خود در زمینه مطالب این بخش را با کارشناسان سایت سازان مطرح نمایید.

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

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