آموزش کامل کار با فرم ها در HTML
با جلسه بیست و چهارم آموزش متنی Html در خدمت شما هستیم با آموزش کامل کار با فرم ها در HTML از وب سایت آموزش برنامه نویسی سورس باران.حتما تا به حال به وب‌سایت‌هایی برخورده‌اید که در آن‌ها فرم‌هایی قرار داشته و نیاز داشتید برای انجام عملی آن‌ها را پرکنید. معمولا از این فرم‌ها برای ثبت‌نام یا ثبت مشخصات استفاده می‌شود. شما دوستان عزیز در این مقاله آموزش متنی HTML روش قرار دادن فرم در یک صفحه وب سایت را خواهید آموخت.
آموزش کامل کار با فرم ها در HTML
یک نمونه فرم ساده را در زیر مشاهده می‌کنید :
عنصر <form> در Html
عنصر <form> در HTML یک فرم تعریف می‌کند که برای جمع‌آوری ورودی‌های کاربر مورد استفاده قرار می‌گیرد:
|
1 2 3 4 5 |
<form> . form elements . </form> |
فرم در HTML حاوی عناصر form است. عناصر فرم انواع مختلفی از عناصر ورودی مانند فیلدهای متنی، چک باکس، رادیو باتن، دکمه ارسال و سایر موارد است.
عنصر <input> در Html
عنصر <input> مهمترین عنصر فرم است که با توجه به خصوصیت type، می‌تواند به روش‌های مختلف نمایش داده شود. در این جا چند نمونه از آن را مشاهده می‌کنید:
| نوع | توضیح |
| <“input type=”text> | فیلد ورودی متنی یک خطی تعریف می‌کند |
| <“input type=”radio> | یک رادیو باتن برای انتخاب از میان چند گزینه تعریف می‌کند |
| <“input type=”submit> | یک دکمه ارسال برای ارسال فرم تعریف می‌کند |
ورودی متنی فرم در HTML
<“input type=”text> یک فیلد ورودی یک خطی برای ورودی متنی تعریف می‌کند:
|
1 2 3 4 5 6 |
<form> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"> </form> |
کد بالا در مرورگر به این شکل نمایش داده خواهد شد :
ورودی رادیو باتن فرم در HTML
<“input type=”radio> یک رادیو باتن (Radio button) تعریف می‌کند. رادیو باتن‌ها به کاربر امکان انتخاب یک گزینه از میان گزینه‌های موجود را می‌دهد:
|
1 2 3 4 5 6 7 8 |
<form> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br> <input type="radio" id="other" name="gender" value="other"> <label for="other">Other</label> </form> |
دکمه ارسال فرم در HTML
<“input type=”submit> یک دکمه برای ارسال داده‌های فرم به یک form-handler که معمولا یک صفحه سرور با کدهایی برای پردازش داده‌های ورودی است و در خصوصیت action مشخص می‌شود و کار رسیدگی به فرم‌ها را بر عهده دارد، تعریف می‌کند:
|
1 2 3 4 5 6 7 |
<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> |
خصیصه Action در فرم Html
خصوصیت action عملی که باید هنگام ارسال فرم اجرا شود را تعریف می‌کند. معمولا وقتی کاربر روی دکمه ارسال (submit) کلیک می‌کند، داده‌های فرم به یک صفحه وب موجود روی سرور ارسال می‌شود. در مثال بالا، داده‌های فرم به صفحه‌ای به نام “/action_page.php” ارسال می‌شود. این صفحه حاوی کدهای سمت سرور است که به داده‌های فرم رسیدگی می‌کنند:
|
1 |
<form action="/action_page.php"> |
اگر خصوصیت action حذف شود، action یا عملی که باید انجام شود به صفحه جاری تنظیم خواهد شد.
حتما بخوانید : فیلم آموزش کامل Html به زبان فارسی
خصیصه Target در فرم Html
خصوصیت target مشخص می‌کند که نتایج ارسال شده در یک سربرگ جدید از مرورگر، در یک فریم یا در پنجره جاری باز شود. مقدار پیش‌فرض این خصوصیت به صورت “_self” است که یعنی فرم در پنجره جاری ارسال شود. اگر می‌خواهید نتایج فرم در یک سربرگ جدید باز شود از مقدار “_blank” استفاده کنید:
|
1 |
<form action="/action_page.php" target="_blank"> |
مقادیر دیگری که مجاز به استفاده از آن‌ها هستید شامل “_parent” و “_top” است.
خصیصه Method در فرم Html
خصوصیت method مشخص می‌کند که هنگام ارسال داده‌های فرم از کدام متد HTTP (یعنی GET یا POST) استفاده شود :
|
1 |
<form action="/action_page.php" method="get"> |
یا :
|
1 |
<form action="/action_page.php" method="post"> |
چه زمانی از متد GET استفاده کنیم؟
روش پیش‌فرض در زمان ارسال داده‌های فرم روش GET است. البته وقتی از این روش استفاده می‌شود، داده‌های فرم ارسال شده در فیلد آدرس صفحه قابل رویت خواهند بود:
|
1 |
/action_page.php?firstname=John&lastname=Doe |
نکاتی در مورد روش GET:
- داده‌های فرم را در جفت‌های نام/ مقدار (name/value) به url الحاق می‌کند.
- طول url محدود است (حدود ۳۰۰۰ کاراکتر)
- هرگز از روش GET برای ارسال داده‌های حساس استفاده نکنید (چون در url قابل رویت خواهند بود)
- این روش برای ارسال‌هایی مفید است که کاربر بخواهد نتایج را بوک‌مارک کند.
- روش GET برای داده‌های غیر امنیتی مانند رشته‌های کوئری در گوگل روش بهتری است
چه زمانی از متد POST استفاده کنیم؟
اگر داده‌های فرم‌ها حاوی اطلاعات حساس یا شخصی هستند همیشه از روش POST استفاده کنید. این روش داده‌های فرم ارسال شده را در فیلد آدرس صفحه نمایش نخواهد داد.
نکاتی در مورد روش POST
- این روش هیچ محدودیتی در اندازه نداشته و می‌تواند برای ارسال حجم عظیمی از داده‌ها مورد استفاده قرار بگیرد
- ارسال فرم با روش POST را نمی‌توان بوک مارک کرد.
خصوصیت Name در فرم Html
هر فیلد ورودی باید دارای یک خصوصیت name باشد تا ارسال شود. اگر این خصوصیت حذف شود، داده‌های آن فیلد ورودی هرگز ارسال نخواهد شد. مثال زیر فقط فیلد ورودی “Last name” را ارسال خواهد کرد:
|
1 2 3 4 5 |
<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" value="John"><br><br> <input type="submit" value="Submit"> </form> |
در جدول زیر فهرستی از خصوصیت‌های <form> آمده است:
| خصوصیت | توصیف |
| accept-charset | مجموعه کاراکتر به کار رفته در فرم ارسالی را مشخص می‌کند (پیش‌فرض: charset صفحه) |
| action | آدرس url که فرم باید به آن ارسال شود را مشخص می‌کند (پیش‌فرض: صفحه ارسال) |
| autocomplete | مشخص می‌کند که آیا مرورگر فرم را خودکار پر کند یا خیر (پیش‌فرض: بله) |
| enctype | رمزگذاری داده‌های ارسالی را مشخص می‌کند (پیش‌فرض: url رمزگذاری شده) |
| method | روش HTTP به کار رفته هنگام ارسال فرم را مشخص می‌کند (پیش‌فرض: GET) |
| name | نام به کار رفته برای شناسایی فرم را مشخص می‌کند (برای استفاده از DOM: document.form.name) |
| novalidate | مشخص می‌کند که مرورگر نباید فرم را تایید کند |
| target | هدف آدرس در خصوصیت action را مشخص می‌کند (پیش‌فرض: self_) |
گروه بندی داده های فرم Html با <fieldset>
عنصر <fieldset> برای گروه‌بندی داده‌های مرتبط در یک فرم به کار می‌رود. عنصر <legend> یک کپشن برای عنصر <fieldset> تعریف می‌کند:
|
1 2 3 4 5 6 7 8 9 10 |
<form action="/action_page.php"> <fieldset> <legend>Personalia:</legend> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </fieldset> </form> |
حتما بخوانید : فیلم آموزش Css و Css3 به زبان فارسی
عنصر <input> در فرم Html
مهمترین عنصر فرم عنصر <input> است که با توجه به خصوصیت type می‌تواند به روش‌های مختلفی نمایش داده شود:
|
1 |
<input type="text" id="firstname" name="firstname"> |
اگر خصوصیت type حذف شود، فیلد ورودی نوع پیش‌فرض یعنی “text” را می‌گیرد.
عنصر <select> در فرم Html
عنصر <select> یک فهرست کشویی (drop-down) تعریف می‌کند:
|
1 2 3 4 5 6 |
<select id="cars" name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> |
عناصر <option> یک گزینه تعریف می‌کنند که می‌تواند انتخاب شود. به صورت پیش‌فرض اولین آیتم در فهرست کشویی در حالت انتخاب قرار دارد. برای تعریف یک گزینه از پیش انتخاب شده، خصوصیت selected را به آن گزینه اضافه کنید:
|
1 |
<option value="fiat" selected>Fiat</option> |
مقادیر قابل رویت در فرم Html
از خصوصیت size برای تعریف تعداد مقادیر قابل رویت استفاده کنید:
|
1 2 3 4 5 6 |
<select name="cars" size="3"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> |
انتخاب چندتایی در فرم Html
از خصوصیت multiple استفاده کنید تا کاربر بتواند در عین حال چند مقدار یا گزینه را انتخاب کند:
|
1 2 3 4 5 6 |
<select name="cars" size="4" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> |
عنصر <textarea> در فرم Html
عنصر <textarea> یک فیلد ورودی چند خطی (ناحیه متنی) تعریف می‌کند:
|
1 2 3 |
<textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea> |
خصوصیت rows تعداد خطوط قابل رویت در ناحیه متنی را مشخص می‌کند. خصوصیت cols عرض قابل رویت ناحیه متنی را مشخص می‌کند. کد HTML بالا در مرورگر به شکل زیر نمایش می‌یابد.
همچنین می‌توانید با استفاده از CSS اندازه ناحیه متنی را تعریف کنید:
|
1 2 3 |
<textarea name="message" style="width:200px; height:600px;"> The cat was playing in the garden. </textarea> |
عنصر <button> در فرم Html
عنصر <button> یک دکمه قابل کلیک شدن تعریف می‌کند:
|
1 |
<button type="button" onclick="alert('Hello World!')">Click Me!</button> |
عناصر فرم در HTML5
نسخه HTML5 عناصر زیر را به فرم‌های خود افزوده است:
- <datalist>
- <output>
توجه داشته باشید که مرورگرها عناصر ناشناخته را نمایش نمی‌دهند. عناصر جدید در مرورگرهای قدیمی پشتیبانی نشده و صفحه وب سایت شما را نابود خواهند کرد. ما را تا انتها آموزش فرم ها در HTML همراهی نمایید.
عنصر <output> در HTML5
عنصر <output> نشان‌دهنده نتایج یک محاسبه است. در مثال زیر یک محاسبه انجام شده و نتایح در یک عنصر <output> نمایش داده می‌شوند:
|
1 2 3 4 5 6 7 8 9 10 11 |
<form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0 <input type="range" id="a" name="a" value="50"> 100 + <input type="number" id="b" name="b" value="50"> = <output name="x" for="a b"></output> <br><br> <input type="submit"> </form> |
فرم در HTML یکی از مباحث مهمی است که وب سایت شما را از حالت ایستا به حالت پویا و تعاملی تبدیل می‌کند. کاربر از طریق فرم‌ها با وب‌سایت ارتباط برقرار کرده و به درخواست آن پاسخ می‌هد. هرچه روش‌ها و گزینه‌های خلاقانه‌تری برای طراحی فرم‌های وب‌سایت خود استفاده کنید، کاربر راحت‌تر و سریع‌تر با آن ارتباط برقرار می‌کند.
منبع : W3schools
لیست جلسات قبل آموزش Html
- آموزش اصول اولیه و عناصر HTML
- آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
- آموزش کار با پاراگراف و استایل در Html
- آموزش کار با قالب بندی متن در Html
- آموزش کار با کامنت در HTML
- آموزش کار با کامنت در HTML
- آموزش کار با رنگ ها در HTML
- آموزش کار با تصاویر در HTML
- آموزش کار با لینک در HTML
- آموزش کار با جدول در HTML
- آموزش کار با لیست ها در HTML
- آموزش کار با عناصر Block و Inline در HTML
- آموزش کار با عنصر Class در HTML
- آموزش Html؛ آموزش iframe در HTML
- آموزش Html؛ آموزش جاوا اسکریپت در HTML
- آموزش کار با عنصر Head در HTML
- آموزش Layout در HTML
- آموزش طراحی سایت ریسپانسیو در HTML
- آموزش عناصر کد کامپیوتر در HTML
- آموزش موجودیت (Entities) در HTML
- آموزش نمادها (Symbols) در HTML
- آموزش کار با Character (کاراکترهای رزرو شده) در HTML
- آموزش رمزگذاری URL در HTML
- آموزش کامل کار با فرم ها در HTML
- آموزش انواع ورودی (Input) در HTML
- آموزش خصوصیات ورودی در HTML
حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی
حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- منبع : سورس باران
- رمز فايل : www.sourcebaran.com
- انتشار: ۱۱ تیر ۱۳۹۹
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- رپورتاژ
- فروشگاه
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- Go
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
