آموزش طراحی سایت - قسمت هشتم

جلسه هشتم

طراحی فرم

• ایجاد فرم
• ایجاد کادر ویرایش در وب سایت  (Text)
• ایجاد ناحیه ی متنی (TexrArea)
• ایجاد جعبه های علامت  طراحی وب سایت
• ایجاد دکمه های رادیویی
• ایجاد منو وب سایت
• کردن فایل
• ایجاد دکمه های Submit و Reset
• ایجاد دکمۀ در طراحی وب سایت Submit گرافیکی
• ایجاد فیلد مخفی در فرم (Hidden)
• گروه بندی عناصر فرم (FieldSet)
• تعیین Tab Order برای عناصر فرم

 

 

 طراحی فرم :

فرم ها اجازه می دهند تا بتوانیم اطلاعات را از بازدیدکنندگان وب سایت ، جمع آوری و پردازش نماییم. به عنوان مثال شما می توانید با استفاده از فرم، سؤالات و پیشنهادات بازدیدکنندگان وب سایت را دریافت نمایید. در یک خرید الکترونیکی، کاربر می تواند با استفاده از پر کردن یک فرم، سفارشی جهت خرید تعدادی از کالاها برای فروشنده ارسال نماید. به عنوان مثالی دیگر، یک مجلۀ الکترونیکی را در نظر بگیرید. یک شخص می تواند با پر کردن فرم ثبت نام، در یک مجلۀ الکترونیکی عضو شود و از خدمات اینترنتی آن بهره مند گردد. مثلاً سفارشی برای دریافت مجلات جدید بدهد و یا مقاله ای را برای چاپ در آن مجله ارسال نماید. بدون فرم، صفحات وب، ایستا و یک طرفه خواهند بود؛ بنابراین فرم ها یکی از ابزارهای بسیار ضروری در وب سایت هستند.

در HTML امکاناتی جهت طراحی فرم ها پیش بینی شده است. فرم ها دارای عناصری مانند کادر ویرایشی، ناحیۀ متنی، جعبۀ علامت، دکمۀ رادیویی و منو جهت دریافت اطلاعات کاربران می باشند که در ادامه با آنها آشنا خواهیم شد. هر عنصر آن فرم، دارای دو مؤلفۀ نام و ارزش است. نام عنصر، مشخصۀ آن بوده و در کدنویسی کاربرد دارد. ارزش یک عنصر مقدار متناظر با آن با توجه به ورودی کاربر است. به عنوان مثال ارزش یک کادر ویرایشی، متن وارد شده در داخل آن است.

هر فرم دارای یک دکمۀ تأیید است که به محض فشرده شدن آن، اطلاعاتی که توسط کاربر در فرم پر شده است، به سرور تحویل داده می شود. به عنوان مثال فرمی را در نظر بگیرید که دارای یک کادر ویرایش به نام name است. اگر کاربر در این کادر مقدار Ali را تایپ نماید و بر روی دکمۀ تأیید کلیک نماید، آنگاه زوج ‘‘name=Ali’’ به عنوان نتیجۀ فرم، به سرور ارسال می شود.

هنگامی که یک فرم با کلیک بر روی دکمۀ تأیید، به سرور ارسال می شود، سرور یک اسکریپت پردازشگر را برای پردازش عناصر فرم اجرا می نماید. به عنوان مثال این اسکریپت ممکن است اطلاعات پر شده را در یک فایل یا Database ذخیره نماید. توجه نمایید که HTML یک زبان برنامه نویسی و یا یک زبان اسکریپتی نیست و نمی توان از آن برای پردازش یک فرم استفاده کرد. در اینگونه موارد از زبان های اسکریپتی مانند VBScript ، JavaScript ، CGI ، PHP و یا زبان های کاملی چون VB.NET استفاده می شود.

 

---

 

 

ایجاد فرم

در HTML برای ایجاد فرم از تگ FORM استفاده می شود. این تگ با /FORM پایان می یابد. عناصر فرم در بین این دو تگ قرار داده می شوند، که در ادامه نحوۀ آن را خواهیم دید. این تگ دارای دو ویژگی METHOD و ACTION است. ویژگی METHOD=’’?’’ تعیین می کند که اطلاعات فرم چگونه در اینترنت انتقال یابد. مقدار پیش فرض برای این ویژگی مقدار Get است. مقدار دیگر برای این ویژگی مقدار Post است. بعداً در مورد تفاوت این دو بیشتر صحبت خواهیم کرد. ویژگی ACTION=’’?’’ برای تعیین اسکریپت پردازشگر فرم استفاده می شود. اسکریپت پردازشگر، یک فایل بر روی وب سایت سرور است که مسئولیت پردازش عناصر فرم را پس از تحویل به سرور عهده دارد است. در این ویژگی به جای ? باید نام و مسیر نسبی فایل حاوی اسکریپت پردازشگر را جایگزین نمود. همان طور که اشاره شد، این فایل می تواند شامل کدهای یکی از زبان های اسکریپتی مانند VBScript ، JavaScript ، CGI ، PHP و یا زبان های کاملی چون VB.NET باشد. در صورتی که در سرور از تکنولوژی ASP استفاده شده باشد، زبان اسکریپتی VBScript بوده و پسوند فایل پردازشگر .asp است. در تکنولوژی ASP.NET ، از زبان هایی نظیر VB.NET یا C#.NET استفاده می شود و پسوند فایل پردازشگر .aspx است

 

مثال:

 

نکته

شما می توانید یک فرم را پس از تایید ، به جای ارسال به سرور ، یک ایمیل به شخص فرستاده شود

مثال


  

---

ایجاد کادر ویرایش  وب سایت (Text)

کادر ویرایش برای وارد نمودن متون تک خطی کوتاه استفاده می شود. مثلاً برای ورود نام، آدرس و پاسخ های کوتاه، از کادر ویرایش استفاده می شود. به کادر ویرایش، جعبۀ متن نیز گفته می شود. برای ایجاد کادر ویرایش از تگINPUT TYPE="text"  در داخل تگ FORM استفاده می شود. این تگ دارای ویژگی NAME=”?” است که به جای ? نامی برای کادر ویرایش انتخاب می شود. این نام بر روی صفحه دیده نمی شود، بلکه به عنوان مشخصۀ این کادر در نتیجه فرم در هنگام تحویل به سرور ظاهر می شود. نام یک عنصر از فرم باید ترکیبی از حروف، اعداد و زیر خط (_) باشد.

ویژگی SIZE=”?” طول کادر ویرایش را برحسب تعداد کاراکتر، تعیین می کند. این مقدار به تعداد کاراکترهای قابل تایپ در کادر ارتباطی ندارد و فقط جنبۀ ظاهری دارد. ویژگی MAXLEGTH=”?” حداکثر تعداد کاراکترهای قابل تایپ در کادر ویرایش را تنظیم می کند

مثال :

نکته1 : برای ایجاد کادر ویرایش به منظور دریافت password باید به جای TYPE=”text” از TYPE=”password” در تگ INPUT استفاده نمود. در این صورت وقتی کاربر در این کادر تایپ می کند، به جای نمایش کاراکترهای تایپ شده کاراکتر * نمایش داده می شود.

نکته2 : با استفاده از ویژگی VALUE=”?” در تگ INPUT می توان مقدار پیش فرضی برای کادر ویرایش تعیین کرد. همچنین در نظر داشته باشید که در هنگام تحویل فرم به سرور، مقدار تایپ شده توسط کاربر، به عنوان نتیجه در همین فیلد ذخیره می شود.

---

ایجاد ناحیه ی متنی (TexrArea)

ناحیۀ متنی برای ورود متون طولانی و چند خطی کاربرد دارد. در اینگونه موارد نمی توان از کادر ویرایش استفاده کرد. به عنوان مثال برای دریافت توضیحات پاسخ سؤالات و دیگر متون چندخطی از ناحیۀ متنی استفاده می شود. برای ایجاد ناحیۀ متنی از تگ TEXTAREA در درون تگ FORM استفاده می شود. این تگ باید با TEXTAREA خاتمه یابد. هر متنی که بین این دو تگ قرار بگیرد، به عنوان متن پیش فرض در ناحیۀ متنی، نمایش داده خواهد شد.

