تگ فرم در HTML :ساخت و طراحی فرم های سایت 📜 به‌ کمک این تگ

شغل:طراحی وب

درآمد:۱۳۰ هزار دلار سالانه

مکان:هر کشوری دوست داری

مسیر: ۷ دوره آموزشی

منتور ۲ :جلسه آنلاین با استاد

منتور ۱ : کافه گپ و گفت

بزن بریم

در این مطلب از آموزش html و css می خواهیم درباره تگ فرم در HTML صحبت کنیم. تگ form جهت ایجاد فرم ها از جمله فرم تماس در سایت شما می باشد. بنابراین لازم است که با ساختار و نحوه کدنویسی تگ فرم در HTML آشنا شوید و بدانید این عنصر در کجا کاربرد دارد. بنابراین تا انتهای مطلب با ما همراه باشید تا تسلط کافی نسبت به این تگ پیدا کنید.

آنچه در این مقاله می آموزید:

تگ فرم در HTML چیست؟

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

دوره پیشنهادی : یادگیری آموزش flexbox در css

چرا از تگ فرم در HTML استفاده می شود؟

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

ساختار تگ فرم در HTML

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

<form action=”server url” method=”get|post”>

روش ساخت فرم در HTML

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

تگ input چیست؟

تگ <input> برای ایجاد فیلدهای یک فرم استفاده می‌ شود. در واقع خود تگ فرم در HTML خروجی قابل نمایشی برای کاربران ندارد و این تگ‌ های input هستند که به کاربر نمایش داده می‌ شوند و کاربران باید از آنها برای درج اطلاعات استفاده کنند. تگ input یک فیلد برای ورود اطلاعات ایجاد می‌ کند. inputها می‌ توانند فیلدهایی از نوع ورودی متنی باشند، چک لیست‌ باشند یا دکمه‌ ارسال فرم را ایجاد کنند. به کمک صفت type می‌ توانید نوع این تگ را مشخص کنید:

توضیحات	نوع input
نمایش ورودی متن تک‌خط	<input type=”text”>
نمایش گزینه‌های انتخابی با قابلیت فقط یک انتخاب	<input type=”radio”>
نمایش گزینه‌های انتخابی با قابلیت چندانتخابی	<input type=”checkbox”>
نمایش دکمه ارسال فرم	<input type=”submit”>
نمایش یک دکمه‌ی قابل کلیک	<input type=”button”>

در تصویر زیر خروجی هرکدام از این نوع type ها را می‌ توانید مشاهده کنید:

کار با تگ فرم در HTML

اساس کار همه فرم ها به صورت زیر می باشد:

ایجاد تگ Form (اسکلت اصلی فرم) (برعهده زبان HTML)
استایل فرم (مثلا رنگ بندی و شکل آن) (برعهده زبان CSS)
اعتبارسنجی (یعنی مثلا اگه نام خالی بود پیغام دهد نام را وارد کنید) (می تواند با HTML یا JS یا Jquery و یا PHP انجام شود)
گرفتن داده ها (یعنی چیزی که کاربر وارد کرده را بتوانید دریافت کنید) (برعهده زبان های سمت سرور مثل PHP)

همانطور که میبینید هر زبانی اینجا برای خودش یک وظیفه ای دارد و دقیقا زبان های طراحی وب یعنی همین! یعنی هر زبانی برای انجام کاری ایجاد شده است.

دوره پیشنهادی : یادگیری آموزش php و MySQL

ایجاد تگ فرم در HTML

برای ایجاد یک فرم HTML کارتان را با استفاده از تگ form شروع می کنید. تگ فرم در html به صورت ساده و در حالت کلی، شکلی مشابه کد زیر دارد:

<form action="url" method="GET|POST">
 عناصر فرم را در اینجا قرار می دهید
</form>

همانطور که مشاهده می کنید در تگ form می بایست از دو صفت (attribute) با عناوین action و method استفاده کنید. هر دوی این صفات در کار کردن صحیح یک فرم، مهم و حائز اهمیت هستند.

صفت action در تگ فرم در html

با استفاده از این صفت تعیین می کنید که اطلاعات فرم به چه آدرسی ارسال شود. کافی است آدرس صفحه ای را که قرار است اطلاعات فرم را پردازش کند به عنوان مقدار action قرار دهید.

صفت method در تگ فرم در html

صفت متد می تواند دارای دو حالت POST یا GET باشد. زمانی نوع GET را برای فرم خود انتخاب می کنید که اطلاعاتی که توسط فرم ارجاع داده می شوند، دارای اهمیت (خصوصا اهمیت امنیتی) خاصی نیستند. مثلا یک کوئری جستجو. وقتی از حالت GET استفاده کنید، متغیر ها و مقادیر آنها پس از ارسال فرم، در انتهای آدرسی که به عنوان action فرم قرار گرفته، قابل مشاهده خواهند بود. مانند آدرس زیر:

actionpage.php?firstname=Little&lastname=Mouse

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

صفت Name در Input ها

بعد از صفت Action و Method در تگ فرم در HTML این صفت Name هست که خیلی ضروری و مهم است. یعنی در واقع داده های فرم توسط صفت Name به سمت سرور ارسال می شود، یعنی در سمت سرور از طریق این صفت می توانید متوجه شوید کاربر چه چیزی وارد کرده است. کافی است از این صفت در هریک از Input هایتان استفاده کنید و یک نام دلخواه برایشان مشخص کنید. هر نامی که دوست داشتید می توانید مشخص کنید، ولی سعی کنید نام هایتان منحصربفرد باشد. مثلا اگه برای یه اینپوت نام test مشخص کردید برای اینپوت دیگر باید نام متفاوت باشد.

