آموزش طراحی وب

خاصیت های جدید در فرم های Html5

در این جلسه راجع به خاصیت های جدید در فرم های Html5 صحبت می کنیم .

خاصیت های جدید در فرم های Html5

فصل چهارم ( معرفی HTML5 )

جلسه  پنجم  (خاصیت های جدید در فرم های Html5 )

سلام خدمت همراهان عزیز مدرسه مجازی ایرانیان

در این جلسه راجع به خاصیت های جدیدی که در قسمت فرم ها در HTML5 اضافه شده صحبت می کنیم .

خاصیت autocomplete : این خاصیت دو حالت داره ، on  و  off . حالا میخوام با مثال این خاصیت رو توضیح بدم .

ما یک فیلد متنی برای ورود نام کاربری داخل فرم لحاظ می کنیم و خاصیت  autocomplete رو برابر on قرار میدیم :

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

حالا به مثال زیر توجه کنید ، در این مثال ما خاصیت  autocomplete رو برابر off قرار میدیم .

 حالا در این صورت مرورگر مقادیری که شما وارد می کنید رو ذخیره نمیکنه و برای شما هیچ لیست پیشنهادی نمایش نمیده .

این خاصیت در فیلدهای زیر قابل استفاده هست :

    text –  search  –  url  –  password –  date  –  rang  –  email  –  color

مرورگرهایی که این خاصیت رو پشتیبانی می کنند : FireFox , Internet Explorer , Chrome , Safari

 

خاصیت novalidate : این خاصیت رو در فرم قرار میدید ، زمانی که این خاصیت رو در فرم لحاظ می کنید ، دیگر نیازی نیست مقادیر اعتبارسنجی شوند ، مثلا ایمیل رو بدون اینکه اعتبارسنجی کنه ، حتی اگر نامعتبر باشه ، ارسال میکنه و هیچ پیغامی به شما نمیده . مثال :

 در مثال بالا بدون اینکه درست بودن یا نبودن ایمیل رو چک کنه ، ایمیل وارد شده رو ارسال میکنه .

 مرورگرهایی که این خاصیت رو پشتیبانی می کنند : FireFox , Internet Explorer , Chrome , Opera

 

خاصیت های جدید در Input ها :

خاصیت autofocus : از این خاصیت فقط در یکی از input های متنی در یک فرم میتونید استفاده کنید . زمانی که از این خاصیت استفاده کنید ، پس از اینکه صفحه بارگزاری شد ، اشاره گر موس در اون فیلد متنی بصورت Focus و چشمک زن قرار میگیره .

 مرورگرهایی که این خاصیت رو پشتیبانی می کنند : FireFox , Internet Explorer , Chrome , Safari , Opera

خاصیت form : با استفاده از این خاصیت شما میتونید دو تا فرم در ارتباط باهم ایجاد کنید . به مثال زیر دقت کنید :

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

نتیجه ی کد بالا : (ما مقادیر رو وارد کردیم )

1

حالا با کلیک روی دکمه submit ، mitra rahimi ارسال میشه .

مرورگرهایی که این خاصیت رو پشتیبانی می کنند : FireFox , Chrome , Safari , Opera

خاصیت formaction : با استفاده از این خاصیت میتونید ، مقادیر یک فرم رو به چند url ارسال کنید . دکمه ای که خاصیت formaction رو داره ، بدون توجه به action فرم ، مقادیر رو به url ی که برای خاصیت formaction تعیین شده ارسال می کنه (در صورتی که اون دکمه رو کلیک کنید) . خاصیت formaction فقط برای کنترل های نوع Submit و image کار می کنه. مثال :

 مرورگرهایی که این خاصیت رو پشتیبانی می کنند : FireFox , Internet Explorer , Chrome , Safari , Opera

خاصیت formenctype : این خاصیت تعیین می کنه که اطلاعات ارسالی از فرم به سرور با چه روشی کد گذاری شده و ارسال میشه ( فقط برای فرم هایی که متد ارسال اطلاعات آنها post هست به کار میره) . این خاصیت یه مقدار میگیره :

  • application/x-www-form-urlencoded : تمام کاراکتر های ارسالی از کنترل رمز گذاری می شوند . فاصله ها نیز به + تبدیل شده و کاراکترهای خاص نیز به کد متناظر ASCII آن تبدیل می شود .
  • multipart/form-data : هیچ کدام از کاراکتر ها رمز گذاری و Encode نمی شوند .
  • text/plain : فاصله ها به کاراکتر + تبدیل شده ، ولی سایر کاراکتر ها بدون تغییر ارسال می شوند .

مثال :

 در مثال بالا ما برای نام ، مقدار mitra rahimi رو وارد می کنیم . در صورتی که روی دکمه دوم کلیک کنیم نتیجه ای که برای ما نمایش میده بصورت mitra rahimi هست . بدون اینکه کاراکترها کد بشه و یا فاصله هارو + لحاظ کنه .

مرورگرهایی که این خاصیت رو پشتیبانی می کنند : FireFox , Internet Explorer , Chrome , Safari , Opera

خاصیت formmethod : این خاصیت روش HTTP ارسال اطلاعات فرم رو تعیین میکنه . مقداری که برای این خاصیت در نظر میگیرید میتونه یا post باشه یا get . و برای دکمه ای که این خاصیت در نظر گرفته میشه ، مقدار  method فرم رو نادیده میگیره و با روشی که توسط این خاصیت براش تعیین شده ، اطلاعات رو میفرسته . مثال :

 اطلاعات این فرم با توجه به مقدار method با روش get  ارسال میشه ، اما اگر دکمه دوم یعنی Submit using POST رو کلیک کنید ، اطلاعات با روش  post ارسال میشه .

مرورگرهایی که این خاصیت رو پشتیبانی می کنند : FireFox , Internet Explorer , Chrome , Safari , Opera

خاصیت formnovalidate : با استفاده از این خاصیت شما میتونید مانع اعتبارسنجی مقادیر بشید ، مثلا یک فیلد ایمیل دارید اما میخواین بدون اعتبارسنجی ارسال بشه . برای این منظور در submit فرم این خاصیت رو قرار میدیم . مثال :

 مرورگرهایی که این خاصیت رو پشتیبانی می کنند : FireFox , Internet Explorer , Chrome , Opera

خاصیت formtarget : با استفاده از این خاصیت در submit فرم ، میتونید تعیین کنید که ارسال اطلاعات به چه صورت انجام بشه : بصورت _blank , _parent , _self

 مرورگرهایی که این خاصیت رو پشتیبانی می کنند : FireFox , Internet Explorer , Chrome , Safari , Opera

خاصیت height و  width : این دو خاصیت تنها برای input های نوع image استفاده میشه  و طول و عرض فیلد رو مشخص می کنه . (لازم به ذکر هست که image همانند submit عمل میکنه ، با این تفاوت که شما میتونید برای دکمه ی ارسال تصویر هم در نظر بگیرید.) مثال :

 مرورگرهایی که این خاصیت رو پشتیبانی می کنند : FireFox , Internet Explorer , Chrome , Safari , Opera

خاصیت list : همانطور که در جلسه ی معرفی عناصر جدید در فرم های html5 گفته شد ، با استفاده از این خاصیت و عنصر datalist میتونید ، لیست پیشنهادی برای کاربرا ترتیب ببینید . مثال :

 مرورگرهایی که این خاصیت رو پشتیبانی می کنند : FireFox , Internet Explorer , Chrome , Opera

 

خاصیت min و max : با استفاده از این خاصیت ها ، میتونید حداقل و حداکثر برای مقادیر فیلدهاتون تعیین کنید . مثال :

 مرورگرهایی که این خاصیت رو پشتیبانی می کنند :  Internet Explorer , Chrome , Safari , Opera

خاصیت multiple : این خاصیت در input های نوع file کاربرد داره . زمانی که شما از این خاصیت استفاده می کنید ، فرمتون قابلیت این رو پیدا میکنه که بتونید چند فایل رو بصورت همزمان انتخاب کنید و آپلود رو انجام بدید . مثال :

 مرورگرهایی که این خاصیت رو پشتیبانی می کنند : FireFox , Internet Explorer , Chrome , Safari , Opera

خاصیت pattern : با استفاده از این خاصیت ، شما میتونید یک الگو برای فیلدتون تعریف کنید . این خاصیت در input های نوع text, search, url, tel, email, password کاربرد داره . مثلا شما میخواین فیلدی رو داخل فرمتون قرار بدید که مقدار صحیح این فیلد یک کلمه ی ۳ حرفی می باشد . بصورت زیر میتونید این موضوع رو پیاده کنید :

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

مرورگرهایی که این خاصیت رو پشتیبانی می کنند : FireFox , Internet Explorer , Chrome , Opera

خاصیت placeholder : زمانی که میخواین داخل فیلدتون یک مقدار پیشفرض رو نمایش بدید از خاصیت placeholder استفاده می کنید . این خاصیت در input های نوع text, search, url, tel, email, password کاربرد داره . به عنوان مثال یک فیلد جستجو دارید که میخواین جمله ی پیشفرض این فیلد ” عبارت مورد نظر را وارد کنید … ” باشه . بصورت زیر عمل می کنید :

 مرورگرهایی که این خاصیت رو پشتیبانی می کنند : FireFox , Internet Explorer , Chrome , Safari , Opera

خاصیت required : زمانی که میخواین ورود مقدار یک فیلد رو اجباری کنید از این خاصیت استفاده می کنید . مثال :

 در مثال بالا ، اگر شما بخواین این فیلد رو خالی ارسال کنید ، به شما پیغام خطا میده و مانع ارسال میشه .

مرورگرهایی که این خاصیت رو پشتیبانی می کنند : FireFox , Internet Explorer , Chrome , Opera

خاصیت step : با استفاده از این خاصیت شما میتونید یک ضریب عددی برای اعداد مجاز فیلدتون تعیین کنید . به عنوان مثال ، تنها باید اعدادی با ضریب ۳ در فیلد عددی وارد کنید :

 مرورگرهایی که این خاصیت رو پشتیبانی می کنند : Internet Explorer , Chrome , Safari , Opera

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

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۲

  • سلام
    خیلی خوب بود فقط اگه امکانش هست چند نمونه pattern کاربردی رو که بیشتر لازم میشه بذارین.
    با تشکر

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین