يتم استخدام نموذج HTML لتلقي أنواع مختلفة من مدخلات المستخدم.
2. آلية العمل للشكل 3. تعريف النموذج (<Porm> </form> العلامات)نموذج HTML هو منطقة تحتوي على عنصر الوحدة. يمكن أن تشمل النماذج عناصر الإدخال ، مثل حقول النص ، وخانات الاختيار ، وصناديق الإصلاح المفردة ، وأزرار التقديم ، وما إلى ذلك. يمكن أن تحتوي النماذج أيضًا على قوائم ، Textarea ، Fieldset ، Legend and Label Elements. لاحظ أن عنصر <Form> هو عنصر كتلة ، والذي سينتج خصمًا قبل وبعد.
<form action = login.do method = post> <!-عناصر النماذج هنا-> </form>4. السمة النموذج
الإجراء: انظر أين يتم إرسال بيانات النموذج عند تقديم النموذج. الإجراء هو: أولاً ، يشير عنوان URL (عنوان URL/عنوان URL النسبي المطلق) ، بشكل عام إلى برنامج في الخادم ، يستقبل البرنامج البيانات (أي قيمة عنصر وحدة الجدول) المقدمة من النموذج للمعالجة المقابلة. على سبيل المثال ، <form Action = http://www.xxx.com/login.do> ، عندما يقدم المستخدم هذا النموذج ، سيقوم الخادم بتنفيذ موقع الويب العام http://www.xxx.com/ العام. ثانياً ، استخدم عنوان URL لبروتوكول MailTO ، وذلك لإرسال محتوى النموذج في شكل البريد الإلكتروني. هذا الموقف نادر ، لأنه يتطلب من الزائر تثبيت برنامج إرسال البريد وتعيينه بشكل صحيح على جهاز الكمبيوتر الخاص بالكمبيوتر. ثالثًا ، القيمة الفارغة ، إذا كانت الإجراء فارغة أو غير مكتوبة ، فهذا يعني إرسالها إلى الصفحة الحالية.
الطريقة: تحدد هذه السمة الطريقة التي يقدم بها المتصفح البيانات في النموذج إلى برنامج معالجة الخادم. فيما يتعلق بقيمة الطريقة ، فإن الأكثر استخدامًا هو الحصول على و post. أولاً ، ستقدم بيانات GET GET ، كمية البيانات المرسلة بواسطة GET محدودة بشكل عام أقل من 1 كيلو بايت. ثانياً ، باستخدام طريقة POST ، سيرسل المتصفح بيانات النموذج كجزء من هيكل طلب HTTP إلى الخادم. بشكل عام ، تكون البيانات المرسلة بواسطة طريقة النشر أكبر من كمية البيانات المرسلة بواسطة طريقة GET ؛ يجب استخدام الطريقة (مثل الاستعلام). ثالثًا ، طرق أخرى (رأس ، وضع ، حذف ، تتبع أو خيارات ، إلخ). في الواقع ، حدد معيار HTTP الأولي الطريقة المقابلة لمختلف العمليات ، ولكن لم يتم ملاحظة الكثير منها لاحقًا.
الهدف: أين تحدد هذه السمة نتيجة عنوان URL الذي تم إرجاعه بواسطة عنوان URL المحدد في سمة الإجراء. القيم هي _blank (مفتوحة في النافذة الجديدة) ، _ sel (فتح في نفس الإطار ، القيمة الافتراضية) ، _parent (فتح في الإطار الأصل) ، _ أعلى (فتح في النافذة بأكمل إطار إطار مفتوح في الصين).
العنوان: اضبط النص الذي تم عرضه بواسطة عتبة صغيرة عندما يتم وضع ماوس زوار موقع الويب على أي موضع في النموذج.
enctype: يحدد كيفية تشفير بيانات النموذج قبل إرسالها إلى الخادم. القيمة: يتم تشفير القيمة الافتراضية/X-WWW-Form-urlencoded -Data: لا رمز حرف. عند استخدام نموذج يحتوي على عنصر تحكم في تحميل الملف ، يجب استخدام هذه القيمة.
الاسم: اسم النموذج. لاحظ أن الفرق بين سمة المعرف: الاسم هو الاسم المستخدم أثناء التواصل مع الخادم ؛ .
2. عنصر وحدة الجدول 1. مربع نص واحد <إدخال نوع = text/> (القيمة الافتراضية لخاصية نوع الإدخال هي نص)<نوع الإدخال = اسم النص = الاسم/>
فيما يلي السمة الرئيسية لمربع النص المفرد:
<نوع الإدخال = اسم كلمة المرور = الاسم/>3. زر واحد <إدخال نوع = راديو/>
كيفية الاستخدام: استخدم زرًا واحدًا مع الاسم نفسه. يتم تعيين القيمة الأولية لزر الراديو بشكل صريح من خلال سمة القيمة.
<نوع الإدخال = اسم الراديو = قيمة الجنس = ذكر/> <إدخال نوع = الاسم الراديو = قيمة الجنس = أنثى/>4. مربع الفحص <نوع الإدخال = مربع الاختيار/>
استخدم مجموعة Check Button ، أي نفس مجموعة أزرار الاختيار مع نفس الاسم ، يتم تعيين قيمة عنصر عنصر جدول Check Button بشكل صريح بواسطة سمة القيمة. ويتم تعبئة الاسم وإرسالها إلى القيمة复选框的 فحص 属性表示是否被选中 ， <نوع الإدخال = مربع الاختيار محدد /> 或者 <type type = checksed checked = checked /> (推荐) تم فحص 、 、 、 等这种一个可选值的属性都可以省略属性值 等这种一个可选值的属性都可以省略属性值جوهر
<type type = checkbox name = language value = java/> <type type = checkbox name = laanguage value = c/> <type type = checkbox name = laanguage va lue = c#/>5. المجال المخفي <نوع الإدخال = مخفي/>
عادةً ما يتم استخدام المجال المخفي لإرسال المعلومات إلى الخادم الذي لا يلزم عرضه على المستخدم.
<نوع الإدخال = الاسم المخفي = المجال المخفي/>6. تحميل الملف <إدخال نوع = ملف/>
مع الملف ، يجب تعيين enctype من النموذج على multipart/form-data ، وسمة الطريقة هي المنشور.
<name input = uploadedfile id = ToploadedFile type = file size = 60 ACCESS = TEXT/*/>7. مربع السحب <select> علامة
<select> التسمية قم بإنشاء مربع قائمة ، <potion> تسمية لإنشاء عنصر قائمة ، يستخدم <select> <potion> المتداخلة لتوفير مجموعة من الخيارات في مجموعة من الخيارات.
قم بتعيين خيار لتحديد: <Option Select> Beijing </point> أو <Option Select = SelectD> Beijing </soph> (طريقة التوصية) يمكن تعيينها كعنصر تحديد. كيفية تحقيق عدم وجود خيار ، أضف <value ortive = -1>-NOT- <POTION> ، ثم برمجة القيمة المحددة المحددة بواسطة SELECT IF-1 لم يتم تحديدها.
يمكن لخيار SELECT GROUP استخدام OPTGROUP لتجميع البيانات.
يمكن السماح <select> علامة وسمات متعددة بالاختيار من بينها (اضغط على مفتاح CTRL)
<حدد name = country size = 10> <ptgroup label = Africa> <value Option = gam> gambia </portion> <Option Value = Madagascar </potion> <borting> e = nam> namibia </potion> </ptgroup > <ptgroup label = Europe> <orpue value = fra> france </portive> <option value = Russia </potion> <spue value = uk> uk> uk </portion> tgroup> <ptgroup label = North America> < قيمة الخيار = CAN> CANANA </OPTION> <OPTION VALUES = MEX> MECICKO </OPTION> <OPTION VALUES = USA> USA </OPTION> </OPLCT>8. نص متعدد السطر <TextArea> </textarea>
نص متعدد السطر <TextArea> إنشاء مربع نص يمكنه إدخال نص متعدد الخط ، <TextArea> لا توجد سمات قيمة ، <TextArea> Text </dextarea> ، cols = 50 ، الصفوف = 15 تشير السمات إلى عدد الصفوف والأعمدة ، لم يحدد المتصفح يأخذ الشاشة الافتراضية.
<textarea name = textAreAcontent Rows = 20 Color = 50> محتوى العرض الأولي لمربع النص متعدد الخط </textarea>9.
يمكنك كتابة نصوص عادية للتعديل قبل <إدخال نوع = text> ، ولكن عند النقر فوق نص المعدل ، لن يحصل الإدخال على التركيز ، ولكن يمكنك استخدام التسمية. ش (فهم). AccessKey = u ، سمة أخرى من التسمية. ملاحظة: لتعيين معرف فريد للتحكم المعدل. أعتقد أن اثنين من ملصقات <label> </billy> مفيدة جدًا لـ <input type = radio/> و <input type = checkbox/>.
<type type = radio name = sex id = male value = 0 checked = checked /> <label for = male> male </waw> <input type = radio name = fmale value = 1 /> <label for = fmale> female </billy> <input type = radio name = sex id = secret value = 2/> <label for = secret> confidential </billy>10. <fieldset> </fieldset> التسمية
تقسم علامة Fieldset السيطرة في منطقة ما وتبدو أكثر انتظامًا.
<FieldSet> <legend> الهوايات </legend> <type type = checkbox value = basketball/> <type type = checkbox value = mountain climbing/<input type = checkbox value = read/> </f ildset>11. إرسال زر <نوع الإدخال = إرسال/>
عندما ينقر المستخدم على برنامج معالجة الخادم المحدد بواسطة <inputt type = submit/> ، سيتم إرسال بيانات النموذج إلى برنامج معالجة الخادم المحدد بواسطة سمة الإجراء الخاصة بتسمية <Turman>. نص الزر الافتراضي أسفل IE الصيني هو نص عرض لزر تعديل خصائص القيمة.
<نوع الإدخال = إرسال قيمة = إرسال/>12. زر إعادة الضبط <نوع الإدخال = إعادة تعيين/>
عندما ينقر المستخدم على الزر <إدخال type = reset/> ، يتم إعادة تعيين القيمة في النموذج إلى القيمة الأولية. عندما يقدم المستخدم النموذج ، فلن يتم إرسال اسم وقيمة زر إعادة الضبط إلى الخادم.
<نوع الإدخال = قيمة إعادة تعيين = زر إعادة الضبط/>13. الزر العادي <إدخال نوع = زر/>
عادة ما يتم استخدام الأزرار العادية للنقر لتنفيذ رمز البرنامج النصي.
<نوع الإدخال = قيمة الزر = الزر العادي/>14. زر الصورة <إدخال نوع = Image/>
تحدد سمة SRC لزر الصورة ملف مصدر الصورة ، والذي لا يحتوي على سمة قيمة. يمكن أن يحل زر الصورة محل <إدخال نوع = إرسال/> ، والآن يمكنه أيضًا تعيين مظهر الزر <إدخال نوع = إرسال/> على صورة مباشرة.
<نوع الإدخال = الصورة src = bg.jpg />ثالثًا ، أمثلة الشكل
هذا المثال عبارة عن صفحة تسجيل بسيطة يتم تنفيذها باستخدام النموذج لاستخدام تصميم النموذج.
<! > الجدول: 450 بكسل ؛ } </style> </head> <body color: block ؛ post> <table align = center cellspacing = 0 cellpadding = 0> <td> اسم المستخدم: </td> <type type = text/</r> </r> <tr> <td> كلمة المرور: </td> < td> <type type = password/> </td> </tr> <tr>/</td> </tr> <l> <td> الرجاء تحديد السوق: </td> <d> <select> <ptgroup label = China> <borting> Gansu Province </potion> <bort> Province Province Henan Province </Option> <tort> Shanghai </bort Option> <borting> Chicago </portive> <tort> News on> </ptgroup> </select> </td> </tr> <td> الرجاء تحديد الجنس: </td> <td> <type = اسم الراديو = معرف الجنس = قيمة ذكر = 0 تم التحقق منه = محدد/>> <تسمية لـ = male> ذكر </lable> <إدخال نوع = راديو اسم = معرف الجنس = 1/> <label for = fmale> أنثى </label > <type type = radio name = sex id = secret va lue = 2/> <label for = secret> السرية </label> </td> </td> <td> الرجاء تحديد المهنة: </td> <إدخال type = radio id = student name = phink /> <label for = student> student </balled> <input type = radio id = teacher name = phink /> <label for = teacher> <input type = radio id = اسم آخرون = مهنة/> <تسمية لـ = others> الآخرين </label> </td> </td> <td> الرجاء تحديد الهوايات: </td> <fieldset> <legend> هواياتك </legend> <إدخال اكتب = اسم مربع الاختيار = معرف هواية = سلة bboll checkd = checked /> <label for = scarkeboll> تشغيل كرة السلة < /label> <إدخال نوع = اسم مربع الاختيار = hobb y id = run /> <label for = run> تشغيل < /label > <type type = checkbox name = hobby id = read /> <label for = read> اقرأ < /label> <إدخال type = checkbox name = hobby id = surfing /> <label for = sur fing> الوصول إلى الإنترنت < /label > </fieldset> </td> </tr> <l> <td> الملاحظات: </td> <textarea color = 30> هذا هو محتوى الملاحظات </textarea> </td> </tr> tr> <td> & nbsp ؛ html>