این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ form در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ form در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Form در HTML
تگ form همونطور که از اسمشم مشخصه با استفاده از اون میتونیم یک یا چندین فرم رو در یک صفحه ی وب ایجاد کنیم.
پیشنهاد میکنم آموزش کار با فرم ها را در HTML از اینجا مشاهده نمایید.
یسری تگ ها هستن که فقط مخصوص استفاده در تگ Form هستن، این تگ ها شامل موارد زیر می باشد :
Free-Learn
مثال از تگ form در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از تگ Form ( دریافت نام از کاربر )
|
1 2 3 4 5 6 7 8 |
<body> <form action="files/get_data.php" method="POST"> نام: <input type="text" name="myname"> <br><br> <input type="submit" value="ارسال"> </form> </body> |
مثال شماره ۲ : انتخاب یه گزینه از لیست
|
1 2 3 4 5 6 7 8 9 10 11 |
<form action="files/get_data2.php" method="POST"> طرفدار کدوم تیمی : <select name="tarafdari"> <option value="Esteghlal">استقلال</option> <option value="Persepolis">پرسپولیس</option> <option value="Sepahan">سپاهان</option> <option value="Tractor">تراکتور</option> <option value="other">دیگر تیم ها</option> </select> <input type="submit" value="ارسال"> </form> |
مثال شماره ۳ : دریافت یه متن از کاربر
|
1 2 3 4 5 |
<form action="files/get_data3.php" method="POST"> <textarea name="message" placeholder="نظرت در مورد فری لرن"></textarea> <br> <input type="submit" value="ارسال"> </form> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ form در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ form در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| accept-charset | character_set | نحوه کدگذاری داده ها در هنگام ارسال بسمت سرور |
| action | URL | آدرس 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 |
نحوه باز شدن صفحه مقصد ( صفحه ای که رو سرور هستش ) را مشخص میکند |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ form از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- نکته یا توضیح خاصی وجود ندارد.
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ form را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 4 |
form { display: block; margin-top: 0em; } |