ناحیۀ متنی دارای ویژگی NAEM=”?” برای تعیین یک نام مشخصه برای آن است. علاوه بر این دارای دو ویژگی ROWS=”?” و COLS=”?” است که در آنها به جای ? مقداری برای تعیین سطر و تعداد ستون ناحیه متنی جایگزین می شود. این مقادیر فقط روی ابعاد ظاهری ناحیۀ متنی تأثیر خواهد گذاشت. منظور از تعداد ستون، اندازۀ عرض ناحیۀ متنی برحسب تعداد کاراکتر است.

 مثال :

نکته: در صورتی که نمی خوهید به کاربر، اجازۀ ویرایش متن موجود در ناحیه متنی را بدهید، از ویژگی READONLY در این تگ استفاده نمایید. واضح است که در این صورت یک متن پیش فرض در ناحیۀ متنی ایجاد خواهید کرد. این متن باید بین TEXTAREA و /TEXTAREA قرار داده شود.

---

ایجاد جعبه های علامت  در طراحی وب سایت(CheckBox)

جعبۀ علامت، کادر مربع شکل کوچکی است که کاربر می تواند با کلیک کردن، آن را انتخاب نموده و یا از حالت انتخاب خارج نماید. با انتخاب یک جعبۀ علامت توسط کاربر یک علامت تیک در کنار آن ظاهر می شود. در صورتی که در فرم تان نیاز به این دارید بتواند از بین چند گزینه هیچ، یکی یا چند گزینه را به دلخواه خود انتخاب نماید، از این عنصر استفاده نمایید.

مثال :

برای افزودن هر جعبۀ علامت به فرم، از تگ INPUT TYPE=”checkbox” در داخل FORM استفاده نمایید. در صورتی که چندین جعبه علامت مرتبط به هم در فرم استفاده می نمایید، به کمک ویژگی NAME در این تگ، نام یکسانی را برای هر یک از این جعبه های علامت انتخاب نمایید.

ویژگی VALUE از این تگ اجازه می دهد تا برای هر یک از جعبه های علامت موجود در یک گروه، یک نام متمایز انتخاب شود. این نام بر روی فرم ظاهرنمی شود و در هنگام تحویل فرم به سرور، در صورت تیک خوردن در این جعبه، در نتیجه فرم ظاهر خواهد شد؛ بنابراین سرور متوجه خواهد شد که کاربر کدام دسته از جعبه های علامت را انتخاب کرده است.

ویژگی CHECKED از این تگ اجازه می دهد، تا یک جعبۀ علامت را به طور پیش فرض در حالت تیک خورده قرار دهید.

---

ایجاد دکمه های رادیویی (Radio)

دکمه رادیویی داایره کوچکی است که کاربر می تواند با عمل کلیک  آن را انتخاب نماید و یا از حالت انتخاب خارج نماید .

برای افزودن هر دکمۀ رادیویی به فرم، از تگ INPUT TYPE=”radio” در داخل تگ FORM استفاده نمایید. با توجه به اینکه اغلب باید از چندین دکمۀ رادیویی مرتبط به هم در فرم استفاده کرد، به کمک ویژگی NAME در این تگ، نام یکسانی را برای هر یک از این دکمه ها انتخاب نمایید. ویژگی VALUE از این تگ اجازه می دهد تا برای هر یک از دکمه های رادیویی موجود در یک گروه، یک نام متمایز انتخاب شود. این نام بر روی فرم ظاهر نمی شود و در هنگام تحویل فرم به سرور، در صورت انتخاب این دکمه، در نتیجه فرم ظاهر خواهد شد؛ بنابراین سرور متوجه خواهد شد که کاربر کدام یک از دکمه های رادیویی را انتخاب کرده است. ویژگی CHECKED از این تگ اجازه می دهد تا یکی از دکمه های رادیویی را به طور پیش فرض در حالت انتخاب قرار دهید.

---

ایجاد منو  در وب سایت(Option)

در مواردی لازم است کاربر در لیستی از انتخاب ها، گزینه ای را مورد انتخاب قرار دهد. به عنوان مثال می خواهید به کاربر اجازه دهید تا گروه سنتی خود را از میان لیستی از گروه های سنی مشخص شده انتخاب نماید، یا موردی را در نظر بگیرید که کاربر باید نام شهر یا کشور خود را از یک لیست انتخاب نماید. در اینگونه موارد باید از منو استفاده نمایید.

