طراحی سایت تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
02188471521   ۰۲۱۴۰۸۸۱۰۳۸

آموزش HTML – بخش یازدهم

آموزش HTML | آموزش HTML5

در بخش یازدهم از آموزش HTML با فرم ها آشنا می شویم و در بخش سیزدهم و بخش چهاردهم، المان های فرم را به طور کامل بررسی خواهیم کرد.

طراحی فرم با HTML

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

فرم نیز یک از المان های صفحه است که با تگ <form>  ایجاد می شود که این تگ به تنهایی چیزی را در صفحه قرار نمی دهد و این المان های فرم هستند که بخش های مختلفی مثل نام و نام خانوادگی، ای میل، دکمه های رادیویی و … را ایجاد می کنند. پس تگ <form>  یک دربرگیرنده است که المان های دیگری را در خود جای می دهد. حال با این المان ها آشنا می شویم.

ورودی فرم

مهمترین بخش یک فرم، ورودی های آن است. این بخش ها توسط تگ <input>  وارد می شوند و از آنجایی که چندین ورودی مختلف داریم ( نام و نام خانوادگی، ای میل و … )، توسط خصیصه type نوع آن را مشخص می کنیم. توجه کنید که تگ <input>  فقط تگ آغاز دارد و یک تگ تهی است که تگ پایان ندارد.

به عنوان مثال برای قرار دادن بخش نام و یا نام خانوادگی و در کل برای بخش هایی که باید با حروف الفبا پر شوند به خصیصه type مقدار text می دهیم. یعنی این بخش با متن پر خواهد شد.

وقتی که خصیصه type مقدار radio داشته باشد، دکمه های رادیویی در صفحه قرار می گیرند. مقدار submit برای خصیصه type ، دکمه تایید و ارسال را به وجود می  آورد که برای ارسال فرم به سمت سرور است. جزئیات این بخش ها را در همین مقاله خواهیم آموخت.

ورودی متن

فرض کنید می خواهید نام و نام خانوادگی کاربر را دریافت کنید. برای نام یک جعبه متن و برای نام خانوادگی جعبه متن دیگری می خواهیم. و همانطور که گفتیم مقدار خصیصه type برای این بخش ها text است. خصیصه دیگری که باید برای این ورودی ها تعیین شود، خصیصه name است که برای هر بخش باید منحصر به فرد باشد. اگر این خصیصه برای ورودی های مختلف یکسان باشد، مقدار یکی از ورودی ها به سرور ارسال می شود. همچنین حد اکثر 20 کاراکتر در حالت پیش فرض می توان در این بخش ها وارد کرد.

تگ form | آموزش html5 فارسی

دکمه رادیویی

در بعضی مواقع نیاز است که در فرم گزینه هایی قرار دهیم که کاربر یکی از آنها را انتخاب کند. مثلا کاربر باید برای جنسیت یک گزینه ( یا زن یا مرد ) را انتخاب کند. برای ایجاد این بخش، مقدار خصیصه type را radio انتخاب می کنیم و برای تمام دکمه های رادیویی خصیصه name با مقدار یکسان را به کار می بریم. علاوه بر خصیصه های type و name ، خصیصه value را باید تعیین کنیم. مقدار این خصیصه در تعیین گزینه انتخاب شده و ذخیره آن در سرور کاربرد دارد.

زمانی که می خواهیم یک دکمه به صورت پیش فرض وقتی صفحه باز می شود انتخاب شده باشد، خصیصه checked را برای دکمه مورد نظر می نویسیم.

 

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

دکمه تایید و ارسال

وقتی که فرم پر شد، اطلاعات کاربر باید برای سرور ارسال شود و در آنجا در صفحه ای به نام form-handler پردازش شود. ارسال فرم را با دکمه سابمیت انجام می دهیم.

Form-handler دارای آدرسی است که در سرور قرار دارد و با یک زبان سمت سرور طراحی می شود. چگونگی کار کردن این صفحه را در آموزش های php به طور کامل بررسی خواهیم کرد. آدرس صفحه form-handler را با خصیصه action در تگ آغاز تگ form تعیین می کنیم.

تگ form | آموزش html5 فارسی

در بخش هایی که باید با حرووف الفبا پر شوند، مانند قسمت نام و نام خانوادگی، با استفاده از خصیصه value عبارتی را که می خواهیم درون ورودی نمایش داده شود را تعیین می کنیم که کاربر با کلیک در ورودی، می تواند متن را حذف کرده و متن جدید را وارد کند. این ویژگی برای دکمه ارسال هم همین کاربرد را دارد.

قبل و بعد از کلیک بر روی دکمه ارسال، آدرس بار مرورگر را چک کنید!!!!

متدهای ارسال

زمانی که فرم تکمیل و آماده ارسال به سرور شد، اطلاعات را باید با یکی از دو متد GET و یا POST ارسال کنیم. متد ارسال را هم با استفاده از خصیصه method در تگ آغاز تگ <form>  تعیین می کنیم.

متدی که به صورت پیش فرض استفاده می شود متد GET است و زمانی استفاده می شود که اطلاعاتی که قرار است ارسال شوند، اطلاعات حساسی نیستند. در کل اطلاعاتی که با این متد ارسال می شوند اطلاعاتی کوتاه و غیر حساس هستند که در آدرس بار مروگر نمایش داده می شوند.

متد POST برای ارسال اطلاعات شخصی و حساس به کار می رود. این اطلاعات در آدرس بار مرورگر نمایش داده نمی شوند.  با این متد هر حجم اطلاعاتی را می توان ارسال کرد درصورتی که ارسال اطلاعات با متد GET محدود است.

خصیصه Name

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

تگ form | آموزش html5 فارسی

خصیصه های <fieldset> و <legend>

در فرم ها قسمت های مختلفی وجود دارند که اطلاعات آنها به هم مربوط می باشد. مثلا اطلاعات نام و نام خوانوادگی و نام پدر، تاریخ تولد و سن و … . این اطلاعاتی را که به هم مربوط می باشند را درون تگ <fieldset>  قرار می دهیم و برای آن نامی  را انتخاب می کنیم که نام انتخابی را در تگ <legend>  می نویسیم.

در واقع با این کار فرم را به چند بخش تقسیم می کنیم و برای هر بخش نامی  را تعیین می کنیم. تقسیم بندی فرم با <fieldset>  انجام می شود و اطلاعاتی که درون این تگ قرار می گیرند، هنگام نمایش در مرورگر درون کادری مجزا نمایش داده خواهند شد. و نام گذاری هر قسمت را با <legend>  انجام می دهیم که این نام قسمتی از کادر اطراف هر قسمت از فرم را اشغال می کند. به مثال زیر توجه کنید:

تگ form | آموزش html5 فارسی

با این شناخت اولیه از فرم، در جلسه دوازدهم آموزش HTML دیگر المان های فرم را بررسی خواهیم نمود.

نوشته های مرتبط

دیدگاه ‏خود را بنویسید