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

به مجموعه ای از فیلدها (متنی، انتخابی و...) در یک صفحه (کاغذ، وب و...) که قرار است توسط یک شخص تکمیل شود فرم گفته می شود. در این مقاله به نحوه ایجاد فرم های html در طراحی وب می پردازیم.

آموزش فرم ها در HTML
Article مجازی

وقتی می خواهید برخی از داده ها از بازدید کنندگان سایت جمع آوری شود، فرم های HTML مورد نیاز است. به عنوان مثال، در هنگام ثبت نام کاربر می خواهید اطلاعاتی از قبیل نام، آدرس ایمیل، کارت اعتباری و غیره جمع آوری کنید. به بیان ساده به مجموعه ای از چندین فیلد (متنی، انتخابی و..) در یک صفحه (کاغذ، وب و..) که قرار است توسط یک شخص تکمیل شود فرم گفته می شود.

فرایند به اینگونه است که ابتدا فرم  اطلاعات بازدید کننده سایت را دریافت می کند و سپس آن را به یک برنامه back-end مانند CGI ،ASP Script یا PHP Script و غیره ارسال می کند. برنامه back-end پردازش مورد نیاز روی داده های منتقل شده را بر اساس منطق تجاری مشخص، در داخل برنامه انجام می دهد.

عناصر مختلف فرم، مانند فیلدهای متنی، فیلدهای textarea، منوهای کشویی، دکمه های رادیویی، کادرهای چک و غیره می باشند که به آنها خواهیم پرداخت.

تگ form برای ایجاد فرم HTML استفاده می شود و دارای ساختار زیر است:

ویژگی های فرم

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

ردیف ویژگی و توضیحات
1 action : آدرس اسکریپت backend جهت پردازش داده ها را مشخص می کند.
2 method : روشی که برای بارگذاری داده ها استفاده می شود. متداول ترین روش ها، get و post هستند.
3 target : پنجره یا قاب مورد نظر را که نتیجه اسکریپت را نمایش خواهد داد، مشخص می کند. مقادیری مانند blank،self ، parent و غیره را می گیرد.
4

enctype : می توانید از ویژگی enctype برای تعیین نحوه رمزگذاری مرورگر داده، قبل از ارسال آن به سرور استفاده کنید. مقادیر ممکن عبارتند از: application / x-www-urlencoded - این روشی است که اکثر فرم ها در سناریوهای ساده از آن استفاده می کنند.

mutlipart / form-data - این مورد زمانی استفاده می شود که می خواهید داده های باینری را به صورت فایل هایی مانند تصویر، فایل word و غیره بارگذاری کنید.

کنترل های فرم  HTML

انواع مختلفی از کنترل های فرم وجود دارد که می توانید برای جمع آوری داده ها با استفاده از فرم HTML از آن ها استفاده کنید:

  1. کنترل ورودی متن یا جعبه متن ها
  2. کنترل کادرهای انتخاب یا کمبو باکس ها
  3. کنترل چک باکس
  4. کنترل رادیویی
  5. کادرهای انتخاب فایل
  6. کنترل های پنهان
  7. دکمه های قابل کلیک
  8. دکمه ارسال و تنظیم مجدد

در ادامه به بررسی هر کدام از این موارد می پردازیم:

 
1. کنترل ورودی متن

سه نوع ورودی متن روی فرم ها وجود دارد :

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

این نتیجه زیر را حاصل می کند:

 

 :First name
 :Last name

 

ویژگی ها:

در زیر لیستی از ویژگی های تگ input برای ایجاد زمینه متن وجود دارد:

ردیف ویژگی و توضیحات
1 type : نوع کنترل ورودی را مشخص می کند و روی text تنظیم می شود.
2 name : برای دادن نام به کنترلی که به سرور فرستاده می شود برای شناسایی و دریافت مقدار آن استفاده می شود.
3 value : می تواند برای ارائه مقدار اولیه در داخل کنترل استفاده شود.
4 size : اجازه می دهد تا عرض کنترل متن را از نظر کاراکتر مشخص کنید.
5 maxlength : اجازه می دهد تا حداکثر تعداد کاراکترهایی را که کاربر می تواند وارد جعبه متن کند، تعیین کنید.
  • کنترل های ورود رمز عبور - این یک ورودی متنی تک خطی است اما به محض ورود کاربر، کاراکتر را به گونه ای دیگر نمایش می دهد تا ورودی مشخص نباشد. با استفاده از تگ input ایجاد می شوند، اما ویژگی type بر روی password تنظیم شده است.

این نتیجه زیر را حاصل می کند:

 

 

 :User ID
 :Password

 

ویژگی ها:

در زیر لیستی از ویژگی های تگ input برای ایجاد فیلد رمز عبور وجود دارد:

ردیف ویژگی و توضیحات
1 type : نوع کنترل ورودی را نشان می دهد و روی password تنظیم می شود.
2 name : برای دادن نام به کنترلی که به سرور فرستاده می شود برای شناسایی و دریافت مقدار استفاده می شود.
3 value : می تواند برای ارائه مقدار اولیه در داخل کنترل استفاده شود.
4 size : اجازه می دهد تا عرض کنترل متن را از نظر کاراکتر مشخص کنید.
5 maxlength : اجازه می دهد تا حداکثر تعداد کاراکترهایی را که کاربر می تواند وارد جعبه متن کند، تعیین کنید.
  • کنترل های ورودی متن چند خط - این مورد وقتی استفاده می شود که کاربر ملزم به ارائه جزئیاتی باشد که ممکن است طولانی تر از یک جمله باشد. کنترل های ورودی چند خط با استفاده از تگ textarea ایجاد می شوند.

