و <form> العنصر
وتستخدم نماذج HTML لجمع إدخال المستخدم.
و <form> عنصر يحدد شكل HTML:
<form>
.
أشكال HTML تحتوي على عناصر النموذج. عناصر النموذج هي أنواع مختلفة من عناصر المدخلات، وخانات، وأزرار الراديو، ويقدم أزرار، وأكثر من ذلك.
و <input> العنصر
و <input> العنصر هو أهم عنصر النموذج.
و <input> عنصر له العديد من الاختلافات، وهذا يتوقف على type السمة.
وفيما يلي أنواع المستخدمة في هذا الفصل:
اكتب وصف text يحدد إدخال النص العادي radio يحدد زر الإدخال (for selecting one of many choices) submit تعرف على زر تقديم (for submitting the form)
سوف تتعلم الكثير عن أنواع المدخلات في وقت لاحق في هذا البرنامج التعليمي.
إدخال النص
<input type="text"> يحدد حقل إدخال سطر واحد لإدخال النص:
مثال
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
انها محاولة لنفسك » هذه هي الطريقة التي سوف تبدو وكأنها في المتصفح:
الاسم الاول:
الكنية:
Note: النموذج نفسه غير مرئي. نلاحظ أيضا أن العرض الافتراضي للحقل النص هو 20 حرفا.
Radio زر الإدخال
<input type="radio"> تعرف على radio زر واحدة.
Radio أزرار تتيح للمستخدم اختيار واحد من عدد محدود من الخيارات:
مثال
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
انها محاولة لنفسك » هذه هي الطريقة أعلاه سيتم عرض رمز HTML في المتصفح:
الذكر
إناثا
آخر
على زر إرسال
<input type="submit"> تعرف على زر لتقديم نموذج لشكل معالج.
في معالج النموذج هو عادة صفحة الخادم مع برنامج نصي لمعالجة البيانات المدخلة.
يتم تحديد معالج النموذج في نموذج action سمة:
مثال
<form action="action_page.php">
First name:<br>
<input type="text"
name="firstname" value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
انها محاولة لنفسك » هذه هي الطريقة أعلاه سيتم عرض رمز HTML في المتصفح:
الاسم الاول:
الكنية:
و Action سمة
و action تحدد السمة العمل التي يتعين القيام بها عند تقديم النموذج.
الطريقة الشائعة لتقديم النموذج إلى الخادم، وباستخدام زر الإرسال.
عادة، يتم إرسال النموذج إلى صفحة ويب على خادم الويب.
في المثال أعلاه، تم تحديد برنامج نصي من جانب الخادم للتعامل مع شكل المقدمة:
<form action="action_page.php ">
إذا كان action تم حذف السمة، يتم تعيين العمل إلى الصفحة الحالية.
و Method سمة
على method تحدد السمة طريقة HTTP ( GET أو POST ) لاستخدامها عند تقديم أشكال:
<form action="action_page.php" method="get" > أو:
<form action="action_page.php" method="post" >
عند استخدام GET ؟
يمكنك استخدام GET (the default method) :
إذا كان تقديم النموذج السلبي (like a search engine query) ، ودون معلومات حساسة.
عند استخدام GET ، فإن بيانات النموذج تكون مرئية في عنوان الصفحة:
action_page.php?firstname=Mickey&lastname=Mouse GET هو الانسب لكميات صغيرة من البيانات. يتم تعيين قيود حجم في المتصفح الخاص بك.
عند استخدام POST ؟
يجب عليك استخدام POST :
إذا كان النموذج هو تحديث البيانات، أو يتضمن معلومات حساسة (password) .
POST تقدم الأمن بشكل أفضل لأن البيانات المقدمة غير مرئي في عنوان الصفحة.
و Name السمة
لتقديمها بشكل صحيح، يجب أن يكون كل حقل إدخال name السمة.
هذا المثال يقدم فقط "Last name" حقل الإدخال:
مثال
<form action="action_page.php">
First name:<br>
<input type="text"
value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
انها محاولة لنفسك »
تجميع بيانات نموذج مع <fieldset>
و <fieldset> مجموعة عناصر البيانات ذات الصلة في النموذج.
و <legend> عنصر يحدد توضيحية ل <fieldset> العنصر.
مثال
<form action="action_page.php">
<fieldset>
<legend>Personal
information:</legend>
First name:<br>
<input type="text" name="firstname"
value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
انها محاولة لنفسك » هذه هي الطريقة أعلاه سيتم عرض رمز HTML في المتصفح:
HTML Form سمات
وHTML <form> عنصر، مع تعيين كل الصفات الممكنة، سيبدو هذا:
<form action="action_page.php" method="post" target="_blank"
accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded"
autocomplete="off" novalidate>
.
اختبر نفسك مع تمارين! التمرين 1 » التمرين 2» التمرين 3 » التمرين 4»
ستجد هنا لائحة <form> الصفات:
الصفات وصف accept-charset يحدد محارف تستخدم في شكل المقدمة (الافتراضي: محارف الصفحة). action يحدد عنوان (url) حيث أن تقدم النموذج (الافتراضي: صفحة المقدمة). autocomplete يحدد إذا كان المتصفح يجب الإكمال التلقائي شكل (default: on) . enctype تحدد ترميز البيانات المقدمة (default: is url-encoded) . method يحدد طريقة HTTP استخدامها عند تقديم النموذج (default: GET) . name يحدد الاسم الذي يستخدم لتحديد النموذج (للاستخدام DOM: document.forms.name). novalidate تحدد أن المتصفح لا ينبغي التحقق من صحة النموذج. target تحديد الهدف من العنوان في action السمة (الافتراضي: _self).
سوف تتعلم المزيد عن سمات في الفصول القادمة.
مزيد من الأمثلة
إرسال البريد الإلكتروني من شكل
كيفية إرسال البريد الإلكتروني من نموذج.