مقدمه
با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به آموزش تعریف و نحوه کار با فرم ها در html ، بپردازیم. فرم ها در حقیقت رابط بین داده های ورودی کاربران و سرور است. و از اصلی ترین بخش های هر وب سایتی می باشد. و در حقیقت تصور یک وب سایت بدون هیچگونه فرمی غیر ممکن است. در آموزش های قبلی ما چگونگی کار با تگ های Table , Div و تگ img و همچنین تعریف رنگ ها در html را بررسی کردیم. در ادامه این پست آموزشی نیز به چگونگی تعریف و استفاده از فرم ها در html و فیلدهای مهم آن ،می پردازیم.
forms- فرم ها در html
فرم ها در html
مثال : فرم ها
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <body> <h2>HTML Forms</h2> <form action="/action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form> <p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p> </body> </html> |
عنصر <form>
تگ <form> در HTML یک فرم را تعریف می کند که برای دریافت ورودی های کاربر استفاده می شود.
سینتکس تعریف فرم :
مثال :
| <form> . form elements . </form> |
عناصر فرم انواع مختلفی از عناصر ورودی مانند فیلد های متن، جعبه چک، دکمه های رادیویی، دکمه ارسال و غیره است. که در ادامه به بررسی هر کدام از آنها می پردازیم:
تگ <input>
عنصر <input> مهمترین عنصر فرم است. عنصر <input> بسته به نوع ویژگی ، می تواند به روش های مختلف نمایش داده شود.
چند مثال از انواع تگ input :
- <“input type = “text> : یک فیلد ورودی یک متن را تعریف می کند
- <“input type = “radio>: یک دکمه رادیویی (برای انتخاب یکی از گزینه های بسیاری)
- <“input type = “submit>: یک دکمه ارسال را تعریف می کند (برای ارسال فرم)
ورودی Text:
تگ <“input type=”text> فیلد ی برای دریافت متن ا زکاربر، بکار می رود.
مثال : ورودی Text
| <form> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <"input type="text" name="lastname> </form> |
نکته: فرم خود قابل مشاهده نیست همچنین توجه داشته باشید که عرض پیش فرض یک فیلد متنی ۲۰ کاراکتر است.
ورودی radio button:
تگ <“input type = “radio> وقتی بین چند گزینه باید فقط یکی انتخاب شود، کاربرد دارد.
مثال :
مثال : ورودی radio
| <form> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> input type="radio" name="gender" value="other"> Other> </form> |
Submit Button :
تگ <“input type = “submit> یک دکمه برای ارسال اطلاعات به form-handler تعریف می کند. که form-handler معمولا یک صفحه سرور با یک اسکریپت برای پردازش داده های ورودی است.آدرس form-handler در ویژگی action فرم ها مشخص می شود.
مثال:
مثال : عنصر submit
| <"form action="/action_page.php> < First name:<br <input type="text" name="firstname" value="Mickey"><br> <Last name:<br <input type="text" name="lastname" value="Mouse"><br><br> <"input type="submit" value="Submit> </form> |
ویژگی action
این ویژگی برای ارسال اطلاعات فرم ها کاربرد دارد. به طور معمول، اطلاعات فرم به یک صفحه وب در سرور ارسال می شود زمانی که کاربر بر روی دکمه submit کلیک کند. در مثال بالا، در حقیقت داده های فرم به یک صفحه در سرور به نام “action_page.php/” ارسال می شود. این صفحه شامل یک اسکریپت سمت سرور است که داده های فرم را مدیریت می کند:
<“form action=”/action_page.php>
ویژگی target
ویژگی target مشخص می کند که آیا نتایج ارسال شده در یک تب جدید مرورگر، یک قاب یا در پنجره فعلی باز می شود. مقدار پیش فرض آن “self _” است. که به این معنی است که فرم در پنجره فعلی نمایش داده می شود. برای نمایش نتایج در یک tab جدید از مرورگر باید از مقدار “blank_” استفاده کرد.
مثال:
ویژگی method
ویژگی method مشخص می کند که اطلاعات فرم با روش GET یا POST ارسال شود.
مثال : ویژگی method
| <"form action="/action_page.php" method="get> <"form action="/action_page.php" method="post> |
و یا :
چه زمانی از GET و یا POST استفاده کنیم؟
بطور پس فرض اطلاعات در حالت GET ارسال می شود. هنگامی که GET استفاده می شود،اطلاعات با سرعت بالاتری ارسال می شود. اما داده های فرم ارسال شده در قسمت آدرس صفحه قابل مشاهده خواهد بود:
action_page.php?firstname=Mickey&lastname=Mouse/
روش POST اطلاعات را با سرعت کند تری نسبت به GET ارسال می کند. اما داده های فرم ارسال شده را در فیلد آدرس صفحه نشان نمی دهد. پس اگر اطلاعات فرم حاوی اطلاعات حساس یا شخصی باشد. از POST استفاده کنید.
ویژگی Name
هر کدام از تگ های input باید ویژگی name را داشته باشد تا اطلاعات آن ارسال شود. به عنوان مثال در فیلدهای فرم پایین ، با کلیک روی submit فقط داده های فیلد “Last name” ارسال می شود:
مثال : ویژگی Name
| <"form action="/action_page.php> <First name:<br <input type="text" value="Mickey"><br> < Last name:<br <input type="text" name="lastname" value="Mouse"><br><br> <"input type="submit" value="Submit> </form> |
گروه بندی تمام عناصر یک فرم، با تگ <fieldset>
fieldset
تگ <fieldset> برای دسته بندی یا گروه بندی عناصر و تگ های موجود در یک فرم بکار می رود. از تگ <legend> برای تعیین عنوان دسته استفاده می شود.
مثال:
مثال : عنصر fildset
| <"form action="/action_page.php> <fieldset> <legend>Personal information:</legend> < First name:<br <input type="text" name="firstname" value="Mickey"><br> < Last name:<br <input type="text" name="lastname" value="Mouse"><br><br> <"input type="submit" value="Submit> </fieldset> </form> |
لیست تمام ویژگی های <form> :
| صفت | توضیحات |
|---|
| accept-charset | مشخصه charset مورد استفاده در فرم ارسال شده (پیش فرض: charset صفحه). |
| action | آدرس (URL) که در آن برای ارسال فرم (یک پیشفرض: صفحه ارسالی) را مشخص می کند. |
| autocomplete | مشخص می کند که آیا مرورگر باید فرم را به صورت خودکار تکمیل کند |
| enctype | رمزگذاری داده های ارسال شده را مشخص می کند (پیش فرض: کد گذاری شده توسط URL است). |
| method | روش HTTP مورد استفاده برای ارسال فرم را تعیین می کند (به طور پیش فرض: GET). |
| name | نامی که برای تشخیص فرم استفاده می شود را مشخص می کند (برای استفاده DOM: document.forms.name). |
| novalidate | مشخص می کند که مرورگر نباید فرم را تأیید کند. |
| target | مقصد هدف آدرس را در عمل مشخص می کند (به طور پیش فرض: _self) |
کلام آخر
فرم در کد HTML از بخش های اصلی تشکیل دهنده ی اغلب وب سایت ها می باشد، چراکه دریافت انواع ورودی ها از کاربران ، از طریق فرم ها انجام می شود. از این رو فراگیری نحوه ی پیاده سازی فرم در کد HTML از اهمیت ویژه ای برخوردار است.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
