فرم‌ها
| Main Page Tutorial | |
|---|---|
 | |
| موارد آموزشی | |
| فرم‌های HTML | |
| ۱ | فرم‌ها |
| ۲ | عناصر فرم |
| ۳ | انواع ورودی |
| ۴ | ویژگی‌های ورودی |
| ۵ | ویژگی ورودی Form |
| گرافیک در HTML | |
| رسانه در HTML | |
| APIها در HTML | |
| مثال‌ها | |
| مرجع HTML | |
مثال فرم HTML
ساخت نمونه مثال این بخش در دست اقدام است.
عنصر <form>
عنصر <form> در HTML فرمی را تعریف می‌کند که برای جمع‌آوری ورودی کاربر استفاده می‌شود:[۱]
1 <form>
2 .
3 form elements
4 .
5 </form>
یک فرم HTML شامل عنصرهای فرم است.
عنصرهای فرم انواع مختلفی از عنصرهای ورودی هستند مانند فیلدهای متن، چک باکس‌ها، radio buttonها، کلیدهای submit و غیره.
عنصر <input>
عنصر <input> مهمترین عنصر فرم است.
عنصر <input> را می‌توان بسته به نوع ویژگی با روش‌های بسیاری نمایش داد.
در اینجا چند مثال بیان شده‌است:
| نوع | تعریف |
|---|---|
| <input type="text"> | فیلد ورودی متن تک خطی را مشخص می‌کند |
| <input type="radio"> | یک radio button تعریف می‌کند (برای انتخاب یک مورد از میان چند مورد) |
| <input type="submit"> | یک کلید submit تعریف می‌کند (برای ثبت کردن (به انگلیسی: submit) فرم) |
ورودی متن
<input type="text"> یک ورودی متن تک خطی را مشخص می‌کند:
مثال
1 <form>
2 <label for="fname">First name:</label><br>
3 <input type="text" id="fname" name="fname"><br>
4 <label for="lname">Last name:</label><br>
5 <input type="text" id="lname" name="lname">
6 </form>
در مرورگر به شکل زیر خواهد بود:
ساخت نمونه مثال این بخش در دست اقدام است.
عنصر <label>
به استفاده از عنصر <label> در مثال بالا دقت کنید.
تگ <label> یک برچسب برای بسیاری از عنصرهای فرم تعریف می‌کند.
عنصر <label> برای کاربران صفحه خوان‌ها مفید است، زیرا هنگامی که کاربر عنصر ورودی را انتخاب می‌کند، صفحه خوان برچسب را بلند خواهد خواند.
همچنین عنصر <label> به کاربرانی که برای کلیک کردم برروی ناحیه‌های بسیار کوچک (مانند Radio Buttonها یا چک باکس‌ها) مشکل دارند کمک می‌کند - زیرا هنگامی که کاربر برروی متن دورن عنضر <label> کلیک می‌کند، این کار باعث انتخاب یا عدم انتخاب radio button / چک باکس می‌شود.
ویژگی for مربوط به تگ <label> معادل ویژگی id برای عنصر <input> برای اتصال آنها به هم است.
ورودی Radio Button
<input type="radio"> یک radio button تعریف می‌کند
Radio buttonها به کاربر این امکان را می‌دهند که از بین گزینه‌های محدود یک مورد را انتخاب کند:
مثال
1 <form>
2 <input type="radio" id="male" name="gender" value="male">
3 <label for="male">Male</label><br>
4 <input type="radio" id="female" name="gender" value="female">
5 <label for="female">Female</label><br>
6 <input type="radio" id="other" name="gender" value="other">
7 <label for="other">Other</label>
8 </form>
کد HTML بالا به شکل زیر نمایش داده می‌شود:
ساخت نمونه مثال این بخش در دست اقدام است.
کلید Submit (ثبت یا ارسال)
<input type="submit"> یک کلید برای ارسال داده‌های فرم به مدیر فرم (به انگلیسی: Form Handler) استفاده می‌شود.
Form-handler معمولاً یک صفحه سرور با اسکریپتی برای پردازش داده‌های ورودی است.
Form-handler در ویژگی action فرم مشخص می‌شود:
مثال
1 <form action="/action_page.php">
2 <label for="fname">First name:</label><br>
3 <input type="text" id="fname" name="fname" value="John"><br>
4 <label for="lname">Last name:</label><br>
5 <input type="text" id="lname" name="lname" value="Doe"><br><br>
6 <input type="submit" value="Submit">
7 </form>
کد HTML بالا به شکل زیر در مرورگر نمایش داده می‌شود:
ساخت نمونه مثال این بخش در دست اقدام است.
ویژگی Action
ویژگی action عملی که باید هنگام submit فرم اجرا شود را مشخص می‌کند.
معمولاً هنگامی که کاربر برروی کلید submit کلیک می‌کند، دادهٔ فرم به یک صفحه وب در سرور ارسال می‌شود.
در مثال بالا، داده‌های فرم به صفحه ای به نام "/action_page.php" در سرور ارسال می‌شود. این صفحه شامل یک اسکریپت سمت‌سرور است که داده‌های فرم را مدیریت می‌کند:
<form action="/action_page.php">
اگر ویژگی action حذف شود، action برابر با آدرس صفحه فعلی تنظیم می‌شود.
ویژگی Target
ویژگی target مشخص می‌کند که آیا نتایج ثبت شده در تب جدید مرورگر، یک فریم یا در همان پنجره فعلی باز خواهند شد یا خیر.
مقدار پیش‌فرض “_self” است که یعنی فرم در همان صفحه جاری submit خواهد شد.
برای اینکه نتایج در تب جدید مرورگر باز شوند، از مقدار “_blank” استفاده می‌شود:
مثال
<form action="/action_page.php" target="_blank">
مقادیر صحیح دیگر “_parent” و “_top” هستند یا نامی که نشان دهنده نام یک iframe باشد.
ویژگی Method
ویژگی متد HTTP یک (GET یا SET) را برای استفاده در هنگام submit داده‌های فرم مشخص می‌کند.
مثال
<form action="/action_page.php" method="get">
یا:
مثال
<form action="/action_page.php" method="post">
چه زمانی از GET استفاده شود؟
متد پیش فرص هنگام submit داده‌های فرم GET است.
با این حال، هنگامی که GET استفاده می‌شود، داده‌های فرم Submit شده در فیلد آدرس صفحه قابل مشاهده هستند.
/action_page.php?firstname=John&lastname=Doe
نکات GET:
- داده‌های فرم را در دوتایی‌های‌های نام/ مقدارِ URL ضمیمه می‌کند
- طول URL محدود است (۲۰۴۸ کاراکتر)
- هرگز از GET برای ارسال داده‌های حساس استفاده نکنید! (در URL قابل رویت خواهد بود)
- برای submitهایی که کاربر می‌خواهد نتایج آن را bookmark کند مفید است
- GET برای داده‌های غیر امن مانند رشته‌ها در Google بهتر است
چه زمانی از POST استفاده شود؟
همیشه زمانی که داده‌های فرم شامل داده‌های حساس یا شخصی هستند از POST استفاده کنید. متد POST داده‌های submit شده فرم را در فیلد آدرس صفحه نمایش نمی‌دهد.
نکات POST:
- POST محدودیت اندازه ندارد و می‌توان برای ارسال حجم زیاد داده از آن استفاده کرد.
- Submitهای فرم بوسیله POST را نمی‌توان bookmark کرد.
ویژگی Name
هر فیلد ورودی باید یک ویژگی name برای submit داشته باشد.
اگر ویژگی name حذف شود، داده‌های آن فیلد ورودی اصلاً ارسال نخواهند شد.
این مثال تنها فیلد ورودی “Last name” را submit می‌کند:
مثال
1 <form action="/action_page.php">
2 <label for="fname">First name:</label><br>
3 <input type="text" id="fname" value="John"><br><br>
4 <input type="submit" value="Submit">
5 </form>
تمرین های HTML
ساخت نمونه مثال این بخش در دست اقدام است.
در اینجا لیستی از ویژگی‌های <form> آورده شده‌است:
| ویژگی | تعریف |
|---|---|
| accept-charset | مجموعه کاراکتر مورد استفاده در فرم submit شده را مشخص می‌کند (پیش‌فرض: مجموعه کاراکتر صفحه). |
| action | آدرس (به انگلیسی: URL) محل submit شدن فرم را مشخص می‌کند (پیش‌فرض: همان صفحه Submit). |
| autocomplete | تعیین می‌کند آیا مرورگر باید فرم را بطور خودکار پر کند یا خیر (پیش‌فرض: on (به فارسی: روشن)) |
| enctype | کدگذاری داده‌های submit شده را تعیین می‌کند (پیش‌فرض:url-encoded) |
| method | متد HTTP استفاده شده هنگام submit فرم را مشخص می‌کند (پیش‌فرض:GET) |
| name | نام مورد استفاده برای شناسایی فرم را مشخص می‌کند (برای استفاده DOM: document.forms.name) |
| novalidate | تعیین می‌کند که مرورگر نباید فرم را تأیید اعتبار کند. |
| target | هدف آدرس در ویژگی Action را مشخص می‌کند (پیش‌فرض : _self). |
منابع آموزشی