تبلیغات
یادداشت های من - آموزش HTML5 – جلسه نهم : صفات فرم

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

حسین (کیوان) جهانبخش آبکنار

جستجو

 

آموزش HTML5 – جلسه نهم : صفات فرم

پنجشنبه 30 تیر 1390   06:15 ب.ظ

صفات فرم جدید در HTML5

در این جلسه ما به بعضی صفات جدید تگ های <form> و <input> می پردازیم.

خصوصیات فرم جدید:

  • autocomplete
  • novalidate

خصوصیات فیلدهای ورودی جدید:

  • autocomplete
  • autofocus
  • form
  • form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
  • height and width
  • list
  • min, max and step
  • multiple
  • pattern (regexp)
  • placeholder
  • required

 

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

مرورگرهای firefox، Opera و Chrome بهترین پشتیبانی را از ایت صفات جدید دارند ولی IE و Safari از آنها جز در چند مورد محدود پشتیبانی نمی کنند.

 

صفت autocomplete

این صفت مشخص می کند که فرم باید یک تابع autocomplete داشته باشد.

نکته: این صفت برای تگ <form> و این انواع ورودی تگ <input> به کار می رود: text، search، url، telephone، email، password، datepickers، range و color.

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

مثال: (از لینک زیر برای مشاهده مثال به صورت کامل استفاده کنید: http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_autocomplete )

<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

نکته: در بعضی مرورگرها باید خاصیت Autocomplete را فعال کنید تا این مثال کار کند.

 

صفت autofocus

این صفت باعث می شود که بعد از لود شدن صفحه اوتوماتیک روی آن فیلد فوکوس کند.

نکته: صفت autofocus برای تمام انواع ورودی ها کار می کند.

مثال:

User name: <input type="text" name="user_name"  autofocus="autofocus" />

 

صفت form

این صفت فرم یا فرم هایی که آن فیلد به آن ها تعلق دارد را مشخص می کند.

نکته: صفت form برای تمام انواع ورودی ها کار می کند.

این صفت باید به id فرم مورد نظرتان اشاره کند.

مثال:

<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />

 

نکته: برای اتصال یک فیلد به چند فرم باید با space بین id فرم ها فاصله بگذارید.

 

صفاتی برای تغییر صفات فرم

این صفات برای لغو بعضی از صفاتی است که برای تگ form تنظیم شده است.

این صفات عبارتند از:

formaction: صفت action فرم را بازنویسی می کند. (یعنی صفت Action که برای فرم تنظیم شده است را لغو و آن را با مقدار ورد نظر تغییر می دهد.)

formenctype: صفت enctype فرم را بازنویسی می کند.

formmethod: صفت method فرم را بازنویسی می کند.

formnovalidate: صفت novalidate فرم را بازنویسی می کند.

formtarget: صفت target فرم را تغییر می دهد.

 

نکته: بازنویسی صفات فرم فقط برای این انواع ورودی <input> کار می کند: submit و image.

مثال:

<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true"
value="Submit without validation" />
<br />
</form>

نکته: از این صفات می توان برای ساخت دکمه های submit متفاوت که کارهای متفاوتی انجام می دهند استفاده کرد.

 

صفات height و width

این صفات ارتفاع و عرض تصاویر برای نوع ورودی image مشخص می کند.

نکته: همانطور که مشخص است این صفت فقط برای نوع ورودی image کار می کند.

مثال:

<input type="image" src="img_submit.gif" width="24" height="24" />

 

صفت list

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

نکته: این صفت برای انواع ورودی زیر فقط کار می کند: text،  search،  url،  telephone،  email،  datepickers، range و color.

مثال:

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="Hussein Jahanbakhsh" value="http://www.husseinjahan.mihanblog.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

 

صفات min، max و step

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

نکته: این صفت فقط برای این انواع ورودی کار می کند: date pickers، number و range>

مثال:

Points: <input type="number" name="points" min="0" max="10" step="3" />

 

صفت multiple

این صفت نشان میدهد که مقادیر متعددی می توان برای آن فیلد ورودی انتخاب کرد. بین مقادیر با کاما (,) فاصله بیندازید.

نکته: این صفت برای انواع ورودی زیر کار می کند: email و file

Select images: <input type="file" name="img" multiple="multiple" />

 

صفت novalidate

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

این صفت برای تگ <form> و این انواع ورودی کار می کند: text، search، url، telephone، email، password، date pickers، range و color.

مثال:

<form action="demo_form.asp" novalidate="novalidate">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>

 

صفت pattern

این صفت الگویی برای بررسی اعتبار یک فیلد ورودی مشخص می کند. این الگو یک یک عبارت منظم (regular expression) است که می توانید در جستجو در اینترنت عبارات منظم و نحوه ایجاد آن ها را بیابید.

نکته: این صفت با این انواع ورودی کار می کند: text، search، url، telephone، email، password.

مثال زیر یک فیلد متنی را نشان می دهد که می تواند فقط شامل 3 حرف باشد و بیشتر از آن را نمی پذیرد. (3 حرف و نه اعداد یا کاراکترهای خاص)

Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />

 

صفت placeholder

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

<input type="search" name="user_search"  placeholder="Search Hussein Jahanbakhsh’s Blog" />

 

صفت required

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

نکته: این صفت با انواع ورودی زیر کار می کند: text، search، url، telephone، email، password، date pickers، range، number، checkbox، radio و file.

Name: <input type="text" name="usr_name" required="required" />


نوشته شده توسط : حسین (کیوان) جهانبخش آبکنار

نوع مطلب : HTML 5 ،طراحی وب ،