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

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

دسته بندی موضوعات
سفارش تبلیغات

خاصیت های جدید در فرم های 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

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

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

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

  • راوندی

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

  • hossein hassani

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

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