۵
فرم‌ها
تعامل با کاربران از طریق فرم‌های HTML
دنیای تعاملی فرم‌ها
با کاربران صحبت کنید و اطلاعات دریافت کنید!
فرم‌ها مثل یک مکالمه دوطرفه هستند! شما سوال می‌پرسید، کاربر جواب می‌دهد. تصور کنید بخواهید نظرسنجی کنید، ثبت‌نام بگیرید یا سفارش دریافت کنید - فرم‌ها بهترین راه هستند! 📝
در HTML، فرم‌ها شامل انواع مختلف ورودی‌ها هستند: کادر متن، دکمه، چک‌باکس، رادیو باتن و خیلی چیزهای دیگر!
حقیقت جالب:
اولین فرم وب در سال ۱۹۹۳ ساخته شد و فقط یک کادر جستجو بود!
فرم ساده
بیایید با ساده‌ترین فرم شروع کنیم. مثل ساختن یک پرسشنامه کوچک! 📋
فرم پایه
<form action="#" method="post">
<label for="name">نام:</label>
<input type="text" id="name" name="name" required>
<label for="email">ایمیل:</label>
<input type="email" id="email" name="email" required>
<label for="message">پیام:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<button type="submit">ارسال</button>
</form>نمایش در مرورگر:
توضیح تگ‌ها:
- • <form>: شروع فرم
- • <label>: برچسب برای ورودی‌ها
- • <input>: کادر ورودی
- • <textarea>: کادر متن چندخطی
- • <button>: دکمه
انواع ورودی‌ها
HTML انواع مختلف ورودی دارد. هر کدام برای کار خاصی طراحی شده‌اند! 🎯
ورودی‌های متنی
انواع متن
<!-- متن ساده -->
<input type="text" placeholder="نام شما">
<!-- ایمیل -->
<input type="email" placeholder="email@example.com">
<!-- رمز عبور -->
<input type="password" placeholder="رمز عبور">
<!-- شماره تلفن -->
<input type="tel" placeholder="۰۹۱۲۳۴۵۶۷۸۹">
<!-- آدرس وب -->
<input type="url" placeholder="https://example.com">نمایش:
ورودی‌های عددی و تاریخ
عدد و تاریخ
<!-- عدد -->
<input type="number" min="1" max="100" placeholder="سن">
<!-- تاریخ -->
<input type="date">
<!-- زمان -->
<input type="time">
<!-- رنگ -->
<input type="color">
<!-- محدوده -->
<input type="range" min="0" max="100" value="50">نمایش:
انتخاب‌ها و چک‌باکس‌ها
گاهی کاربر باید از بین گزینه‌ها انتخاب کند. مثل انتخاب غذای مورد علاقه! 🍕
رادیو باتن (یک انتخاب)
radio
<fieldset>
<legend>جنسیت:</legend>
<input type="radio" id="male" name="gender" value="male">
<label for="male">مرد</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">زن</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">سایر</label>
</fieldset>نمایش:
چک‌باکس (چند انتخاب)
checkbox
<fieldset>
<legend>علایق:</legend>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">موسیقی</label>
<input type="checkbox" id="sports" name="interests" value="sports">
<label for="sports">ورزش</label>
<input type="checkbox" id="reading" name="interests" value="reading">
<label for="reading">مطالعه</label>
<input type="checkbox" id="travel" name="interests" value="travel">
<label for="travel">سفر</label>
</fieldset>نمایش:
لیست‌ها و عناصر پیشرفته
برای انتخاب از فهرست طولانی، از select استفاده می‌کنیم. مثل انتخاب شهر از فهرست! 🏙️
فرم کامل
<form>
<!-- لیست کشویی -->
<label for="city">شهر:</label>
<select id="city" name="city" required>
<option value="">انتخاب کنید</option>
<option value="tehran">تهران</option>
<option value="isfahan">اصفهان</option>
<option value="shiraz">شیراز</option>
<option value="mashhad">مشهد</option>
</select>
<!-- لیست چندتایی -->
<label for="skills">مهارت‌ها:</label>
<select id="skills" name="skills" multiple size="4">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="php">PHP</option>
<option value="python">Python</option>
</select>
<!-- آپلود فایل -->
<label for="resume">رزومه:</label>
<input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx">
<!-- فیلد مخفی -->
<input type="hidden" name="form_id" value="contact_form">
<!-- دکمه‌های مختلف -->
<button type="submit">ارسال</button>
<button type="reset">پاک کردن</button>
<button type="button">لغو</button>
</form>نمایش در مرورگر:
تمرین عملی
حالا وقت ساختن یک فرم ثبت‌نام کامل است!
📝 تمرین:
یک فرم ثبت‌نام در دوره آموزشی بسازید که شامل موارد زیر باشد:
- • نام و نام خانوادگی (اجباری)
- • ایمیل (اجباری)
- • شماره تلفن
- • تاریخ تولد
- • جنسیت (رادیو باتن)
- • سطح تجربه (مبتدی، متوسط، پیشرفته)
- • دوره‌های مورد علاقه (چک‌باکس)
- • توضیحات اضافی (textarea)
- • چک‌باکس پذیرش قوانین
- • دکمه‌های ارسال و پاک کردن
جواب تمرین
این یکی از راه‌های حل این تمرین است:
registration.html
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>ثبت‌نام در دوره آموزشی</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.form-container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}
input, select, textarea {
width: 100%;
padding: 10px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 16px;
box-sizing: border-box;
}
input:focus, select:focus, textarea:focus {
border-color: #4CAF50;
outline: none;
}
.radio-group, .checkbox-group {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 5px;
}
.radio-item, .checkbox-item {
display: flex;
align-items: center;
gap: 5px;
}
.radio-item input, .checkbox-item input {
width: auto;
margin: 0;
}
.buttons {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 30px;
}
button {
padding: 12px 30px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
.submit-btn {
background-color: #4CAF50;
color: white;
}
.submit-btn:hover {
background-color: #45a049;
}
.reset-btn {
background-color: #f44336;
color: white;
}
.reset-btn:hover {
background-color: #da190b;
}
.required {
color: red;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="form-container">
<h1>ثبت‌نام در دوره آموزشی</h1>
<form action="#" method="post">
<!-- نام و نام خانوادگی -->
<div class="form-group">
<label for="fullname">نام و نام خانوادگی <span class="required">*</span></label>
<input type="text" id="fullname" name="fullname" required>
</div>
<!-- ایمیل -->
<div class="form-group">
<label for="email">ایمیل <span class="required">*</span></label>
<input type="email" id="email" name="email" required>
</div>
<!-- شماره تلفن -->
<div class="form-group">
<label for="phone">شماره تلفن</label>
<input type="tel" id="phone" name="phone" placeholder="۰۹۱۲۳۴۵۶۷۸۹">
</div>
<!-- تاریخ تولد -->
<div class="form-group">
<label for="birthdate">تاریخ تولد</label>
<input type="date" id="birthdate" name="birthdate">
</div>
<!-- جنسیت -->
<div class="form-group">
<label>جنسیت</label>
<div class="radio-group">
<div class="radio-item">
<input type="radio" id="male" name="gender" value="male">
<label for="male">مرد</label>
</div>
<div class="radio-item">
<input type="radio" id="female" name="gender" value="female">
<label for="female">زن</label>
</div>
<div class="radio-item">
<input type="radio" id="other" name="gender" value="other">
<label for="other">سایر</label>
</div>
</div>
</div>
<!-- سطح تجربه -->
<div class="form-group">
<label for="experience">سطح تجربه</label>
<select id="experience" name="experience">
<option value="">انتخاب کنید</option>
<option value="beginner">مبتدی</option>
<option value="intermediate">متوسط</option>
<option value="advanced">پیشرفته</option>
</select>
</div>
<!-- دوره‌های مورد علاقه -->
<div class="form-group">
<label>دوره‌های مورد علاقه</label>
<div class="checkbox-group">
<div class="checkbox-item">
<input type="checkbox" id="html" name="courses[]" value="html">
<label for="html">HTML</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="css" name="courses[]" value="css">
<label for="css">CSS</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="javascript" name="courses[]" value="javascript">
<label for="javascript">JavaScript</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="php" name="courses[]" value="php">
<label for="php">PHP</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="python" name="courses[]" value="python">
<label for="python">Python</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="react" name="courses[]" value="react">
<label for="react">React</label>
</div>
</div>
</div>
<!-- توضیحات اضافی -->
<div class="form-group">
<label for="description">توضیحات اضافی</label>
<textarea id="description" name="description" rows="4" placeholder="انگیزه شما برای شرکت در دوره چیست؟"></textarea>
</div>
<!-- پذیرش قوانین -->
<div class="form-group">
<div class="checkbox-item">
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">قوانین و مقررات را مطالعه کرده و می‌پذیرم <span class="required">*</span></label>
</div>
</div>
<!-- دکمه‌ها -->
<div class="buttons">
<button type="submit" class="submit-btn">ثبت‌نام</button>
<button type="reset" class="reset-btn">پاک کردن فرم</button>
</div>
</form>
</div>
</body>
</html>نکات مهم:
- • از required برای فیلدهای اجباری استفاده کنید
- • name برای گروه‌بندی رادیو باتن‌ها یکسان باشد
- • برای چک‌باکس‌های مشابه از name[] استفاده کنید
- • همیشه label برای دسترسی بهتر اضافه کنید
نکات مهم فرم‌ها
امنیت:
- • همیشه ورودی‌ها را در سمت سرور بررسی کنید
- • از CSRF protection استفاده کنید
- • رمزهای عبور را hash کنید
تجربه کاربری:
- • پیام‌های خطای واضح نمایش دهید
- • از placeholder برای راهنمایی استفاده کنید
- • فرم‌ها را ساده و کوتاه نگه دارید