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

آموزش تگ form در HTML - راهنمای کار با فرم در html

تگ form استفاده می شود. با کمک فرم ها می توان نظرسنجی برگزار کرد، کامنت گذاشت، در سیستم عضویت ثبت نام کرد، فایل آپلود کرد و...

تگ form استفاده می شود. با کمک فرم ها می توان نظرسنجی برگزار کرد، کامنت گذاشت، در سیستم عضویت ثبت نام کرد، فایل آپلود کرد و...

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

    <input>
    <textarea>
    <button>
    <select>
    <option>
    <optgroup>
    <fieldset>
    <label>
    <output>


مثال تگ form در HTML

مثال 1: دریافت نام از کاربر با استفاده از تگ form

 <form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>


مثال 2: انتخاب یک گزینه از لیست

<form action="files/get_data2.php" method="POST">
 کدام گل زیباتر است؟
<select name="gol">
 <option value="soosan">سوسن</option>
 <option value="narges">نرگس</option>
 <option value="alaleh">آلاله</option>
 <option value="mohamadi">محمدی</option>
 <option value="yas">یاس</option>
</select>
 <input type="submit" value="ارسال">
</form>

 

مثال 3: دریافت متن از کاربر

<form action="files/get_data3.php" method="POST">
<textarea name="message" placeholder="متن پیام خود را وارد کنید"></textarea>
<br>
<input type="submit" value="ارسال">
</form>


مثال 4: دریافت اطلاعات از کاربر با چک باکس

 <form action="/action_page.php" method="get">
  <input type="checkbox" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" name="vehicle3" value="Boat" checked>
  <label for="vehicle3"> I have a boat</label><br><br>
  <input type="submit" value="Submit">
</form>


پشتیبانی مرورگرها

تگ <form> در مرورگرهای کروم، فایرفاکس، اپرا، سافاری، اینترنت اکسپلورر و اج پشتیبانی می شود.

مرورگر کروم فایرفاکس اپرا سافاری اینترنت اکسپلورر / اج
پشتیبانی بله بله بله بله بله


ویژگی ها

ویژگی مقدار توضیحات
accept file_type نوع فایل هایی که کاربر می تواند آپلود کند را مشخص می کند.
این ویژگی در HTML5 پشتیبانی نمی شود.
accept-charset character_set نحوه کد گذاری کاراکترهای ارسالی را مشخص می کند.
action URL آدرس صفحه ای که داده های فرم ارسال می شود را مشخص می کند.
autocomplete on
off
قابلیت تکمیل خودکار فیلدهای فرم را مشخص می کند.
enctype application/x-www-form-urlencoded
multipart/form-data
text/plain
نحوه کد گذاری داده ها هنگام ارسال داده ها از طریق متد POST به سرور را مشخص می کند.
method get
post
روش ارسال داده های فرم به سمت سرور را مشخص می کند.
name text نام فرم را مشخص می کند.
novalidate novalidate مشخص می کند هنگام ارسال داده های فرم نیازی به اعتبارسنجی نیست.
target _blank
_self
_parent
_top
نحوه باز شدن صفحه مقصد را مشخص می کند.


پشتیبانی از ویژگی ها و رویدادهای عمومی

تگ <form> از ویژگی های عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.


دستورات CSS پیش فرض

معمولا مرورگرها تگ form را بصورت پیش فرض با دستورات CSS زیر نمایش می دهند.

form {
  display: block;
  margin-top: 0em;
}

 

موضوع: آموزش HTML
کلمات کلیدی: ، ، ، ، ، ، ، ، ، ، ،

نظرات نظرات تا اطلاع ثانوی غیر فعال است.