HTML Form Elements

فرم‌ها در HTML از چندین عنصر (Elements) تشکیل می‌شن که برای جمع‌آوری ورودی کاربر استفاده می‌شن.

🔹 1. <input>

پرکاربردترین عنصر فرم که انواع مختلفی داره مثل:

<form>
  نام: <input type="text" name="username"><br>
  رمز: <input type="password" name="password"><br>
  <input type="submit" value="ارسال">
</form>

🔹 2. <label>

برای مشخص کردن توضیح مربوط به یک فیلد ورودی استفاده می‌شه.

<form>
  <label for="email">ایمیل:</label>
  <input type="email" id="email" name="email">
</form>

🔹 3. <select> و <option>

برای ساخت لیست کشویی استفاده می‌شه.

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

🔹 4. <textarea>

برای دریافت متن چندخطی از کاربر.

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

🔹 5. <button>

برای ساخت دکمه‌های مختلف.

<form>
  <button type="submit">ارسال</button>
  <button type="reset">بازنشانی</button>
  <button type="button" onclick="alert('سلام!')">کلیک</button>
</form>

🔹 6. <fieldset> و <legend>

برای گروه‌بندی عناصر فرم و گذاشتن عنوان روی اون‌ها.

<form>
  <fieldset>
    <legend>اطلاعات کاربری</legend>
    نام: <input type="text" name="name"><br>
    ایمیل: <input type="email" name="email">
  </fieldset>
</form>

🔹 7. <datalist>

برای ایجاد لیست پیشنهادات هنگام تایپ.

<form>
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
  </datalist>
</form>

🔹 8. <output>

برای نمایش نتیجه یک محاسبه.

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="10"> +
  <input type="number" id="b" value="20"> =
  <output name="result"></output>
</form>

📋 جمع‌بندی

مهم‌ترین عناصر فرم عبارتند از:
✅ <input> → ورودی‌های مختلف
✅ <label> → توضیح فیلد
✅ <select> / <option> → لیست کشویی
✅ <textarea> → متن چندخطی
✅ <button> → دکمه‌ها
✅ <fieldset> / <legend> → گروه‌بندی
✅ <datalist> → پیشنهاد خودکار
✅ <output> → نمایش نتیجه