فرم (Form) ها در HTML

آموزش فرم (Form) ها در HTML

  • آموزش فرم (Form) ها در HTML

  •   آموزش تگ from در HTML

  •   آموزش تگ input درون تگ form

  • آموزش صفت نوع text درون تگ input

  • آموزش صفت نوع password درون تگ input

  • آموزش صفت نوع radio درون تگ input

  • آموزش صفت نوع checkbox درون تگ input

  • آموزش صفت نوع submit درون تگ input

  • آموزش صفت نوع reset درون تگ input

  • آموزش صفت نوع textarea درون تگ Input

  • آموزش تگ legend درون تگ form

  •   آموزش تگ option در HTML

 

 

  آموزش تگ from در HTML

 

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

<form       action = “ method = “ “  name = “  “  target = “  “ >  </form>

 

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

Mettod طریقه ارسال اطلاعات به فایل action  را مشخص می کند. این روش ها 2 حالت دارد : get,post

در روش method   get  اطلاعات از طریق آدرس صفحه ارسال می شود. به این صورت که اطلاعات وارد شده در فرم پس از یک علامت سوال و بعد از آدرس صفحه action  قرار می گیرند و ارسال می شوند.

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

method   get  برای ارسال اطلاعات از آدرس صفحه استفاده نمی کند. مزیت این روش امنیت بیشتر و ارسال اطلاعات طولانی تر می باشد.

از شناسه   name  برای تعریف کردن یک نام منحصر به فرد برای فرم استفاده می شود.

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

Blank – بیان می کند که صفحه پردازش action  در یک جدید باز شود.

Self  – بیان می کند که صفحه action  در فریمی که فرم قرار دارد باز می شود.

Top – بیان می کند که صفحه action  در تمام پنجره باز می شود.

 

  آموزش تگ input درون تگ form

برای اینکه امکانی را فراهم کنیم تا کاربران اطلاعاتی را در صفحه html  وارد کنند از تگ  input  استفاده می کنیم. این تگ قسمت پایانی ندارد . از این تگ می توانیم کادرهایی برای وارد کردن متن ، کادر کلمه عبور ، cheekbox ،دکمه ارسال فرم ، دکمه پاک کردن فرم و انواع دیگر دکمه اسفاده کرد.

<input     type = “ text “>

 

  آموزش صفت نوع text درون تگ input

این ورودی یک کادر یک سطری برای ورود متن فراهم می کند برای ساختن این کادر باید به شناسه type  تگ input مقدار text  را بدهیم.

 

:مثال

<body>

         <form>

         <input     type = “ text “ >

         </form>  </body>

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

<input       name = “ “ >

برای مشخص کردن حداکثر کاراکترهای ورودی.

<input       maxlength = “ “ >

طول کادر را بر حسب تعداد کاراکتر مشخص می کند.

<input       size = “ “ >

باعث می شود تا کاربر نتواند تغییری در متن وارد شده ایجاد کند.

مقدار آن را برابر با readonly  قرار می دهیم ،اگر چه تغییر نمی کند ولی با ارسال فرم به سرور منتقل می شود.

<input       readonly = “ “ >

برای غیر فعال کردن کادر متن استفاده می شود و کاربر نمی تواند متنی درون کادر بنویسد.مقدار آن را باید برابر با disabled قرار دهیم.

<ikput        disabled = “ “ >

متنی را که به صورت پیش فرض در آن نمایش داده میشود ،مشخص می کند.

<input        value = “ “ >

 

: مثال

 <body>

          <form>

          first    name :

          <input           type = “ text “       name = “ first name “ >

          Value = “ first    name “ > < br >

          Last name :

        <input    type = “ text “   name = “ last name “ >

        Value = “ last name “ >

        </form>

         </body>

 

 آموزش صفت نوع password درون تگ input

 

برای ایجاد این کادر باید مقدار شناسه type  در input  را برابر با password  قرار دهیم.

<input       type = “ password “ >

اگر در این کادر کاراکتری تایپ شود به صورت نقطه یا ستاره مشخص می شود.

:مثال

 

  <body>

<form>

Username :

<input    type = “ text “    name = “ user “ ><br>

Password :

<input    type = “ password “  name = “ password “ >

</form > </body>

 

 

 

 

 

 آموزش صفت نوع radio درون تگ input

 

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

برای ساختن radio button  ها در تگ input  شناسه type  را با مقدار radio  مقدار دهی می کنیم .

<input       typa = “ radio “     name = “ button “ >

 

اگر بخواهیم تعدادی radio button  مرتبط به هم بسازیم به طوری که تنها امکان انتخاب یکی از آنها باشد ،باید برای همه آنها یک نام در نظر بگیریم ،اما مقدار value های مختلف بدهیم.