برای ایجاد منو باید از تگ SELECT در داخل تگ FORM استفاده کرد. این تگ با /SELECT پایان می یابد. با استفاده از ویژگی NAME=”?” نامی برای این منو انتخاب نمایید. این نام در هنگام تحویل فرم به سرور، در نتیجه فرم ظاهر می شود. با استفاده از ویژگی SIZE=”?” اندازۀ ظاهری این منو را تعیین نمایید. به طور پیش فرض اندازۀ یک منو به قدری است، که تنها اولین گزینۀ آن قابل مشاهده است. با استفاده از این گزینه می توان این اندازه را بیشتر کرد.

برای ایجاد هر گزینه از منو، از تگ OPTION استفاده نمایید. با استفاده از ویژگی VALUE=”?” نامی برای این گزینه انتخاب نمایید. اگر کاربر این گزینه را انتخاب کرده باشد، این نام در هنگام تحویل فرم به سرور، در نتیجه فرم ظاهر می شود.

نکته: برای تعیین گزینۀ پیش فرض از یک منو، باید در آن گزینه، از ویژگی SELECTED استفاده نمود.

---

UpLoad کردن فایل

هنگامی که کاربر فایلی را از سرور به کامپیوتر خود منتقل می نماید، به این عمل Download گفته می شود برعکس وقتی کاربر فایلی را به سرور ارسال می نماید، به این عمل Upload گفته می شود؛ بنابراین Upload عکس عمل Download است. به عنوان مثال فرض کنید یک مجلۀ الکترونیکی دارای یک وب سایت بر روی اینترنت است و شما می خواهید مقاله ای را جهت چاپ در این مجله برای سرور ارسال نمایید. مقالۀ شما می تواند یک فایل .doc و یا .pdf باشد. در اینگونه موارد نیاز به Upload کردن فایل خواهید داشت.

برای دادن اجازۀ Upload به کاربر، باید از ویژگی ENCTYPE=”multipart/form-data” در تگ FORM استفاده نمایید. همچنین در تگ FORM باید از تگ INPUT TYPE=”file” استفاده کنید.

پس از ایجاد این تگ، یک کادر ویرایش بر روی فرم ظاهر می شود، که در کنار آن یک دکمۀ Browse قرار دارد. کاربر می تواند نام و مسیر کامل فایل موجود بر روی کامپیوتر خود را در این کادر ویرایشی تایپ نماید. یا می تواند از دکمۀ Browse برای انجام این کار کمک بگیرد.

نکنه: با استفاده از ویژگی SIZE=”?” در این تگ، می توانید طول ظاهری کادر ویرایش را تعیین کنید.

 

---

ایجاد دکمه های Submit و Reset

دکمۀ Submit دکمه ای است که کاربر می تواند پس از پر نمودن اطلاعات فرم، با کلیک بر روی آن، اطلاعات فرم را به سرور ارسال نماید؛ بنابراین وجود آن بر روی فرم الزامی است. برای ایجاد دکمۀ Submit از تگ INPUT TYPE=”submit” در تگ فرم استفاده نمایید. با کمک ویژگی VALUE=”?” در این تگ، عنوانی برای این دکمه تعیین نمایید. این عنوان یک نام ظاهری است، که بر روی دکمه ظاهر می شود.

دکمۀ Reset دکمه ای است، که کاربر می تواند با کلیک بر روی آن اطلاعات فرم را به حالت اولیۀ آن برگرداند. این دکمه در مواردی که کاربر در ورود اطلاعات اشتباه کرده باشد، مفید واقع می شود؛ بنابراین بهتر است از آن استفاده شود. برای ایجاد دکمۀ Reset از تگ INPUT TYPE=”reset در تگ فرم استفاده نمایید. با کمک ویژگی VALUE=”?” در این تگ عنوانی برای این دکمه تعیین نمایید. این عنوان یک نام ظاهری است که بر روی دکمه ظاهر می شود.

---

ایجاد دکمۀ Submit گرافیکی در طراحی وب سایت

دکمۀ Submit گرافیکی، تصویری است که به کاربر اجازه می دهد، تا پس از پر کردن اطلاعات فرم، با کلیک کردن بر روی آن، اطلاعات را به سرور ارسال نماید.