مثال : مشخص کردن یک نام برای input با استفاده از صفت Name

<input type="text" name="myname">

دوره پیشنهادی : یادگیری آموزش grid در css

مثال از تگ فرم در HTML

مثال شماره ۱ : ایجاد یک فرم ساده با یک عدد اینپوت و دکمه ارسال

<body>
 
<form>
نام: <input type="text"> <br><br>
<input type="submit" value="ارسال">
</form>
 
</body>

تگ ها و صفت های مخصوص تگ فرم در HTML

توضیحات	نام تگ
یک فرم HTML برای گرفتن داده های ورودی تعریف می کند.	<form>
یک کنترل ورودی را تعیین می کند.	<input>
ایک کنترل ورودی چند خطی تعریف می کند.	<textarea>
یک برچسب برای یک عنصر ورودی تعریف می کند.	<label>
قسمت های مرتبط به هم را گروه بندی می کند.	<fieldset>
یک عنوان برای عنصر <fieldset> تعریف می کند.	<legend>
یک لیست کشویی تعریف می کند.	<select>
گزینه های مرتبط را در یک لیست کشویی گروه بندی می کند.	<optgroup>
یک گزینه در لیست کشویی تعریف می کند.	<option>
یک دکمه قابل کلیک تعریف می کند.	<button>

تگ های فرم در HTML5

توضیحات	نام تگ
لیستی از گزینه های پیش فرض برای کنترل ورودی مشخص می کند.	<datalist>
یک فیلد تولیدکننده جفت کلید برای فرم تعریف می کند.	<keygen>
نتیجه یک محاسبه مشخص می کند.	<output>

قرار دادن دکمه در فرم با استفاده از عنصر button

مجموعا سه نوع دکمه مختلف وجود دارد که می توانید آنها را در فرم های خود قرار داده و از آنها استفاده کنید. در ادامه به شرح انواع دکمه می پردازیم:

type = button

در این حالت تنها یک دکمه ساده دارید که تقریبا هیچ کاری نمی کند. (گاها در بعضی مرورگرها ممکن است این حالت معادل نوع submit باشد) در این حالت می توان با جاوا اسکریپت عمل خاصی را به دکمه نسبت داد.

type = reset

این نوع دکمه در تگ فرم در HTML می تواند اطلاعات درج شده در فرم را پاک کرده و فرم را به حالت اول برگرداند.

type = submit

در این حالت از تگ فرم در HTML دکمه می تواند اطلاعات فرم را به آدرسی که در action تعیین شده ارسال کند. توجه داشته باشید که استفاده از این نوع دکمه در برخی مرورگرهای قدیمی تر باعث می شود که اطلاعات کلیه فرم های موجود در صفحه به صورت یکجا ارسال شود که این مسئله ایده آل نیست. بنابراین شاید بهتر باشد که به جای این نوع دکمه از همتای آن در عنصر input استفاده کنید.

در مورد دکمه ها ذر تگ فرم در HTML چند نکته وجود دارد:

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

<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>

مثال بالا دو دکمه دارای تایپ های submit و reset را نشان میدهد.

<form action="demoform.asp" method="get" id="form1">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
</form>

<button type="submit" form="form1" value="Submit">Submit</button>

مثال فوق حالتی را نشان می دهد که دکمه در بیرون فرم قرار گرفته ولی فقط محتوای فرم مورد نظر را به صفحه درج شده در action ارسال می کند. (یعنی محل فرم شما می تواند از محل قرارگیری دکمه ارسال در صفحه کاملا جدا باشد)

قرار دادن ورودی های مخفی یا hidden در فرم

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

هر گاه مایلید اطلاعاتی از طریق فرم ارسال شود ولی این اطلاعات برای کاربر نمای ظاهری نداشته باشد، از ورودی های مخفی یا hidden استفاده می کنید. ورودی های مخفی یکی از انواع در دسترس برای عنصر input بوده و به شکل زیر مورد استفاده قرار می گیرند:

<input type="hidden" name="pagename" value="11">

یا

<input type="hidden" name="token" value="x983ujhkdf86732oikjeo9f8jh">

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

ساختن فرم تماس HTML

در ساختن یک فرم تماس در ساده ترین حالت نیاز به یک فیلد برای دریافت نام، یک فیلد برای دریافت ایمیل و یک فیلد جهت دریافت پیام دارید. بنابراین با ترکیب آنچه آموختید می توانید فرم زیر را ایجاد کنید:

<form action="/yourpageaddress.php" method="post">
    <div>
        <label for="name">نام شما :</label>
        <input type="text" id="name" name="user_name" />
    </div>
    <div>
        <label for="mail">آدرس ایمیل :</label>
        <input type="email" id="mail" name="user_mail" />
    </div>
    <div>
        <label for="msg">پیام شما :</label>
        <textarea id="msg" name="user_message"></textarea>
    </div>
 
    <div class="button">
        <button type="submit">ارسال پیام</button>
    </div>
</form>

سخن پایانی

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

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

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