🎁 تخفیف ویژه تمامی پکیج های آموزشی 🎁

آموزش HTML Forms

در این بخش از آموزش طراحی سایت به HTML Forms می پردازیم. فرم HTML بخشی از یک سند است که شامل کنترل هایی مانند فیلدهای متنی، فیلدهای رمز عبور، چک باکس ها،radio buttons، دکمه ارسال، منوها و غیره است.

آموزش HTML Forms

HTML Forms

در طراحی یک وب سایت بسته به نیاز برنامه نیاز است تا داده هایی را از کاربران دریافت کنیم. برای این منظور در طراحی سایت از فرم های HTML استفاده می کنیم.  فرم های HTML برای جمع آوری ورودی کاربر استفاده می شود. این ورودی ها اغلب برای پردازش به سمت سرور ارسال می شود.

فرم HTML بخشی از یک سند است که شامل کنترل هایی مانند فیلدهای متنی، فیلدهای رمز عبور، چک باکس ها،radio buttons، دکمه ارسال، منوها و غیره است. فرم HTML به کاربر کمک می کند تا داده هایی را که قرار است برای پردازش به سرور ارسال شود مانند نام، آدرس ایمیل، رمز عبور، شماره تلفن و غیره وارد کند.

HTML Forms

چرا از فرم HTML استفاده کنیم؟

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

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

فرم های HTML

خروجی قطعه کد بالا به صورت زیر است.

HTML Forms

The <form> Element

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

The HTML Form Element

عنصر <form> محفظه ای برای انواع مختلف عناصر ورودی است، همانطور که گفته شد این ورودی ها شامل: فیلدهای متنی، چک باکس ها، دکمه های رادیویی، دکمه های ارسال و غیره هستند.

تمام عناصر مختلف فرم در فصل های بعدی آموزش طراحی سایت توسط موسسه آموزشی آتریا تحت عنوان (عناصر فرم HTML) پوشش داده شده است.

The <input> Element

عنصر <HTML <input پر استفاده ترین عنصر فرم است.

یک عنصر <input> را می توان به روش های مختلفی، بسته به ویژگی type، نمایش داد.

در اینجا چند نمونه آورده شده است:

1-<"input type="text>

این حالت فیلد ورودی متن تک خطی را نمایش می دهد.

2- <"input type="radio>

این حالت یک radio button برای انتخاب یکی از چندین گزینه را نمایش می دهد.

3- <"input type="checkbox>

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

4- <"input type="submit>

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

5- <input type="button">

این حالت یک دکمه قابل کلیک را نمایش می دهد.

فیلدهای متنی (Text Fields)

<input type="text"> یک فیلد ورودی تک خطی را برای ورودی متن تعریف می کند.

مثال زیر فرمی با فیلدهای ورودی برای متن را نشان می دهد:

Input type in HTML Forms

به این ترتیب کد HTML بالا در یک مرورگر به صورت زیر نمایش داده می شود:

HTML Forms

توجه داشته باشید که خود فرم قابل مشاهده نیست. همچنین توجه داشته باشید که عرض پیش فرض یک فیلد ورودی 20 کاراکتر است.

The <label> Element

به استفاده از عنصر <label> در مثال بالا توجه کنید.

تگ <label> یک برچسب برای بسیاری از عناصر فرم تعریف می کند.

عنصر <label> برای کاربران صفحه خوان مفید است، زیرا وقتی کاربر روی عنصر ورودی تمرکز می کند، صفحه خوان برچسب را با صدای بلند می خواند.

عنصر <label> همچنین به کاربرانی کمک می کند که در کلیک کردن بر روی مناطق بسیار کوچک (مانند دکمه های رادیویی یا چک باکس ها) مشکل دارند - زیرا وقتی کاربر روی متن موجود در عنصر <label> کلیک می کند، دکمه رادیویی/چک باکس را تغییر می دهد.

ویژگی for تگ <label> باید برابر با ویژگی id عنصر <input> باشد تا آنها را به یکدیگر متصل کند.

Radio Buttons

<input type="radio"> یک دکمه رادیویی را تعریف می کند.

دکمه های رادیویی به کاربر اجازه می دهند فقط یکی از گزینه های محدود را انتخاب کند.

مثال زیر فرمی با دکمه های رادیویی نشان می دهد:

Radio Buttons in HTML

به این ترتیب کد HTML بالا در یک مرورگر به صورت زیر نمایش داده می شود:

Radio Buttons

Checkboxes

<input type="checkbox"> یک چک باکس را تعریف می کند.

چک باکس ها به کاربر این امکان را می دهند که گزینه های ZERO یا MORE را از تعداد محدودی از گزینه ها انتخاب کند.

مثال زیر فرمی با چک باکس را نشان می دهد:

Checkboxes in HTML

به این ترتیب کد HTML بالا در یک مرورگر به صورت زیر نمایش داده می شود:

Checkboxes

The Submit Button

<input type="submit"> دکمه ای را برای ارسال داده های فرم به یک کنترل کننده فرم (form-handler) تعریف می کند.

form-handler معمولاً یک فایل روی سرور با یک اسکریپت برای پردازش داده های ورودی است.

form-handler در ویژگی action فرم مشخص شده است.

مثال زیر فرمی با دکمه ارسال را نشان می دهد:

The Submit Button in HTML

به این ترتیب کد HTML بالا در یک مرورگر به صورت زیر نمایش داده می شود:

دکمه سابمیت در طراحی سایت

<The Name Attribute for <input

توجه داشته باشید که هر فیلد ورودی باید دارای یک ویژگی نام برای ارسال باشد.

اگر ویژگی name حذف شود، مقدار فیلد ورودی به هیچ وجه ارسال نمی شود.

مثال زیر مقدار فیلد ورودی "نام" را ارسال نمی کند:

The Name Attribute for input in HTLM Forms in web design

خروجی قطعه کد بالا به صورت زیر است.

The Name Attribute for input in HTLM Forms in web design
HTML Forms فرم های HTML آموزش طراحی سایت