صفحه اول >> دانستنی ها >>
آموزش تگ 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>
<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>
کدام گل زیباتر است؟
<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>
<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>
<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;
}
display: block;
margin-top: 0em;
}
موضوع: آموزش HTML
نظرات نظرات تا اطلاع ثانوی غیر فعال است.