آموزش فرم ها در html به صورت کاملا حرفه ای و کامل(بخش اول)

آموزش ساخت فرم در HTML:
 

در این بخش،به معرفی کامل عناصر وساخت فرم در html به صورت کاربردی پرداخته ایم، به طوری که با دیدن این بخش از آموزش، که شامل سه ویدئو می باشد، اطلاعات خیلی جامعی برای ساخت فرم در HTML یاد خواهید گرفت و نیاز به هیچ منبع دیگری برای یادگیری نخواهید داشت.

درهر بخش (ویدئو)، سعی کرده ایم تا علاوه بر پوشش دادن مباحث ذکر شده، شما عزیزان را با صفت های css نیز آشنا کنیم.

 در این بخش نیز با صفت های border  و padding وتگ <div>آشنا می شوید:

• border : برای ایجاد حاشیه استفاده می شود.
• padding : برای ایجاد فاصله محتوا از لبه های یک شی می باشد.
• تگ <div> : برای تقسم بندی صفحه html استفاده می شود.

فرم ها در HTML :

<form> : برای ایجاد فرم استفاده می شود و دارای این صفات می باشد:

• action : آدرس صفحه دریافت کننده اطلاعات می باشد.(برای ارسال اطلاعات فرم به سرور)
• method : روش ارسال اطلاعات فرم را مشخص می کند.اطلاعات فرم را به دو روش ارسال می کند:

    get : در این روش اطلاعات فرم را در خط آدرس مقصد،نمایش می دهد.
    post :  در این روش اطلاعات فرم را پنهان می کند و قابل دسترسی نمی باشد.

• enctype : نحوه رمزگذاری داده های فرم را هنگام ارسال آن به سرور مشخص می کند.       

<fieldset>  : برای کادر بندی فرم استفاده می شود. 
 <legend> : برای تعریف عنوان تگ <fieldset> استفاده می شود.

<input>: اطلاعات را از کاربر دریافت می کند.دارای این صفات می باشد:

• type : نوع داده های ورودی را مشخص می کند.

• name : نام input را مشخص می کند.

• value : مقدار اولیه برای input مشخص می کند.

• placeholder : متن کم رنگی در پس زمینه input برای مقدار نمونه یا توضیح کوتاهی می باشد.

• maxlength : حداکثر تعداد کارکترهای مجاز برای ورودی را مشخص می کند.

• min : حداقل مقدار برای ورودی را مشخص می کند.

• max : حداکثر مقدار برای ورودی را مشخص می کند.

• Size : تعداد کارکترهای ورودی را مشخص می کند. 

• readonly : input فقط خواندنی وغیر قابل تغییر می شود.

• disabled : input را غیرفعال می کند.

• title : برای ایجاد tooltip می باشد.

• checked : مشخص می کند یک ورودی (radio-checkbox) به طور پیش فرض درحالت انتخاب باشد.

• required : ایجاد الزام برای خالی نبودن input می باشد.

• tabindex : برای جا به جایی بین input ها استفاده می شود و با مقدار دهی این صفت می توانیم ترتیب جا به جایی را مشخص کنیم.

• src : برای آدرس دهی استفاده می شود.

• multiple : کاربر می تواند بیش از یک مقدار را انتخاب کند.

•  stept : فاصله بین شماره ها را در یک ورودی مشخص می کند. برای مثال اگر 5 قرار دهیم، اعداد پنج تایی اضافه می شوند.

• outocomplete : مشخص می کند، داده ای را از قبل در خود نگهداری نکند.

• list : شامل گزینه های از پیش تعریف شده برای input، در تگ <datalist> می باشد.

آشنایی با انواع input :

• text : برای دریافت داده های متنی استفاده می شود.
• number : برای دریافت داده های عددی استفاده می شود.
• password : برای دریافت رمز عبور استفاده می شود.
• email : برای دریافت ایمیل استفاده می شود.
• Date : برای دریافت تاریخ استفاده می شود.
• time : برای دریافت زمان استفاده می شود.
• submit : ایجاد دکمه برای ارسال اطلاعات به سرور می باشد.
• reset : ایجاد دکمه برای تنظیم مجدد می باشد.(مقادیر فرم را به مقادیر پیش فرض بر میگرداند.)
• hidden : برای ایجاد فیلد مخفی می باشد،وبرای کاربر قابل مشاهده نیست، مقدارآن بدون مقدار دهی کاربر برای سرور ارسال می شود.
• checkbox : برای انتخاب یک یا چند گزینه استفاده می شود.
• radio : ایجاد دکمه های رادیویی،که به کاربر اجازه انتخاب یک گزینه را می دهد. 
• rang  : ایجاد یک رنج از اعداد برای مقدار دهی یا امتیاز دهی استفاده می شود.
• color : ایجاد قسمتی برای انتخاب رنگ می باشد.
• file : برای آپلود فایل استفاده می شود.

<textarea> : برای ایجاد یک بخش برای وارد کردن متن می باشد.مانند:آدرس، نظرات و... دارای دو صفت rows  و cols می باشد.

• rows : تعداد سطر در<textarea> را مشخص می کند.
• cols : تعداد ستون وعرض<textarea> را مشخص می کند.

<select> : برای ایجاد منوهای بازشونده می باشد. و برای ایجاد آیتم های منو از تگ <option> استفاده می شود.دارای این صفات می باشد :

• value : مقدارآیتم های تگ<option>  می باشد که برای سرور ارسال می شود.
• selected :  مشخص می کند به طور پیش فرض یک گزینه در حالت انتخاب باشد.

<datalist> : برای ایجاد لیستی از داده ها می باشد، و برای ایجاد آیتم های لیست از تگ <option> استفاده می شود.

<lable> :  قرار دادن برچسب برای input ها می باشد.

<button> : برای ایجاد دکمه استفاده می شود.با استفاده از صفت type می توانیم نوع دکمه را مشخص کنیم. این تگ دارای مقادیر  submit برای ارسال داده ها، reset برای تنظیم مجدد و button که برای ایجاد یک دکمه ساده می باشد.

ممنون که تا اینجا با ما همراه بودید،برای یادگیری نکات بیشتر و درک بهتر مطالب می توانید ویدئو آموزشی این بخش را مشاهده کنید.
 

نظرات

---

نادر راستگو

بسیار متشکرم از توضیحات عالی شما یک سؤال چطور میتوان به تمرینات دسترسی پیدا کنم چون تا به الان درس 11 فقط به یک تمرین برخوردم که آن هم تعغیر متن بود.مرسی

پشتیبانی 1

سلام نادر جان، شما می توانید درس اخر را دانلود کنید تمامی تمرین ها آنجا برایتان آمده است.

abolfazl

سلام خسته نباشید خیلی عالی فقط صفت step هست شما اشتبا تایپی نوشتین stept ولی در کل بسیار ممنون فقط خواستم بگم که درستش کنید

پشتیبانی 1

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

نگین

بسیار جامع و کامل توضیح داده شده، خیلی ممنون

پشتیبانی 1 ممنون که از دوره ما راضی بودید، موفق باشید.