هنگامی که کاربر بر روی دکمۀ Submit گرافیکی کلیک می کند، اطلاعات فرم به همراه مختصات افقی و عمودی نشانگر ماوس به سرور ارسال می شود. این تصویر دارای این مزیت است که کاربر بتواند با توجه به نواحی مختلف تصویر، و کلیک بر روی ناحیۀ موردنظر، انتخابی را انجام دهد. به عنوان مثال اگر این تصویر، نقشۀ جهان باشد، کاربر می تواند با کلیک بر روی ناحیۀ موردنظر خود، قاره، کشور و یا شهر خود را انتخاب نماید.

به عنوان مثال دیگر فرض کنید، شما می خواهید به کاربر اجازه دهید تا از میان هتل های مختلف موجود در یک شهر، با توجه به موقعیت آنها، یکی را رزرو نماید. در این صورت می توانید یک نقشه از شهر که شامل نام و موقعیت هتل ها است را به عنوان دکمۀ Submit گرافیکی نمایش دهید و با توجه به مختصات افقی و عمودی نشانگر ماوس، هتل موردنظر کاربر را تشخیص دهید.

برای ایجاد دکمۀ Submit گرافیکی از تگ INPUT TYPE=”image” در داخل تگ FORM استفاده نمایید. با استفاده از ویژگی SRC=”?” در این تگ مسیر و نام تصویر موردنظر را تعیین نمایید. به کمک ویژگی NAME=”?” نامی برای این تصویر انتخاب نمایید. این نام مختصات افقی (x) و عمودی (y) نشانگر ماوس را که کاربر در آن موقعیت بر روی تصویر کلیک کرده است، در هنگام ارسال فرم به سرور تعیین خواهد کرد. این مختصات نسبت به گوشه بالا و چپ تصویر سنجیده می شود.

توجه: شما باید یک اسکریپت پردازشگر را بر روی سرور برای پردازش نتایج فرم آماده کرده باشید. این اسکریپت با توجه به مقادیر مختصات افقی و عمودی نشانگر ماوس، عملی را که مورد درخواست کاربر است انجام می دهد. مثلاً نام وی را در هتل موردنظر رزرو نموده و نتیجه را در یک Database ذخیره می نماید.

---

ایجاد فیلد مخفی در فرم (Hidden)

فیلد مخفی عنصری از فرم است که به صورت ظاهری بر روی فرم دیده نمی شود، ولی در نتیجه فرم، در هنگام تحویل به سرور ظاهر می شود. این فیلد برای مواردی نظیر ذخیره تاریخ و زمان ایجاد فرم مفید است. همین طور برای مواردی که برنامه نویس می خواهد مقداری را به دور از چشم کاربر برای خود ذخیره نماید. در صورتی که در یک صفحه از چندین فرم استفاده شود، نیز استفاده از این فیلد مفید است. در این مورد می توان نامی برای هر فرم تعیین نموده و آن را در فیلد مخفی ذخیره نمود. در هنگام تحویل فرم به سرور به کمک این فیلد، می توان تشخیص داد که اطلاعات رسیده مربوط به کدام یک از فرم ها است.

تگ INPUT TYPE=”hidden” در تگ FORM استفاده نمایید. با استفاه از ویژگی NAME=”?” نامی برای این فیلد انتخاب نمایید. با استفاه از ویژگی VALUE=”?” مقداری برای این فیلد انتخاب نمایید. این مقدار در هنگام تحویل فرم به سرور در نتیجه فرم ظاهر خواهد شد.

---

گروه بندی عناصر فرم (FieldSet)

در مواقعی که تعداد عناصر فرم زیاد باشد، بهتر است این عناصر را در گروههای مرتبط به هم دسته بندی نمود. این کار باعث خوانایی بهتر فرم شده و از سردرگمی کاربر می کاهد. وقتی تعدادی از عناصر فرم را در یک گروه قرار می دهید، معمولاً آنها را در داخل یک کادر نشان می دهد. این گروه می تواند دارای یک عنوان نیز باشد.

اگر می خواهید برای این گروه عنوانی تعیین کنید، باید عنوان گروه را در بین تگ های LEGEND و /LEGEND قرار دهید. این تگ دارای ویژگی ALIGN=”?” است که محل قرارگیری عنوان را در کادر معین می کند. به جای ? یکی از مقادیر left ، right ، top و bottom قرار داده می شود.

مثال: در دستورات زیر، یک فرم برای دریافت مشخصات فردی کاربر نمایش داده می شود که در آن سه فیلد نام، آدرس E-mail و آدرس محل سکونت شخص در یک گروه با عنوان Your Information دسته بندی شده است. مرورگر به دور این سه فیلد یک کادر با عنوان داده شده، نمایش خواهد داد.

 

همان طور که مطلع هستید، هنگامی که کاربر فرمی را در یک صفحه مشاهده می کند، می تواند با استفاده از دکمۀ Tab بر روی عناصر فرم، حرکت نماید. ترکیب این حرکت به طور معمول براساس ترتیب ظاهری عناصر فرم است. اگر شما نیاز دارید که این ترتیب را تغییر دهید و یک ترتیب منطقی ایجاد نمایید، باید از ویژگی TABINDEX=”?” در تگ هر عنصر از فرم استفاده نمایید. به جای ? شماره ترتیب آن عنصر از فرم را قرار دهید.

---

خلاصه ی  جلسه هشتم آموزش طراحی وب سایت :

فرم ها یکی از ابزارهای اصلی در وب سایت هستند و اجازه می دهند تا بتوانیم اطلاعات را از بازدیدکنندگان سایت جمع آوری و پردازش نماییم. هنگامی که یک فرم با کلیک بر روی دکمۀ تأیید، به سرور ارسال می شود، سرور یک اسکریپت پردازشگر را برای پردازش عناصر فرم اجرا می نماید. به عنوان مثال این اسکریپت ممکن است اطلاعات پر شده را در یک فایل یا Database ذخیره نماید. در این مورد از زبان های اسکریپتی مانند VBScript ، JavaScript ، CGI ، PHP و یا زبان های کاملی چون VB.NET استفاده می شود.

در HTML برای ایجاد فرم از تگ FORM استفاده می شود. این تگ با /FORM پایان می یابد. عناصر فرم در بین این دو تگ قرار داده می شوند. این تگ دارای دو ویژگی METHOD و ACTION است. ویژگی METHOD=’’?’’ تعیین می کند که اطلاعات فرم چگونه در اینترنت انتقال یابد. مقدار پیش فرض برای این ویژگی مقدار Get است. مقدار دیگر برای این ویژگی مقدار Post است.

برای اینکه اطلاعات یک فرم پس از تأیید به جای ارسال به سرور، به E-mail یک شخص فرستاده شود. باید از ویِژگی ENCTYPE=”text/plain” و ACTION=”mailto:?” استفاده نمایید. به جای ? باید آدرس E-mail آن شخص را جایگزین نمایید.

برای ایجاد کادر ویرایش از تگINPUT TYPE="text"  در داخل تگ FORM استفاده می شود. این تگ دارای ویژگی NAME=”?” است که به جای ? نامی برای کادر ویرایش انتخاب می شود. ویژگی SIZE=”?” طول ظاهری این کادر را بر روی صفحه برحسب تعداد کاراکتر، تعیین می کند. این ویژگی MAXLEGTH=”?” حداکثر تعداد کاراکترهای قابل تایپ در کادر ویرایش را تنظیم می کند.

برای ایجاد ناحیۀ متنی از تگ TEXTAREA در درون تگ FORM استفاده می شود. این تگ باید با /TEXTAREA خاتمه یابد. هر متنی که بین این دو تگ قرار بگیرد، به عنوان متن پیش فرض در ناحیۀ متنی، نمایش داده خواهد شد. ناحیۀ متنی دارای ویژگی NAEM=”?” برای تعیین یک نام مشخصه برای آن است. علاوه بر این، دارای دو ویژگی ROWS=”?” و COLS=”?” است که در آنها به جای ? مقداری برای تعیین سطر و تعداد ستون ناحیه متنی جایگزین می شود.

