الخطوة الاولي : الرموز الأساسية

دعونا نبدأ مع نموذج التعليق الأساسي، وهذا النوع من النموذج الذي سيستخدم في موقع على شبكة الإنترنت للسماح للناس بأن تعطيك ردودفي محتوي موقعك مثل مقال كتبته، أو السماح لشخص للاتصال بك دون معرفة عنوان البريد. رمز يشبه هذا :

[html] <form>
Name: <input type="text" name="name" id="name" value="" />
Email: <input type="text" name="email" id="email" value="" />
Comments: <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
<input type="submit" value="submit" />
</form>
[/html]

الخطوة الثانية : إضافة الهيكل وسلوكه

بذلك ، ضغطت على النموذج رقم 1 الرابط أعلاه، تعبئته والنقر إرسال، لماذا لم تفعل أي شيء ، والسبب أنها لا تبدو سيئة جدا وكلها في سطر واحد؟ الجواب هو أن لايوجد لديك تنظيم او شكل لتقديمه بها حتي الان

دعونا نعود الى لوحة الرسم، مع نموذج جديد :

[html] <form id="contact-form" action="script.php" method="post">
<input type="hidden" name="redirect" value="http://www.opera.com" />
<ul>
<li>
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" />
</li>
<li>
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="" />
</li>
<li>
<label for="comments">Comments:</label>
<textarea name="comments" id="comments" cols="25" rows="3"></textarea>
</li>
<li>
<input type="submit" value="submit" />
<input type="reset" value="reset" />
</li>
</ul>
</form>
[/html]

الخطوة الثالثة : إضافة معاني الكلمات والأسلوب

النسخة النهائية التالية من النموذج بلدي على سبيل المثال :

[html] <form id="contact-form" action="script.php" method="post">
<fieldset>
<legend>Contact Us:</legend>
<ul>
<li>
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" />
</li>
<li>
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="" />
</li>
<li>
<label for="comments">Comments:</label>
<textarea name="comments" id="comments" cols="25" rows="3"></textarea>
</li>
<li>
<label for="mailing-list">Would you like to sign up for our mailing list?</label>
<input type="checkbox" checked="checked" id="mailing-list" value="Yes, sign me up!" />
</li>
<li>
<input type="submit" value="submit" />
<input type="reset" value="reset" />
</li>
</ul>
</fieldset>
</form>
[/html]