استثمر للحياة

برمجة و تصميم و تطوير المواقع

النماذج Forms في HTML5

حجم الخط

ht 2النماذج Forms في HTML5

من أكثر المواضيع استخداماً في تصميم صفحات الويب ,,, و قامت HTML5 بتقديم مجموعة من الوسوم الرائعة لها .... تعالوا نشوفها

بداية علينا قراءة موضوع النماذج Forms في HTML

و الان نقدم ما الجديد في النماذج Forms و التي قدمته HTML5

 

أولاً : وسوم النماذج Forms

<form>

وسم بداية نموذج

<input>

اكثر وسوم النماذج استخداماً و له أنواع عديدة شاهدها كما  يرتبط بالسمات name | value   type|

<textarea>

وسم لإدخال عدة سطور و له السمات  rowsوcols  <textarea rows="4" cols="50">

<button>

لإنشاء زر إدخال

<select>

لعمل قائمة إختيار متعددة

<optgroup>

وسم لربط مجموعة خيارات معاً و يستخدم مع < select >

<option>

وسم لتحديد عنصر فى قائمة الإختيار و يستخدم مع < select >

<label>

تستخدم لوضع عنوان للمدخلات و له سمتين  for| form

<fieldset>

لرسم إطار حول مجموعة من المدخلات و يستخدم معه <legend>

<legend>

يستخدم مع <fieldset>  لعمل عنوان لمجموعة المدخلات

<datalist>

وسم خيارات محددة مسبقا للوسم <input>  و التى تعرض فى شكل قائمة منسدلة له السمات list | id

<keygen>

يقوم بتوليد زوج من مفاتيح الأمان , يحتفظ باحدهم داخل جهاز المستخدم و يرسل الاخر للسيرفر

<output>

وسم لاخراج عمليات حسابية

 

 

أنواع المدخلات Input   Types   في HTML5

راجع انواع المدخلات فى Html

و هذه الانواع الجديدة
 

Color : يسمح للمستخدم بإدخال  لون معين للنموذج .  مثال

<form>
  Select your favorite color
  <input type="color" name="favcolor">
</form>

التنفيذ

ht typ1

 Date : يسمح للمستخدم بإدخال التاريخ .
 

Time :  يسمح للمستخدم بإدخال الوقت .
 

Datetime : يسمح للمستخدم بإدخال التاريخ و الوقت .
 

datetime-local : يسمح للمستخدم بإدخال التاريخ و الوقت و المنطقة الزمنية .

مثال

<form>
  Birthday
  <input type="datetime-local" name="bdaytime">

</form>

 

التنفيذ

 ht tim1

 

Month : يسمح للمستخدم بإدخال الشهر .


week : يسمح للمستخدم بإدخال رقم الأسبوع من السنة.


Email : يسمح للمستخدم بإدخال البريد الإلكتروني


Number : يسمح للمستخدم بإدخال أرقام

 

Range : يسمح للمستخدم بإدخال رقم في نطاق محدد و له السمتين max|min.

 

Search : يسمح للمستخدم بالبحث فى جوجل

<input type="search" name="googlesearch">


Tel : يسمح للمستخدم بإدخال رقم هاتف "تليفون" .

 

url : يسمح للمستخدم بإدخال عنوان موقع على النت

 

بعض سمات   النماذج

سمات النماذج في HTML

value : سمة للوسم <input>لتحديد قيمة إبتدائية للمدخل يجب على المستخدم حذفها قبل الإدخال .

 

readonly : سمة للوسم <input>تجعل الحقل إجباري لا يمكن تغير محتواه .

 

Placeholder : تقوم بكتابة عبارة ما " تلميح " داخل حقل الادخال , و يختفي هذا التلميح عند كتابة المستخدم بياناته . و تعمل فقط مع :

text, search, url, tel, email, password.
 

required : سمة للوسم <input>   تشير إلى إن هذا الحقل مطلوب إدخاله . تستعمل مع :

text, search, url, tel, email, password, date pickers, number, checkbox, radio, file
 

Autocomplete : هي سمة الإكمال التلقائي و لها قيمتين "on|off " .  و هي  تعمل داخل الوسم  < form>   لتستكمل مدخلات  < input> - حسب ما أدخله المستخدم من قبل - فيما يخص الأنواع  :

 text, search, url, tel, email, password, datepickers, range, color

مثال

<form action="action_page.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>

 

Autofocus : تستخدم داخل <input>  لوضع المؤشر فى أول حقل إدخال تلقائياً .

 

Form : تستخدم لفصل أحد حقول الإدخال عن النموذج ليبقى إختياري .

مثال

<form action="action_page.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">

 

Formnovalidate : هي سمة عدم التحقق من بيانات النموذج عند تقديمه و هي  تعمل داخل الوسم< submit>   .

 

novalidate : هي سمة عدم التحقق من بيانات النموذج عند تقديمه و هي  تعمل داخل الوسم  < form>   .

 

height |width : هما سمتان يستخدمان مع الوسم <img>    لتحديد ارتفاع و عرض الصورة .

 

List : تستخدم مع <input>  لتشير إلى <Datalist>

مثال

<input list="mycar">
<datalist id=" mycar ">
  <option value="BMW">
  <option value="Toyota">
  <option value="mazda">
</datalist>

 

min | max : سمتان تحددان القيمة الاقصى و الادنى  مع <input >, و يستخدمان مع الأنواع التاية من المدخلات :

 number, range, date, datetime, datetime-local, month, time , week.

مثال : لإدخال رقم قيمته  بين 1 و 5

<inputtype="number" name="quantity" min="1" max="5">

 

step : سمة للوسم <input>   تستخدم لتحديد ثابت للأعداد المتتالية فمثلاً نستخدم step="2"لجعل الاعداد المدخلة هكذا

{..,4 , 2 , 0 , -2, -4 , .. } و هي تستعمل مع

number, range, date, datetime, datetime-local, month, time , week.2

 

Multiple : سمة للوسم  <select >  تشير لوجود عدد من العناصر داخل  <select >

 

Size : سمة للوسم <input>تقوم بتحديد أقصى عدد من المحارف  للمدخلات . تختلف عن فى انها لا تحدد نوع المدخلات .

 

maxlength : سمة للوسم <input>   تقوم بتحديد أقصى عدد من المحارف  للمدخلات . تختلف عن فى انها لا تحدد نوع المدخلات .

 

pattern : سمة للوسم <input>   تقوم بتحديد نوع معين للمدخلات في  مثلاً حروف فقط أو أرقام فقط كما تحدد عدد المدخلات

مثال :

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

المثال يشترط إدخال حروف فقط [A-Za-z]سواءً كبيرة أو صغيرة و لا تزيد عن {3}ثلاثة حروف .

 


 

الموضوع  :  *النماذج Forms في HTML5 * المرجع : استثمر للحياة  investolife 



اعلان تجاري
اعلان 468