» ساخت فرم در HTML

ساخت فرم در HTML

خب دوستان امروز میخوایم درباره فرم ها در HTML صحبت کنیم. چگونه با استفاده از یک سند HTML فرم ثبت نام ایجاد کنیم واطلاعات را پس از ارسال در یک فرم دریافت کنیم؟


تعریف فرم:


به بخشی از صفحه گفته می‌شود که کاربر با استفاده از ورودی ها می‌تواند فرمی را پر کند. فرم ها معمولا دارای اجزای داخلی چون: فیلد های متنی، چک باکس، دکمه های رادیویی، دکمه ثبت فرم و دیگر عناصر ورودی هستند.


چگونگی ساخت یک فرم در HTML ویژگی های آن:


برای تعریف فرم از تگ <form> استفاده میوشد که دارای صفات زیر است:


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


method : روش ارسال اطلاعات فرم را مشخص می کند. اطلاعات فرم را به دو روش ارسال می کند:


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

2. post : در این روش اطلاعات فرم را پنهان می کند و قابل دسترسی نمی باشد.


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


دیگر تگ های پرکاربرد برای ساخت فرم در HTML:


<fieldset> 

برای کادر بندی فرم استفاده می شود. 


<legend>

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


<input>

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


   

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


text : برای دریافت داده های متنی استفاده می شود.

number : برای دریافت داده های عددی استفاده می شود.

password : برای دریافت رمز عبور استفاده می شود.

email : برای دریافت ایمیل استفاده می شود.

Date : برای دریافت تاریخ استفاده می شود.

time : برای دریافت زمان استفاده می شود.

submit : ایجاد دکمه برای ارسال اطلاعات به سرور می باشد.

reset : ایجاد دکمه برای تنظیم مجدد می باشد.(مقادیر فرم را به مقادیر پیش فرض بر میگرداند.)

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

checkbox : برای انتخاب یک یا چند گزینه استفاده می شود.

radio : ایجاد دکمه های رادیویی،که به کاربر اجازه انتخاب یک گزینه را می دهد. 

rang : ایجاد یک رنج از اعداد برای مقدار دهی یا امتیاز دهی استفاده می شود.

color : ایجاد قسمتی برای انتخاب رنگ می باشد.

file : برای آپلود فایل استفاده می شود.

 


<textarea>

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


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

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


<select>

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


1. value : مقدارآیتم های تگ<option> می باشد که برای سرور ارسال می شود.

2. selected : مشخص می کند به طور پیش فرض یک گزینه در حالت انتخاب باشد.


<datalist>

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


<lable>

قرار دادن برچسب برای input ها می باشد.


<button>

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


کلام آخر:


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


https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit



تگ ها :   ساخت فرم در HTML
فرم ارسال نظر


مطالب پیشنهادی از سراسر وب


  ساخت وبلاگ  


آخرین مطالب این وبلاگ

آخرین مطالب مجله


طراحی وب سایت شخصی و شرکتی ، تحویل دو روزه طراحی وب سایت شخصی و شرکتی ، تحویل دو روزه مشاهده