HTML5 الدرس الخامس فى

HTML5 New Attributes For Form And Input

(1)Autocomplete:

وهى عبارة عن خاصية تقوم بحفظ معلومات مستخدم الموقع التى قام بادخالها سابقا فى حقول النصوص للتيسير على المستخدم عند دخولة الموقع مرة اخرى ولها قيمتان الاولى (on) لتشغيل الخاصية والاخرى (off) لغلق الخاصية كالتالى:

<form action=”myform.php” autocomplete=”on”>

First name:<input type=”text” name=”firname”><br>

Last name: <input type=”text” name=”lasname” autocomplete=”off”><br>

<input type=”submit”>

</form>

(2)novalidate && formnovalidate && required:

حيث الخاصية الاولى تقوم بتمرير بيانات المستخدم دون مراجعة صيغتها ومثال على ذلك اذا ادخل المستخدم ايميل بشكل خاطىء اى بدون صيغة الايميل المعروفة (example@anymail.domaine) وتعمل هذة الخاصية مع تاج (form) والخاصية الثانية تقوم بنفس المهمة مع الفرق انها تعمل مع تاج (input) اما الخاصية الثالثة فهى تجبر المستخدم على ادخال بيانات فى الحقل النصى اى عدم تركها فارغة كالتالى:

(a)novalidate:

<form action=”myform.php” novalidate>

E-mail: <input type=”email” name=”mail”>

<input type=”submit”>

</form>

(b)formnovalidate:

<form action=”myform.php” novalidate>

E-mail: <input type=”email” name=”mail”>

<input type=”submit” formnovalidate>

</form>

(c)required:

<form action=”myform.php”>

Fullname: <input type=”text” name=”funame” required>

<input type=”submit”>

</form>

(3)Autofocus:

وهى عبارة عن خاصية تعمل على تركيز الماوس على حقل نصى مثلا عند تحميل الصفحة كالتالى:

<form action=”myform.php”>
First name:<input type=”text” name=”firname” autofocus><br>
Last name: <input type=”text” name=”lasname”><br>
<input type=”submit”></form>

(4)placeholder:

وهى عبارة عن خاصية تظهر نص داخل الحقول لتعرف مستخدم الموقع بنوع البيانات التى يدخلها كالتالى:

<input type=”text” name=”firname” placeholder=”First name”>
<input type=”text” name=”firname” >

(5)Height and Weight Of Input Tag:

عن طريق هذة الخاصية يمكن ضبط طول وعرض تاج (input) كالتالى:

<input type=”image” src=”imgname.extention” width=”30″ height=”40″>

(6)Pattern:

عن طريق هذة الخاصية يتم وضع قيد للمستخدم لادخال حروف وارقام معينة فى حقل النص لا يتعداها وذلك كنوع من حماية حسابات المستخدمين:

<form action=”myform.php”>
<input type=”text” pattern=”[A-Za-z]”>
<input type=”submit”></form>

حيث [A-Za-z] هى عبارة عن (regular expressions) وهنا يتم وضع قيد على مستخدم الموقع لادخال بيانات عن طريق الحروف الكابتل والسمول بداية من ِaA الى zZ فقط ولمعرفة المزيد عن (regular expressions) عن طريق اللينك التالى:

http://www.regular-expressions.info/

Advertisements

ضع تعليقك هنا

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: