HTML5 الدرس الثالث فى

New Input Types(part 1)

يوجد العديد من الانواع الجديدة التى تم اضافتها الى تاج <input> من اجل عمل تحكم علية وتحسين الحماية ولكن هناك مشكلة فى ان هذة الاضافات الجديدة تعمل فقط على بعض المتصفحات وليس كلها وهى كالتالى:

(1)Email:

وهوعبارة عن حقل يسمح للمستخدم بادخال ايميلة بصورة صحيحة واذا كان الايميل غير صحيح فلا يقبل وتخرج رسالة تحذيرية.

مثال:

<form action=”myform.php”>

Email: <input type=”email” name=”mail”>

<input type=”submit”>

</form>

وهذا النوع يعمل مع متصفحات كجوجل كروم والفيرفوكس والانترنت اكسبلور وايضا متصفح اوبرا.

(2)URL:

وهو عبارة عن حقل يسمح للمستخدم بادخال اسم موقعة بصورة صحيحة واذا كان اسم الموقع غير صحيح فلا يقبل وتخرج رسالة تحذيرية.

مثال:

<form action=”myform.php”>

Name of yoursite: <input type=”url” name=”mysite”>

<input type=”submit”>

</form>

وهذا النوع يعمل مع متصفحات كجوجل كروم والفيرفوكس والانترنت اكسبلور وايضا متصفح اوبرا.

(3)Date && time && datetime-local:

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

مثال على الحالة الاولى:

<form action=”myform.php”>

Enter your birthday: <input type=”date” name=”mydate”>

<input type=”submit”>

</form>

مثال على الحالة الثانية:

<form action=”myform.php”>
Enter the time: <input type=”time” name=”mytime”>
<input type=”submit”></form>

مثال على الحالة الثالثة:

<form action=”myform.php”>

Enter your birthday with time : <input type=”datetime-local” name=”mydatetime”>

<input type=”submit”>

</form>

وهذا النوع يعمل مع متصفحات كجوجل كروم والاوبرا والسفارى.

(4)Month && Week:

حيث الحالة الاولى عبارة عن حقل يسمح للمستخدم بادخال الشهر والسنة والحالة الثانية فتسمح للمستخدم بادخال الاسبوع والسنة.

مثال على الحالة الاولى:

<form action=”myform.php”>

Enter your Birthday (month and year): <input type=”month” name=”mymonth”>

<input type=”submit”>

</form>

مثال على الحالة الثانية:

<form action=”myform.php”>

Enter Week: <input type=”week” name=”myweek”>

<input type=”submit”></form>

وهذا النوع يعمل مع متصفحات كجوجل كروم والاوبرا والسفارى.

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: