فرم ها در HTML

فرم ها در HTML – آموزش برنامه نویسی وب درس 13

در این آموزش شما خواهید دید که چطور باید فرم‌‌ها را در HTML ایجاد کرد تا بتوانید از کاربران اطلاعاتی را دریافت کنید.

فرم در HTML چیست؟

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

فرم‌‌ها حاوی عناصر مختلفی برای گرد آوری اطلاعات هستند که شامل اینپوت باکس (Inputbox)، چک باکس (Checkbox)، دکمه‌‌های رادیوئی (Radio-buttons)، دکمه تایید (Submit button)، و موارد دیگر می‌شود. کاربران به صورت معمول یک فرم را با ویرایش کردن کنترل‌‌ها، مانند وارد کردن نوشته، انتخاب آیتم و کارهائی از این قبل پر می‌کنند و سپس با تایید کردن اقدام به ارسال آن به سمت سرور پردازش کننده می‌کنند تا پردازش‌‌های بیشتر بر روی آن‌‌ها انجام شود.

تگ <form> در اینجا برای ساختن یک فرم HTML به کار گرفته می‌شود. در اینجا نسخه ساده ای از یک فرم ورود به نمایش گذاشته شده است.

مثال

<form>

    <label>Username: <input type="text"></label>

    <label>Password: <input type="password"></label>

    <input type="submit" value="Submit">

</form>

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

عنصر Input

این عنصر یکی از پر کاربردترین مواردی است که در درون فرم‌‌های HTML به کار گرفته می‌شود.

آن به شما اجازه می‌دهد که بتوانید انواع گوناگونی از فیلدهای ورودی را بسته به نوع ویژگی که برای آن تعیین می‌کنید دریافت کنید. یک عنصر input می‌تواند به صورت Text field برای نوشته ساده، Password filed برای نوشتن پسوردها، Checkbox چک باکس ساده، Radio Button دکمه رادیویی، Submit Button دکمه ثبت، Reset Button دکمه ریست کردن، File select box باکس انتخاب فایل، و نیز چند مورد جدید که در HTML5 ارائه شده است، باشد.

مهمترین و پر کاربردترین نمونه این ورودی‌‌ها در پائین توضیح داده شده است.

Text Fields یا فیلد‌‌های نوشتاری

فیلدهای نوشتاری، ناحیه‌‌های خطی هستند که به کاربران اجازه وارد کردن نوشته را می‌دهند.

این کنترل‌‌های ورودی نوشتاری تک خطی با استفاده از یک عنصر <input> ساخته می‌شوند که نوع ویژگی‌‌ type آن‌‌ها به صورت text است. در مثال زیر نمونه ای از ورودی‌‌های نوشتاری تک خطی برای دریافت نام نشان داده شده است.

مثال

<form>

    <label for="username">Username:</label>

    <input type="text" name="username" id="username">

</form>

خروجی بالا به صورت تصویر زیر خواهد بود.

Text Fields یا فیلد‌‌های نوشتاری

نکته

تگ <label> در اینجا برای تعریف برچسب برای عنصر‌‌های <input> به کار گرفته می‌شود. اگر شما می‌خواهید که کاربر چند خط را برای شما وارد کند می‌توانید به جای این تگ از تگ  <textarea> استفاده کنید.

Password field یا فیلد پسورد

فیلد پسورد  مشابه با فیلد‌‌های نوشتاری عمل می‌کند. تنها یک تفاوت در اینجا وجود دارد؛ کاراکتری که فیلد پسورد از آن استفاده می‌کند به صورت ماسک شده است، به این معنا که یک ستاره به جای هر کارکتر نمایش داده می‌شود. البته ممکن است علامت سوال و یا نقطه هم به جای کاراکترهای ورودی نمایش داده شود. این کار سبب می‌شود که کس دیگری نتواند پسورد شما را از روی صفحه نمایش بخواند. این کنترل ورودی تک خطی نیز با استفاده از تگ <input> ساخته می‌شود که ویژگی type آن به password تغییر پیدا کرده است.

در مثال زیر نمونه ای از ورودی‌‌های پسورد تک خطی آورده  شده است که اطلاعات را از کاربران دریافت می‌کند.

مثال

<form>

    <label for="user-pwd">Password:</label>

    <input type="password" name="user-password" id="user-pwd">

</form>

خروجی بالا به صورت تصویر زیر خواهد بود.

Password field یا فیلد پسورد

Radio Buttons یا دکمه‌‌های رادیویی