جعبۀ علامت، کادر مربع شکل کوچکی است که کاربر می تواند با عمل کلیک، آن را انتخاب نموده و یا از حالت انتخاب خارج نماید. با افزودن هر جعبۀ علامت به فرم، از تگ INPUT TYPE=”checkbox” در داخل FORM استفاده نمایید. در صورتی که چندین جعبۀ علامت مرتبط به هم در فرم استفاده می نمایید، به کمک ویژگی NAME در این تگ، نام یکسانی را برای هر یک از این جعبه های علامت انتخاب نمایید. ویژگی VALUE از این تگ اجازه می دهد تا برای هر یک از جعبه های علامت موجود در یک گروه، یک نام متمایز انتخاب شود. ویژگی CHECKED از این تگ اجازه می دهد، تا یک جعبۀ علامت را به طور پیش فرض در حالت تیک خورده قرار دهید.

دکمۀ رادیویی، دکمۀ دایره شکل کوچکی است که کاربر می تواند با عمل کلیک کردن، آن را انتخاب نموده و یا از حالت انتخاب خارج نماید. در صورتی که در فرم تان نیاز به این دارید که کاربر بتواند از بین چند گزینه فقط یکی را انتخاب نماید، از این عنصر استفاده نمایید.

برای افزودن هر دکمۀ رادیویی به فرم، از تگ INPUT TYPE=”radio” در داخل تگ FORM استفاده نمایید. به کمک ویژگی NAME در این تگ، نام یکسانی را برای هر یک از این دکمه ها انتخاب نمایید. ویژگی VALUE از این تگ اجازه می دهد تا برای هر یک از دکمه های رادیویی موجود در یک گروه، یک نام متمایز انتخاب شود. ویژگی CHECKED از این تگ اجازه می دهد تا یکی از دکمه های رادیویی را به طور پیش فرض در حالت انتخاب قرار دهید.

از تگ INPUT TYPE=”submit” برای ایجاد دکمۀ Submit در تگ فرم استفاده نمایید. با کمک ویژگی VALUE=”?” در این تگ، عنوانی برای این دکمه تعیین نمایید. این عنوان یک نام ظاهری است، که بر روی دکمه ظاهر می شود. برای ایجاد دکمۀ Reset از تگ INPUT TYPE=”reset در تگ فرم استفاده نمایید. با کمک ویژگی VALUE=”?” در این تگ عنوانی برای این دکمه تعیین نمایید. این عنوان یک نام ظاهری است که بر روی دکمه ظاهر می شود.

برای ایجاد دکمۀ Submit گرافیکی از تگ INPUT TYPE=”image” در داخل تگ FORM استفاده نمایید. با استفاده از ویژگی SRC=”?” در این تگ مسیر و نام تصویر موردنظر را تعیین نمایید. به کمک ویژگی NAME=”?” نامی برای این تصویر انتخاب نمایید. این نام، مختصات افقی (x) و عمودی (y) نشانگر ماوس را که کاربر در آن موقعیت بر روی تصویر کلیک کرده است، در هنگام ارسال فرم به سرور تعیین خواهد کرد. این مختصات نسبت به گوشۀ بالا و چپ تصویر سنجیده می شود.

برای ایجاد فیلد مخفی از تگ INPUT TYPE=”hidden” در تگ FORM استفاده نمایید. با استفاه از ویژگی NAME=”?” نامی برای این فیلد انتخاب نمایید. با استفاده از ویژگی VALUE=”?” مقداری برای این فیلد انتخاب نمایید. این مقدار در هنگام تحویل فرم به سرور، در نتیجه فرم ظاهر خواهد شد.

برای گروه بندی مجموعه ای از عناصر فرم، باید آنها را در داخل تگ FIELDSET و /FIELDSET قرار دهید. اگر می خواهید برای این گروه عنوانی تعیین کنید، باید عنوان گروه را در بین تگ های LEGEND و /LEGEND قرار دهید. این تگ دارای ویژگی ALIGN=”?” است که محل قرارگیری عنوان را در کادر معین می کند. به جای ? یکی از مقادیر left ، right ، top و bottom قرار داده می شود.

برای تعیین Tab Order برای عناصر فرم، از ویژگی TABINDEX=”?” در تگ هر عنصر از فرم استفاده نمایید. به جای ? شماره ترتیب آن عنصر از فرم را قرار دهید