: مثال

 

<input       type = “ radio “      name = “ test “       value = “ one “ >

<br>

<input       type = “ radio “        name = “ test “     value = “ two “ >

شناسه های radio button مانند check box  هاست و شناسه value  حتما باید مقدار دهی شود

 

 آموزش صفت نوع checkbox درون تگinput

 

نوعی دیگر از ابزارهایی که اطلاعاتی را از کاربران دریافت می کند  check box  ها هستند و بیشتر در مواردی که امکان انتخاب شدن یا نشدن برای یک گزینه وجود داشته باشد به کار می رود.برای ساختن آنها هم باید از تگ input  استفاده کنیم.

 

<body>

<form>

<input     type = “check box “ name = “ test “ >

</form> </body>

انواع شناسه ها در این مدل ،type  که رفتاری مانند این شناسه در tex box  دارد.

Name  که برای اختصاص دادن یک نام برای ورودی مربوط استفاده می شود . شناسه value  که در صورت انتخاب شدن این دکمه مقداری است که باید به صفحه action  انتقال داده شود.

استفاده از این شناسه در مورد check box  ها ضروری است .

شناسه بعد از check box  می باشد این شناسه باعث می شود تا در هنگام باز شدن صفحه این دکمه ها به صورت انتخاب شده نمایش داده شوند.

<input   checked = “checked “ >

:مثال

  <body >

<form      action = “ result . asp “ >

One :

<input      type = “checkbox “         value = “ one “ ><br>

Two :

<input      type = “checkbox “          value = “ two “ >

</form></body>

 آموزش صفت نوع submit درون تگ input

 

برای ارسال اطلاعات وارد شده در فرم به صفحه action  استفاده می شود.برای ساختن این دکمه باید در تگ input  مقدار شناسه type  را برابر با submit  قرار دهیم.

: مثال

<body>

<form     action = “ result . asp “ >

Type    your  first   name :

<input        type = “ text “    name = “ firstname “        size = “ 20 “ >

<br>

Type . your       last name :

<input      type = “ text “       name =” lastname “    size = “ 20 “ > <br>

<input       type = “ submit “           value = “ submit “ >

</form>                                                      عبارتی که روی دکمه نوشته می شود

</body>

 

 آموزش صفت نوع reset درون تگ input

 

نوع دیگری از دکمه ها ،دکمه reset  هستند که برای پاک کردن اطلاعات فرم به کار می رود.

نحوه استفاده از آن مانند submit  است.هرگاه که روی این دکمه کلیک کنیم ،کل نوشته های فرم پاک می شود.

<input    type = “ reset “   value = “ reset “>

 

 آموزش صفت نوع textarea درون تگ Input

 

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

این تگ دارای دو بخش است و تگ پایانی هم دارد .

<text area        name = “ text “ >   this   is   a  test    </textarea>

< text area        cols = “  “ >عرض کادر را برحسب تعداد کاراکتر تعیین می کند

< text area        rows = “  “ >تعداد سطرهای قابل مشاهده در کادر بدون استفاده از نوار اسکرول

< text area        name = “ “ >برای اختصاص دادن یک نام مشخص به آن

 

: مثال

<body>

<form>

< text area        name = “ test “                close = “ 20 “                rows = “ 5 “ >

This is a test

</ text area >

</form> </body>

 آموزش تگ legend درون تگ form

 

این تگ همیشه داخل تگ fieldset استفاده می شود  و عنوان آن را مشخص می کند و از صفت زیر پشتیبانی می کند :

Align : موقعیت عنوان را مشخص می کند .و یکی از مقادیر زیر را می پذیرد :

Left : عنوان را در بالا سمت چپ قرار می دهد

Center : عنوان را در بالا وسط قرار می دهد

Right : عنوان را در بالا سمت راست قرار می دهد

 

 

 آموزش تگ option در HTML

تگ option    دارای شناسه های زیر است.

مشخص کردن گزینه پیش فرض در لیست مقدار این شناسه  select است.

< option      value= “ “  >می توانیم در اطلاعات ارسال شده گزینه انتخاب شده توسط کاربر را تشخیص دهیم

                    select = “ “ >< option

 

دانلود “آموزش فرم (Form) ها در HTML” %D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%81%D8%B1%D9%85-Form-%D9%87%D8%A7-%D8%AF%D8%B1-HTML.pdf – Downloaded 34 times –

0 پاسخ ها

سوال خود را مطرح نمایید

در صورت تمایل در بحث شرکت کنید
در صورت تمایل از راهنمایی رایگان ما استفاده کنید!!

پاسخ دهید

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