دکمه‌‌های رادیویی در زمانی انتخاب می‌شوند که یک کاربر باید از میان گزینه‌‌های از پیش تعیین شده تنها یکی از آن‌‌ها را انتخاب کند. آن با استفاده از یک عنصر <input> ساخته می‌شود که ویژگی type آن بر روی Radio تنظیم شده است.

در زیر یک مثال از دکمه‌‌های رادیویی آورده شده است که می‌تواند برای جمع‌آوری اطلاعات از کاربران به کار گرفته شود.

مثال

<form>

    <input type="radio" name="gender" id="male">

    <label for="male">Male</label>

    <input type="radio" name="gender" id="female">

    <label for="female">Female</label>

</form>

خروجی بالا به صورت تصویر زیر خواهد بود.

Checkboxes چک باکس‌‌ها

چک باکس‌‌ها به کاربر می‌دهد که یک و یا چند گزینه را از طریق گزینه‌‌های از پیش تعیین شده انتخاب کند. آن‌‌ها با استفاده از یک عنصر <input> که ویژگی  Type آن بر روی Checkbox است ساخته می‌شوند.

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

مثال

<form>

    <input type="checkbox" name="sports" id="soccer">

    <label for="soccer">Soccer</label>

    <input type="checkbox" name="sports" id="cricket">

    <label for="cricket">Cricket</label>

    <input type="checkbox" name="sports" id="baseball">

    <label for="baseball">Baseball</label>

</form>

خروجی بالا به صورت تصویر زیر خواهد بود.

Checkboxes چک باکس‌‌ها

Checkboxes چک باکس‌‌ها

نکته

اگر شما بخواهید که دکمه‌‌های رادیویی و چک باکس‌‌ها به صورت پیش فرض در حالت انتخاب باشند، می‌توانید ویژگی Checked را به عنصر Input اضافه کنید. این کار چیزی شبیه به <input type="checkbox" checked> خواهد بود.

File Select box ، باکس انتخاب فایل

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

آن‌‌ها با استفاده از یک عنصر <input> که ویژگی  Type آن بر روی File است ساخته می‌شوند.

مثال

<form>

    <label for="file-select">Upload:</label>

    <input type="file" name="upload" id="file-select">

</form>

خروجی بالا به صورت تصویر زیر خواهد بود.

File Select box ، باکس انتخاب فایل

نکته

در اینجا چند نوع ورودی دیگر نیز وجود دارند. برای آنکه از ورودی‌‌های جدید که به HTML5 اضافه می‌شود آگاه شوید، می‌توانید به مقالات ما در این زمینه که در آینده نزدیک منتشر می‌شود مراجعه کنید.

Textarea

Textarea (بخوانید تِکس اِریا)، یک نوشته چند خطی است که ورودی‌‌ها را کنترل می‌کند و به کاربران اجازه وارد کردن چند خط متن را در یک زمان می‌دهد. این کنترل چند خطی متن با استفاده از عنصر <textarea> ساخته می‌شود.

مثال

<form>

    <label for="address">Address:</label>

    <textarea rows="3" cols="30" name="address" id="address"></textarea>

</form>

خروجی بالا به صورت تصویر زیر خواهد بود.

Textarea

Select Box ، باکس انتخاب

یک باکس انتخاب یک فهرست کرکره ای از گزینه‌‌ها را به ما نشان می‌دهد که به کاربران اجازه می‌دهد بتوانند یک و یا چند گزینه‌‌ها را از منوی باز شده انتخاب کنند. باکس انتخاب با استفاده از عنصر <select> و <option> ساخته می‌شود.

عناصر <Option> در درون عنصر <Select> قرار می‌گیرند و هر کدام از آن‌‌ها تعیین کننده یک آیتم از این لیست هستند.

مثال

<form>

    <label for="city">City:</label>

    <select name="city" id="city">

        <option value="sydney">Sydney</option>

        <option value="melbourne">Melbourne</option>

        <option value="cromwell">Cromwell</option>

    </select>

</form>

 

خروجی بالا به صورت تصویر زیر خواهد بود.

Select Box ، باکس انتخاب

دکمه‌‌های Submit و Reset

یک دکمه Submit برای ارسال کردن داده‌‌ها به سمت سرور استفاده می‌شود. زمانی که بر روی دکمه Submit کلیک می‌کنید، داده‌‌های فایل  بر حسب ویژگی Action آن پردازش شده و به صورت تایید شده داده‌‌ها ارسال می‌شوند.

یک دکمه Reset تمام کنترل‌‌هایی که در یک فرم وجود دارد را ریست کرده و به مقدار اولیه را به آن بر می‌گرداند. در مثل زیر می‌تواند نام خودتان را در فیلد‌‌های نوشتاری وارد کنید و بر رو دکمه Submit کلیک کنید تا نتیجه آن را مشاهده کنید.