این نتیجه زیر را حاصل می کند:

 

:Description

ویژگی ها:

ردیف ویژگی و توضیحات
1 name : برای دادن نام به کنترلی که به سرور فرستاده می شود و برای شناسایی و دریافت مقدار استفاده می شود.
2 rows : تعداد ردیف جعبه متن را نشان می دهد.
3 cols : تعداد ستون های جعبه متن را نشان می دهد.
 
2. کنترل کادر های انتخاب:

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

این نتیجه زیر را حاصل می کند:

 Maths  Physics

ویژگی ها:

در زیر لیست ویژگی های تگ checkbox آورده شده است:

ردیف ویژگی و توضیحات
1 type : نوع کنترل ورودی را مشخص می کند و بر روی checkbox تنظیم می شود.
2 name : برای دادن نام به کنترلی که به سرور فرستاده می شود و برای شناسایی و دریافت مقدار استفاده می شود.
3 value : مقداری که در صورت انتخاب کادر انتخاب استفاده می شود.
4 checked : اگر می خواهید به طور پیش فرض آن را انتخاب کنید.
 
3. کنترل دکمه های رادیویی

دکمه های رادیویی هنگامی استفاده می شوند که از میان گزینه ها، فقط یک گزینه برای انتخاب مورد نیاز باشد. با استفاده از برچسب input ایجاد می شوند اما ویژگی type آن روی radio تنظیم شده است.

این نتیجه زیر را حاصل می کند:

 Maths  Physics

ویژگی ها:

در زیر لیست ویژگی های دکمه رادیویی آورده شده است:

ردیف ویژگی و توضیحات
1 type : نوع کنترل ورودی را نشان می دهد و بر روی radio تنظیم می شود.
2 name : برای دادن نام به کنترلی که به سرور فرستاده می شود و برای شناسایی و دریافت مقدار استفاده می شود.
3 value : مقداری که در صورت انتخاب کادر انتخاب استفاده می شود.
4 checked : اگر می خواهید به طور پیش فرض آن را انتخاب کنید.
 
4. کنترل جعبه انتخاب

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

این نتیجه زیر را حاصل می کند:

ویژگی ها:

در زیر لیست ویژگی های مهم تگ select آورده شده است:

ردیف ویژگی و توضیحات
1 name : برای دادن نام به کنترلی که به سرور فرستاده می شود و برای شناسایی و دریافت مقدار استفاده می شود.
2 size : اندازه لیست کشویی را مشخص می کند.
3 multiple : اگر روی "multiple" تنظیم شده باشد، به کاربر اجازه می دهد چندین مورد را از فهرست انتخاب کند.

در زیر لیست ویژگی های مهم تگ option آورده شده است:

ردیف ویژگی و توضیحات
1 value : مقداری که در صورت انتخاب یک گزینه ، مورد استفاده قرار می گیرد.
2 selected : مشخص می کند که هنگام بارگذاری صفحه ، این گزینه باید انتخاب شده باشد.
3 label : متن گزینه
 
5. کادر بارگذاری فایل

اگر می خواهید به یک کاربر اجازه دهید تا یک فایل را در وب سایت خود بارگذاری کند، باید از جعبه بارگذاری فایل استفاده کنید. با استفاده از تگ input ایجاد می شود اما مشخصه type آن روی file تنظیم می شود.

این نتیجه زیر را حاصل می کند:

 

ویژگی ها:

در زیر لیست ویژگی های مهم جعبه بارگذاری فایل ها آورده شده است:

ردیف ویژگی و توضیحات
1 name : برای دادن نام به کنترلی که به سرور فرستاده می شود و برای شناسایی و دریافت مقدار استفاده می شود.
2 accept : انواع فایل هایی را که سرور می پذیرد مشخص می کند.
 
6. کنترل دکمه

برای ایجاد دکمه های قابل کلیک روش های مختلفی در HTML وجود دارد. همچنین با تنظیم ویژگی type به button، می توانید دکمه قابل کلیک را با استفاده از برچسب input ایجاد کنید. این ویژگی می تواند مقادیر زیر را به دست آورد:

ردیف ویژگی و توضیحات
1 submit : دکمه ای را ایجاد می کند که بطور خودکار اطلاعات یک فرم را ارسال می کند.
2 reset : دکمه ای را ایجاد می کند که به طور خودکار تنظیمات فرم را به مقادیر اولیه آنها برمی گرداند.
3 button : دکمه ای را ایجاد می کند که در هنگام کلیک کاربر بر روی آن دکمه، باعث ایجاد اسکریپت سمت مشتری می شود.
4 image : دکمه قابل کلیک را ایجاد می کند اما ما می توانیم از تصویر به عنوان پس زمینه دکمه استفاده کنیم.

 

این نتیجه زیر را حاصل می کند:

  
7. کنترل hidden

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

This is page 10

 

 

محتوا
  • - آموزش فرم ها در HTML

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

توسعه وب / HTML-CSS