در بخش پایانی از آموزش HTML قصد داریم در ارتباط با فرم‌ها صحبت کنیم و ویژگی‌های مختلف آن را بررسی نماییم. اما قبل از این موضوع نیاز است که بگوییم، در این دوره آموزشی ما با مبانی و اصول اصلی HTML آشنایی پیدا کردیم و تگ‌های مهم را مورد بررسی قرار دادیم. اگر که می‌خواهید به صورت بسیار کاملتری آموزش HTML را دنبال کنید، نیاز است که به دوره آموزش کامل HTML و HTML5 را مشاهده نمایید.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
کاربرد وب
یکی از اصلی‌ترین کاربردها در دنیای وب، تعامل برقرار کردن کاربر با وبسایت و ارسال اطلاعات است. این دو مورد اصلی‌ترین کارهایی است که با پیاده‌سازی فرم‌ها در یک وبسایت می‌توانید آن‌ها را در اختیار کاربران قرار دهید.
هر فرم یک یا چند شکل از ورودی را می‌گیرد. برای مثال به فرم تماس باما در این صفحه دقت کنید. می‌توانید ورودی‌هایی را ببینید که از شما خواسته‌اند تا اطلاعات مربوط به نام، ایمیل، موضوع و پیام را وارد کنید. همچنین در آخر یک دکمه تحت عنوان ارسال قرار گرفته که اطلاعات را از طریق اسکریپت‌هایی که در سرور اصلی نوشته شده است ارسال می‌کند.
بیایید با روش ساخت یک فرم استاندارد در HTML آشنا شویم.
آموزش پیشنهادی برای شما : آموزش کامل HTML و HTML5
تگ فرم
ابتدای کار برای اینکه یک محدوده از کدهای HTML را به فرم خودمان اختصاص دهیم نیاز است که تگ فرم را وارد کنیم. تمام ورودی‌ها و موارد لازم برای فرم در داخل این تگ نوشته می‌شود.
یک سند html جدید را باز کرده و کدهای زیر را در آن قرار دهید:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!doctype html> <html> <head> <title>Amuzeshtak</title> </head> <body> <form> </form> </body> </html> |
تگ input
حال که تگ اصلی فرم را در صفحه وارد کردیم، نیاز است که تگ‌های input را در بین تگ فرم قرار دهیم. تگ input می‌تواند ورودی‌های متفاوتی را برای ما شکل دهد. برای کار با این تگ نیاز است که خاصیت type آن را مقدار دهی بکنید. برای مثال به کد زیر دقت بکنید:
|
1 2 3 4 5 |
<form> Name: <input type="text" name="Name"> Family: <input type="text" name="Name"> </form> |
همانطور که مشاهده کردید ما با یک مقدار به نام type سر و کار داریم که من در اینجا مقدار آن را برابر با text قرار دادم. مقادیر مربوط به این خاصیت را می‌توانید در زیر به صورت لیست شده مشاهده بکنید:
• radio
• checkbox
• button
• color
• date
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week
• submit
• password
هر کدام از این ورودی‌ها کارایی‌های متفاوتی را ارائه می‌دهند. برای مثال با استفاده از radio می‌توانید یکسری رادیو باتن بسازید. برای مثال در فرم زیر می‌شود به خوبی از یک radio استفاده کرد:
|
1 2 3 4 5 |
<form> <h2>What is your gender?</h2> <input type="radio" name="gender" value="Male">Male <input type="radio" name="gender" value="Female">Female </form> |
در این شکل از ورودی شما با یک سوال روبرو هستید که این سوال یکسری گزینه به عنوان جواب دارد و در نهایت تنها یک جواب صحیح است. برای مثال شما چه جنسیتی دارید محدود به زن یا مرد بودن می‌شود و یک فرد نمی‌تواند در حالت عادی هر دو مورد باشد.
مقدار Value در تگ input بیانگر مقداری است که هر گزینه در خود دارد. وقتی که با یک زبان بک-اند کار بکنید مقدار مربوط به هر گزینه از طریق این خاصیت خوانده می‌شود. اما متن نمایشی خارج از input قرار می‌گیرد. به عنوان یک نکته مهم نیز باید بگویم که input یک تگ self closing است، بنابراین تگ بسته شدن ندارد!
خاصیت‌های input
با چند خاصیت از تگ input آشنا شدیم. مقدار type و value را بررسی نمودیم. اما چند مورد مهم دیگر نیز وجود دارد که باید به آن‌ها اشاره شود.
disabled
این خاصیت باعث می‌شود تا یک ورودی غیرفعال شود:
|
1 |
<input type="radio" name="gender" value="Male" disabled>Male |
readonly
این خاصیت باعث می‌شود تا یک ورودی برای ویرایش غیرقابل دسترس باشد.
|
1 |
Name: <input type="text" name="Name" value="Arastoo" readonly> |
مقدار value در مثال بالا نمایانگر مقدار پیشفرضی است که یک ورودی دریافت می‌کند.
maxlength
از این خاصیت به عنوان یک کنترل‌گر برای تعداد کاراکترهای مجاز در جهت وارد کردن به یک ورودی استفاده می‌شود.
|
1 |
Name: <input type="text" name="Name" maxlength="40"> |
size
این خاصیت باعث می‌شود تا میزان اندازه مربوط به فرم ورودی را تعیین بکنید
|
1 |
Name: <input type="text" name="Name" size="20"> |
لیست این دسته از خاصیت‌ها را به صورت کامل می‌توانید در زیر پیدا بکنید:
• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step
دیگر المان‌های تگ فرم
جدای از تگ input تگ‌های دیگری نیز هستند که می‌توانید از آن‌ها در داخل تگ form استفاده کنید. در زیر سعی می‌کنیم شما را با چندین مورد از این تگ‌ها آشنا بکنیم:
تگ Select
با استفاده از تگ Select می‌توانید یک لیست انتخاب شدنی را در داخل فرم‌تان پیاده‌سازی بکنید:
|
1 2 3 4 5 |
<select name="UI"> <option value="HTML">HTML</option> <option value="CSS">CSS</option> <option value="JS">Javascript</option> </select> |
تگ option زیر مجموعه‌ای از تگ‌های select است که گزینه‌ها را برای لیست انتخابی شما فراهم می‌آورد.
تگ textarea
با استفاده از تگ input می‌توانید یک ورودی یک خطی را ایجاد بکنید. اما با استفاده از تگ textarea می‌توانید یک بلاک متنی ایجاد بکنید که کاربر بدون محدودیت در آن می‌تواند متن خود را وارد بکند.
|
1 2 3 |
<textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea> |
این تگ از یکسری ردیف و ستون تشکیل شده است که می‌توان آن‌ها را با استفاده از خاصیت‌های rows و cols تعیین بکنید.
این دسته از تگ‌ها تعدادشان به نسبت زیاد است که می‌توانید با چند جستجوی ساده آن‌ها را بدست بیاورید.
اتمام دوره آموزشی
این دوره آموزشی با حمایت وبسایت آموزش تک تولید شده است و هدف آن آشنا کردن شما با کلیات HTML است. برای درک بهتر و کامل‌تر HTML نیاز است که دوره آموزشی کامل HTML و HTML5 را دنبال بکنید.
