خصوصیت های جدید در HTML5

خصوصیت های جدید در HTML5

چندین خصوصیت جدید در HTML5 برای تگ های <form> و <input> اضافه شده است.

خصوصیت های جدید برای تگ <form>

• autocomplete
• novalidate

خصوصیت های جدید برای تگ <input>

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

خصوصیت autocomplete در <form> / <input>

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

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

نکته: این امکان وجود دارد که خصوصیت autocomplete برای form فعال و برای یک فیلد بخصوص غیرفعال باشد و یا برعکس.

توجه: خصوصیت autocomplete برای تگ <form> و تگ <input>ی که از انواع زیر باشد کار می کند:
 text, search, url, tel, email, password, datepickers, range, color

مثال (خصوصیت های جدید در HTML5)

<form action="demo_form.php" 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 را فعال کنید تا این مثال کار کند.

خصوصیت novalidate در <form>

خصوصیت novalidate یک خصوصیت boolean است.

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

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

مثال (خصوصیت های جدید در HTML5)

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

خودتان امتحان کنید »

خصوصیت autofocus در <input>

خصوصیت autofocus یک خصوصیت boolean است.

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

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

مثال (خصوصیت های جدید در HTML5)

First name:<input type="text" name="fname" autofocus>

خودتان امتحان کنید »

خصوصیت form در <input>

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

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

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

مثال (خصوصیت های جدید در HTML5)

<form action="demo_form.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

خودتان امتحان کنید »

خصوصیت formaction در <input>

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

خصوصیت formaction، خصوصیت action عنصر <form>را لغو می کند و با مقدار مورد نظر تغییر می دهد. 

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

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

مثال (خصوصیت های جدید در HTML5)

یک فرم HTML با دو دکمه submit، و دو action متفاوت:

<form action="demo_form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="demo_admin.php"
  value="Submit as admin">
</form>

خودتان امتحان کنید »

خصوصیت formenctype در <input>

خصوصیت formenctype، چگونگی رمز کردن داده های فرم، هنگام ارسال را مشخص می کند. (تنها زمانی که خصوصیت method عنصر <form> با مقدار "post" تنظیم شده باشد)

خصوصیت formenctype، خصوصیت enctype عنصر <form> را لغو می کند و با مقدار مورد نظر تغییر می دهد. 

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

مثال (خصوصیت های جدید در HTML5)

در دکمه اول، داده ها براساس enctype پیشفرض فرم ارسال می شوند، و در دکمه دوم داده ها بر اساس "multipart/form-data" رمزگذاری و ارسال می شوند:

<form action="demo_post_enctype.php" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

خودتان امتحان کنید »

خصوصیت formmethod در <input>

خصوصیت formmethod، مشخص می کند که ارسال اطلاعات از فرم HTML به سرور به چه شکل باشد، اگر آنرا با مقدار "get" پر کنیم، اطلاعات فرم در آدرس صفحه قرار می گیرد و ارسال می شود، و اگر آنرا با مقدار "post" تنظیم کنیم، اطلاعات به صورت یک آرایه ارسال می شود.(به صورت پیشفرض get در نظر گرفته می شود)

خصوصیت formmethod، خصوصیت method عنصر <form> را لغو می کند و با مقدار مورد نظر تغییر می دهد. 

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

مثال (خصوصیت های جدید در HTML5)

<form action="demo_form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" formaction="demo_post.php"
  value="Submit using POST">
</form>

خودتان امتحان کنید »

خصوصیت formnovalidate  در <input>

خصوصیت formnovalidate یک خصوصیت boolean است.

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

خصوصیت formnovalidate، خصوصیت novalidate عنصر <form> را لغو می کند و با مقدار مورد نظر تغییر می دهد. 

نکته: خصوصیت formnovalidate با نوع ورودی submit استفاده می شود.

مثال (خصوصیت های جدید در HTML5)

یک فرم با دو دکمه (با و بدون اعتبار سنجی):

<form action="demo_form.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>

خودتان امتحان کنید »

خصوصیت formtarget در <input>

خصوصیت formtarget نشان می دهد، پاسخی که از سرور دریافت شده است کجا نمایش داده شود و می تواند شامل: صفحه جاری، صفحه جدید، صفحه پدر، یك فریم خاص و ... باشد.

خصوصیت formtarget، خصوصیت target عنصر <form> را لغو می کند و با مقدار مورد نظر تغییر می دهد. 

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

مثال (خصوصیت های جدید در HTML5)

یک فرم با دو دکمه submit و targetهای متفاوت:

<form action="demo_form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Submit to a new window">
</form>

خودتان امتحان کنید »

خصوصیت های height و width در <input>

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

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

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

مثال (خصوصیت های جدید در HTML5)

تعریف یک عکس بعنوان submit، با خصوصیت های height و width:

<input type="image" src="/img_submit.gif" alt="Submit" width="48" height="48">

خودتان امتحان کنید »

خصوصیت list در <input>

این خصوصیت یک datalist را به یک فیلد متنی متصل می کند.

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

برای اتصال یک <datalist> به یک فیلد ورودی متنی، باید خاصیت list فیلد متنی را با id عنصر <datalist> تنظیم نمایید.

مثال (خصوصیت های جدید در HTML5)

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

خودتان امتحان کنید »

خصوصیت های min و max در <input>

خصوصیت های min و max، حداقل و حداکثر مقدار برای یک عنصر <input> را مشخص می کند.

توجه: این خصوصیت ها فقط برای انواع ورودی زیر استفاده می شود:
number, range, date, datetime, datetime-local, month, time ,week

مثال (خصوصیت های جدید در HTML5)

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

خودتان امتحان کنید »

خصوصیت multiple در <input>

خصوصیت multiple یک خصوصیت boolean است.

این خصوصیت نشان میدهد که مقادیر متعددی را می توان برای عنصر <input> تنظیم نمود. مقادیر را با کاما (,) از هم جدا کنید.

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

مثال (خصوصیت های جدید در HTML5)

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

خودتان امتحان کنید »

خصوصیت pattern در <input>

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

توجه: این خصوصیت فقط برای انواع ورودی زیر استفاده می شود:
text, search, url, tel, email, password

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

اگر مایلید درباره عبارات منظم در JavaScript بیشتر بدانید به مطلب JS Validation مراجعه کنید. همچنین سایت http://html5pattern.com نیز برای بررسی بیشتر بسیار مناسب است.

قطعا با عبارت منظم آشنا هستید، در زیر مفهوم برخی از علائم عبارات منظم آورده شده است:

• ^ : نشانه شروع می باشد. به طور مثال دستور bcd^ به معنی هر عبارتی است که با bcd شروع شود.
• $ : نشانه پایان می باشد. به طور مثال دستور $bcd به معنی هر عبارتی است که در انتها به bcd ختم شود.
• + : نشانه تکرار است و اگر پشت عبارتی قرار بگیرید باید حداقل یکبار تکرار شود.
• * : همانند + می باشد با این تفاوت که آن عبارت می تواند تکراری نداشته باشد.
• ? : اگر پشت عبارتی قرار بگیرد یعنی اینکه آن عبارت باید صفر یا یک بار تکرار شود.
• () : برای قسمت بندی عبارات به زیر عبارات و اولویت بندی نیز می باشد.
• [] : لیستی از کاراکترها که می خواهیم تطبیق دهیم در این دو کروشه قرار می گیرد.
• [ ^] : لیستی از کاراکترهائی که نمی خواهیم تطبیق داده شوند از این عبارت استفاده می کنیم.
• d\ : نشانه ارقام می باشد یعنی وقتی این عبارت بیاید منظور یکی از ارقام است.
• D\ : نشانه هر کاراکتری غیر از رقم می باشد.
• w\ : نشانه حرف یا عدد می باشد و کاراکترهای خاص نیست و معادل [a-zA-Z_0-9] است.
• W\ : نشانه کاراکترهای خاص می باشد و عدد یا حروف یا space نیست.
• s\ : نشانه کاراکتر space می باشد.
• S\ : نشان هر کاراکتری غیر از space می باشد.
• {} : مشخص کننده تعداد تکرارا می باشد و اگر داخل آن یک عدد نوشته شود یعنی اینکه عبارت قبل از آن دقیقا باید به تعداد آن عدد تکرارا شود ولی اگر دو عدد نوشته شود عبارت قبل از آن باید تکراری بین آن دو عدد باشد.
• | : بمعنی یا است. بعنوان مثال a|b یعنی یا a یا b
• - : بمعنی تا است. بعنوان مثال a-z یعنی از a تا z
• . : می تواند هر کاراکتری باشد.

مثال (خصوصیت های جدید در HTML5)

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

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

خودتان امتحان کنید »

خصوصیت placeholder در <input>

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

توجه: این خصوصیت فقط برای انواع ورودی زیر استفاده می شود:
text, search, url, tel, email, password

مثال (خصوصیت های جدید در HTML5)

<input type="text" name="fname" placeholder="First name">

خودتان امتحان کنید »

خصوصیت required در <input>

خصوصیت required یک خصوصیت boolean است.

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

توجه: این خصوصیت فقط برای انواع ورودی زیر استفاده می شود:
text, search, url, tel, email, password, date pickers, number, checkbox, radio, file

مثال (خصوصیت های جدید در HTML5)

Username: <input type="text" name="usrname" required>

خودتان امتحان کنید »

خصوصیت step در <input>

خصوصیت step، فاصله اعداد مجاز برای یک عنصر <input> را مشخص می کند.

مثال: اگر "3"=step باشد، اعداد مجاز می تواند ... 6 ، 3 ، 0 ، 3- ، 6- ... باشد.

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

توجه: این خصوصیت فقط برای انواع ورودی زیر استفاده می شود:
number, range, date, datetime, datetime-local, month, time ,week

مثال (خصوصیت های جدید در HTML5)

<input type="number" name="points" step="3">

خودتان امتحان کنید »

• قبلی
• بعدی