مثال

<form action="action.php" method="post">

    <label for="first-name">First Name:</label>

    <input type="text" name="first-name" id="first-name">

    <input type="submit" value="Submit">

    <input type="reset" value="Reset">

</form>

در مثل بالا می‌تواند نام خودتان را در فیلد‌‌های نوشتاری وارد کنید و بر رو دکمه Submit کلیک کنید تا نتیجه آن را مشاهده کنید.

دکمه‌‌های Submit و Reset

نکته

شما می‌توانید همچنین دکمه‌‌ها را با استفاده از عنصر <button>  پیاده‌سازی کنید. دگمه‌‌هایی که با استفاه از عنصر <button> ساخته می‌شوند، به مانند دگمه‌‌هایی هستند که با استفاده از تگ input  ساخته می‌شوند، اما آن‌‌ها احتمالات رندر کردن بهتری را در خود دارند و امکان استفاده در میان عناصر دیگر HTML را نیز به شما می‌دهند.

گروه بندی کنترل‌‌های فرم

شما همچنین می‌توانید به صورت منطقی اقدام به گروه بندی کردن کنترل‌‌های مرتبط کنید و با استفاده از عنصر <legend> اقدام به گروه بندی آنان کنید. گروه بندی کردن کنترل‌‌ها امکان دسته بندی کردن کنترل‌‌های یک فرم را مهیا می‌کند و به همین خاطر کاربران راحت تر می‌توانند به پرکردن فرم‌‌ها اقدام کنند و فرم‌‌های شما بسیار کاربر پسند خواهند بود. در اینجا بگذارید مثالی برای شما بزنم که بهتر بتوانید این مفهوم را درک کنید و ببینید که این موضوع چطور کار می‌کند.

مثال

<form>

    <fieldset>

        <legend>Contact Details</legend>

        <label>Email Address: <input type="email" name="email"></label>

        <label>Phone Number: <input type="text" name="phone"></label>

    </fieldset>

</form>

ویژگی‌‌های پر استفاده در فرم‌‌ها

در ادامه ما جدولی از پر استفاده ترین ویژگی‌‌هایی که در فرم‌‌ها استفاده شده اند را آورده ایم:

ویژگی توضیحات
name نام فرم و یا هر عنصر به کار رفته در آن را مشخص می‌کند.
action آدرس URL مقصد فرم برای پردازش را مشخص می‌کند. در اینجا باید آدرسی معرفی شود که فرم پس از پر شدن به آنجا فرستاده شود.
method این گزینه نوع پروتکل HTTP برای ارسال داده‌‌ها بر روی وب سرور به وسیله مرورگر را مشخص می‌کند. مقدارهایی که در اینجا هستند می‌تواند به صورت GET (در حالت پیش فرض) و یا POST باشند.
target در زمانی که بر روی یک لینک کلیک می‌کنید و یا در زمانی که فرمی را تایید می‌کنید (بر روی دکمه Submit کلیک می‌کنید)، این ویژگی شما را به صفحه خاصی هدایت می‌کند. گزینه‌‌های معمول در اینجا شامل _blank، _self، _parent و _top است.
enctype این گزینه مشخص می‌کند بعد از تایید کد، داده‌‌ها باید به صورت رمزنگاری به سمت سرور ارسال شوند. این گزینه تنها در زمانی که متد POST در قسمت Method استفاده شود، در دسترس است.

ما در مرجع Form گزینه‌‌ها و ویژگی‌‌های دیگری را نیز معرفی کرده ایم که شما می‌توانید برای درک بهتر به آنجا مراجعه کنید.

نکته

ویژگی name نشان دهنده نام فرم در درون مجموعه ای از فرم‌‌ها است. آن مقدار باید به صورت منحصر به فرد باشد و نباید خالی گذاشته شود.

نکته

تمام داده‌‌هایی که با متد GET ارسال می‌شوند، در نوار آدرس مرورگرها قابل مشاهده هستند. اما داده‌‌هایی که به وسیله متد POST ارسال می‌شوند، را کاربران نمی توانند مشاهده کنند. برای درک بهتر این موارد بهتر است که به آموزشی  که ما درباره تفاوت‌‌های GET و POST و شیوه ای که این موارد در پروتکل HTTP به کار می‌رود مراجعه کنید تا با جزئیات مفاهیم آن را درک کنید.

No votes yet.
Please wait...

دیدگاهتان را بنویسید

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

منو اصلی

question