تابز مدیا | آموزش قدم به قدم برنامه نویسی

HTML Forms

فرم‌ها در HTML برای گرفتن اطلاعات کاربر استفاده می‌شن (مثل ثبت‌نام، ورود، جستجو و …).
اطلاعات فرم معمولاً به سرور ارسال می‌شن تا پردازش بشن.

🔹 1. تگ اصلی `<form>`

تگ <form> همه عناصر فرم رو در خودش قرار می‌ده.
ویژگی‌های مهم:

action → آدرس سروری که داده‌ها بهش ارسال می‌شن
method → روش ارسال داده (GET یا POST)


<form action="/submit.php" method="post">
  <!-- عناصر فرم اینجا قرار می‌گیرن -->
</form>

🔹 2. انواع ورودی‌ها (Input Types)

با <input> می‌تونی داده‌های مختلف بگیری:


<form>
  نام: <input type="text" name="username"><br><br>
  رمز عبور: <input type="password" name="password"><br><br>
  ایمیل: <input type="email" name="email"><br><br>
  شماره: <input type="number" name="age"><br><br>
  تاریخ: <input type="date" name="birthday"><br><br>
  رنگ: <input type="color" name="favcolor"><br><br>
  <input type="submit" value="ارسال">
</form>

🔹 3. Radio Buttons (انتخاب یک گزینه)


<p>جنسیت:</p>
<input type="radio" name="gender" value="male"> مرد
<input type="radio" name="gender" value="female"> زن

🔹 4. Checkboxes (انتخاب چندتایی)


<p>علایق:</p>
<input type="checkbox" name="interest" value="coding"> برنامه‌نویسی
<input type="checkbox" name="interest" value="music"> موسیقی
<input type="checkbox" name="interest" value="sports"> ورزش

🔹 5. Dropdown (لیست انتخابی)


<label for="cars">یک ماشین انتخاب کنید:</label>
<select id="cars" name="cars">
  <option value="volvo">ولوو</option>
  <option value="benz">بنز</option>
  <option value="bmw">بی‌ام‌و</option>
</select>

🔹 6. Textarea (متن بلند)


<label for="message">پیام شما:</label><br>
<textarea id="message" name="message" rows="4" cols="30"></textarea>

🔹 7. Button (دکمه‌ها)


<button type="submit">ارسال</button>
<button type="reset">بازنشانی</button>

🔹 8. ساختار کامل یک فرم


<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>فرم HTML</title>
</head>
<body>
  <h2>فرم ثبت‌نام</h2>
  <form action="/submit.php" method="post">
    نام: <input type="text" name="username" required><br><br>
    ایمیل: <input type="email" name="email" required><br><br>
    رمز عبور: <input type="password" name="password" required><br><br>
    جنسیت:
    <input type="radio" name="gender" value="male"> مرد
    <input type="radio" name="gender" value="female"> زن <br><br>
    علایق:
    <input type="checkbox" name="interest" value="coding"> کدنویسی
    <input type="checkbox" name="interest" value="music"> موسیقی
    <input type="checkbox" name="interest" value="sports"> ورزش <br><br>
    <label for="bio">بیوگرافی:</label><br>
    <textarea id="bio" name="bio" rows="4" cols="30"></textarea><br><br>
    <button type="submit">ثبت نام</button>
  </form>
</body>
</html>