آموزش فرم ها در html

آموزش فرم ها در html

 

در این جزوه قصد داریم با فرم ها در html آشنا شویم.

فرم ها برای گرفتن اطلاعات از کاربر استفاده می­شود. در اینجا با سه نوع فرم (text box, radio button, submit)

برای ارسال داده ها میتوانیم از متد get و post استفاده کنیم که اطلاعات بیشتر در این بخش مربوط به back end است.

تا پایان این جزوه میخواهیم راه رسیدن به فرم زیر را یاد بگیریم.

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

برای به وجود آوردن یک فرم باید از تگ <FORM></FORM> استفاده کنیم.

سپس در تگ FORM خود میتوانیم از تگ <input> استفاده میکنیم که بخش های مختلفی از فرم را برای ما تشکیل میدهد.

این تگ قسمت های مختلفی دارد.

<input type=”” name=””>

بخش type مشخص میکند که میخواهید این فرم از چه نوعی باشد؟

در قسمت اول چگونگی ساخت یک text box را یاد میگیریم. برای این کار باید type را text قرار دهید و name را یک نام قرار میدهد. قسمت name مربوط به اتصال این input به کدهای php ما است.

 

آموزش html آموزش رایگان طراحی سایت

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

آموزش فرم در html

 

ساخت فرم در html

میتوانیم یکی از گزینه ها را به صورت default انتخاب کرده که اگر کاربر یکی از آن­ها را انتخاب نکند، همیشه یکی از این دکمه ها فعال باشد. برای نمونه من گزینه دوم را به صورت default انتخاب میکنیم. برای این کار از مورد checked استفاده میکنیم.

فرم در html

چگونه در سایت فرم بسازیم

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

برای ساخت submit باید نوع type را submit قرار دهیم.

همچنین یک name قرار میدهیم.

 

ساخت فرم با html

 

آموزش ساخت form در html

حال فرم را پر کنید و submit را کلیک کنید.

نحوه ساخت فرم در html

و میبینیم که در ادامه URL اطلاعات شما نوشته شده و ارسال به صورت متد get انجام شده است.

فرم در html css

همچنین میتوانید دستور دهید پس از فشردن SUBMIT شما به چه صفحه ای هدایت شوید. دستور action را در تگ <FORM> بنویسید و مقدار action را یک فایل .html دلخواه که از قبل درست کرده اید را بنویسید. پس از کلیک کردن submit شما به یک صفحه جدید هدایت میشوید.

فرم در html

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

در تگ FORM متد را مشخص کنید. به صورت مثال پایین.

ساخت فرم در html

میبینید که بعد از فشردن submit، دیگر اطلاعات در ادامه URL نوشته نمیشود.

طراحی فرم در html

حال میتوانیم کل فرم را در یک کادر قرار دهید.

کل فرم را در یک تگ <field set> قرار دهید.

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

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

و همچنین میتوانید موضوع فرمتان را بالای فرم بنویسید. این کار را با تگ <legend> انجام دهید.

چگونه در سایت فرم ایجاد کنیم

ساخت فرم در سایت

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

 

 

قسمت قبل آموزش (لیست های نامرتب)

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *