📝 درس پنجم: فرمها در HTML
🎯 هدف این درس: آشنایی با فرمهای HTML، دریافت اطلاعات از کاربر، انواع فیلدهای ورودی و اصول اولیه ساخت فرمهای کاربردی
مهمان عزیز! 👋 به پنجمین درس از دوره HTML سطح مقدماتی خوش آمدی.
تا اینجا یاد گرفتی چطور ساختار یک صفحه وب را ایجاد کنی، متن و عنوان قرار بدهی، لینک و تصویر بسازی و اطلاعات را با لیستها و جدولها نمایش بدهی.
حالا میخواهیم وارد یکی از بخشهای بسیار مهم صفحات وب شویم: فرمها.
تقریباً هر وبسایتی که با آن کار میکنی، به نوعی از فرم استفاده میکند؛ از فرم ورود و ثبتنام گرفته تا فرم تماس، جستجو، ارسال نظر، ثبت سفارش و دریافت اطلاعات کاربران.
💡 نکته مهم مهمان:
HTML مسئول ساختار و ظاهر اولیه فرم است. برای پردازش اطلاعات ارسالشده، معمولاً به زبانهای سمت سرور مانند PHP یا JavaScript و Backend نیاز خواهیم داشت.
📋 بخش ۱: فرم چیست؟
فرم در HTML مجموعهای از عناصر است که به کاربر اجازه میدهد اطلاعاتی را وارد یا انتخاب کند و در نهایت آن اطلاعات را ارسال کند.
یک فرم میتواند شامل فیلدهای مختلفی باشد؛ برای مثال:
- 👤 نام و نام خانوادگی
- 📧 آدرس ایمیل
- 🔐 رمز عبور
- 📱 شماره تلفن
- 📝 متن پیام
- 🔘 گزینههای انتخابی
- ☑️ گزینههای چندانتخابی
- 📎 انتخاب فایل
- 🚀 دکمه ارسال
ساختار اصلی فرم
مهمترین تگ برای ایجاد فرم، تگ <form> است.
عناصر مربوط به فرم معمولاً داخل این تگ قرار میگیرند.
ساختار اولیه فرم
HTML
HTML5
<form>
<label for="name">نام:</label>
<input type="text" id="name" name="name">
<button type="submit">ارسال</button>
</form>
⚠️ توجه مهمان:
تگ <form> به تنهایی اطلاعاتی دریافت نمیکند. برای دریافت داده باید از عناصری مانند <input>، <textarea> و <select> استفاده کنیم.
⌨️ بخش ۲: فیلدهای ورودی با input
یکی از مهمترین عناصر فرم در HTML، تگ <input> است.
این تگ با استفاده از ویژگی type میتواند شکل و کاربردهای مختلفی داشته باشد.
📊 انواع پرکاربرد input
| نوع | کاربرد | مثال |
|---|---|---|
text |
متن معمولی | نام |
email |
ایمیل | example@email.com |
password |
رمز عبور | ******** |
number |
عدد | 28 |
tel |
شماره تلفن | 09123456789 |
date |
انتخاب تاریخ | 2026-08-15 |
مثال: چند نوع فیلد ورودی
انواع input
HTML
HTML5
<form>
<label for="name">نام:</label>
<input type="text" id="name" name="name">
<br><br>
<label for="email">ایمیل:</label>
<input type="email" id="email" name="email">
<br><br>
<label for="password">رمز عبور:</label>
<input type="password" id="password" name="password">
<br><br>
<label for="age">سن:</label>
<input type="number" id="age" name="age">
</form>
🏷️ بخش ۳: label و اهمیت آن
تگ <label> برای مشخص کردن عنوان یک فیلد استفاده میشود.
استفاده صحیح از label باعث میشود فرم برای کاربران قابل فهمتر و برای فناوریهای کمکی نیز مناسبتر باشد.
برای اتصال label به یک فیلد، مقدار ویژگی for را با مقدار id همان فیلد یکسان قرار میدهیم.
اتصال label به input
HTML
HTML5
<label for="username">نام کاربری:</label>
<input
type="text"
id="username"
name="username"
>
💡 نکته کلیدی مهمان:
همیشه سعی کن برای فیلدهای فرم از label استفاده کنی. این کار فقط برای زیبایی نیست و نقش مهمی در دسترسپذیری فرم دارد.
🔘 بخش ۴: گزینههای رادیویی و Checkbox
گاهی لازم است کاربر از بین چند گزینه، فقط یک گزینه را انتخاب کند. در این شرایط از radio استفاده میکنیم.
اگر کاربر بتواند چند گزینه را همزمان انتخاب کند، از checkbox استفاده میکنیم.
Radio و Checkbox
HTML
HTML5
<!-- انتخاب فقط یک گزینه -->
<p>جنسیت:</p>
<label>
<input type="radio" name="gender" value="male">
مرد
</label>
<label>
<input type="radio" name="gender" value="female">
زن
</label>
<!-- امکان انتخاب چند گزینه -->
<p>مهارتها:</p>
<label>
<input type="checkbox" name="skills" value="html">
HTML
</label>
<label>
<input type="checkbox" name="skills" value="css">
CSS
</label>
🔑 تفاوت مهم:
در گروهی از radioها باید مقدار name یکسان باشد تا کاربر فقط بتواند یکی از آنها را انتخاب کند.
در checkboxها معمولاً میتوان چند گزینه را انتخاب کرد.
📝 بخش ۵: textarea برای دریافت متنهای طولانی
اگر بخواهیم از کاربر متنی طولانی مانند توضیحات، پیام یا نظر دریافت کنیم، بهتر است به جای input از textarea استفاده کنیم.
textarea
HTML
HTML5
<label for="message">
پیام شما:
</label>
<textarea
id="message"
name="message"
rows="6"
cols="40"
placeholder="پیام خود را وارد کنید..."
></textarea>
🔽 بخش ۶: ساخت منوی انتخابی با select
با استفاده از <select> میتوانیم یک فهرست انتخابی ایجاد کنیم.
گزینههای این فهرست با تگ <option> ساخته میشوند.
select و option
HTML
HTML5
<label for="city">
شهر:
</label>
<select id="city" name="city">
<option value="">انتخاب کنید</option>
<option value="tehran">تهران</option>
<option value="isfahan">اصفهان</option>
<option value="shiraz">شیراز</option>
</select>
🚀 بخش ۷: دکمههای فرم
برای انجام عملیات مختلف در فرم میتوانیم از تگ <button> استفاده کنیم.
نوع دکمه با ویژگی type مشخص میشود.
انواع دکمه
HTML
HTML5
<!-- ارسال فرم -->
<button type="submit">
ارسال فرم
</button>
<!-- پاک کردن اطلاعات فرم -->
<button type="reset">
پاک کردن
</button>
<!-- دکمه معمولی -->
<button type="button">
دکمه معمولی
</button>
🔐 بخش ۸: اعتبارسنجی اولیه فرم با HTML
HTML امکاناتی دارد که با استفاده از آنها میتوانیم قبل از ارسال فرم، برخی اطلاعات ورودی کاربر را بررسی کنیم.
یکی از مهمترین ویژگیها، required است.
وقتی یک فیلد دارای required باشد، کاربر نمیتواند فرم را بدون پر کردن آن ارسال کند.
اعتبارسنجی اولیه
HTML
HTML5
<form>
<label for="name">
نام:
</label>
<input
type="text"
id="name"
name="name"
required
>
<br><br>
<label for="email">
ایمیل:
</label>
<input
type="email"
id="email"
name="email"
required
>
<br><br>
<button type="submit">
ارسال
</button>
</form>
🛡️ نکته امنیتی مهمان:
اعتبارسنجی HTML برای تجربه کاربری مفید است، اما به تنهایی یک لایه امنیتی کامل نیست.
اطلاعات دریافتی از کاربر باید در سمت سرور نیز اعتبارسنجی و پاکسازی شوند.
🧩 بخش ۹: پروژه عملی، ساخت فرم تماس
📝 پروژه: فرم تماس با ما
حالا وقتشه چیزهایی که یاد گرفتی را کنار هم قرار بدهی و یک فرم تماس ساده و استاندارد بسازی.
فرم باید شامل نام، ایمیل، موضوع، پیام و دکمه ارسال باشد.
🔍 راهحل پروژه:
فرم تماس
HTML
HTML5
<form>
<h2>فرم تماس با ما</h2>
<label for="name">
نام و نام خانوادگی:
</label>
<input
type="text"
id="name"
name="name"
placeholder="نام خود را وارد کنید"
required
>
<br><br>
<label for="email">
ایمیل:
</label>
<input
type="email"
id="email"
name="email"
placeholder="example@email.com"
required
>
<br><br>
<label for="subject">
موضوع:
</label>
<input
type="text"
id="subject"
name="subject"
required
>
<br><br>
<label for="message">
پیام:
</label>
<br>
<textarea
id="message"
name="message"
rows="6"
placeholder="پیام خود را بنویسید..."
required
></textarea>
<br><br>
<button type="submit">
ارسال پیام 🚀
</button>
</form>
🎯 تمرینهای عملی
تمرین شماره ۱: فرم ثبتنام
یک فرم ثبتنام طراحی کنید که شامل نام، ایمیل، رمز عبور و شماره تلفن باشد.
فیلدهای مهم را با required اجباری کنید.
تمرین شماره ۲: فرم نظرسنجی
فرمی بسازید که از کاربر بخواهد میزان رضایت خود از یک وبسایت را با گزینههای رادیویی مشخص کند.
سپس چند موضوع مورد علاقه را با checkbox دریافت کنید.
تمرین شماره ۳: فرم سفارش
یک فرم ساده سفارش طراحی کنید که شامل نام مشتری، انتخاب محصول، تعداد، شماره تلفن و توضیحات سفارش باشد.
🧠 نکات کلیدی درس
- ✅ فرمها با تگ
<form>ساخته میشوند. - ✅ برای دریافت اطلاعات کوتاه معمولاً از
<input>استفاده میکنیم. - ✅ نوع فیلد با ویژگی
typeمشخص میشود. - ✅ برای عنوانگذاری صحیح فیلدها از
<label>استفاده میکنیم. - ✅
radioبرای انتخاب یک گزینه از میان چند گزینه مناسب است. - ✅
checkboxامکان انتخاب چند گزینه را فراهم میکند. - ✅ برای متنهای طولانی از
<textarea>استفاده میکنیم. - ✅ برای فهرستهای انتخابی از
<select>و<option>استفاده میکنیم. - ✅ ویژگی
requiredبرای اجباری کردن فیلدها کاربرد دارد. - ✅ اعتبارسنجی سمت مرورگر جایگزین اعتبارسنجی سمت سرور نیست.
در درس بعدی با CSS آشنا میشویم و یاد میگیریم چطور ظاهر صفحات HTML خودمان را حرفهایتر و زیباتر کنیم.
