web development-وب-برنامه نویسی وب-فرانت اند-front endدوره رایگان-الگوریتم اول-free-آموزش کامل

لطفا صبر کنید...

انواع ورودی در HTML

در HTML، تگ input برای ایجاد انواع مختلف ورودی‌ها (فیلدها) استفاده می‌شود. این ورودی‌ها می‌توانند انواع مختلفی از داده‌ها را از کاربر دریافت کنند. در زیر، انواع ورودی‌ها و کاربردهای آن‌ها آورده شده است:

انواع ورودی‌های input:

  1. ورودی متن (Text Input): برای دریافت ورودی‌های متنی از کاربر.

    <input type="text" id="username" name="username">

  2. ورودی پسورد (Password Input): برای دریافت ورودی‌های پسورد، که متن ورودی را مخفی می‌کند.

    <input type="password" id="password" name="password">

  3. ورودی ایمیل (Email Input): برای دریافت آدرس ایمیل. مرورگر می‌تواند اعتبارسنجی اولیه انجام دهد.

    <input type="email" id="email" name="email">

  4. ورودی عدد (Number Input): برای دریافت ورودی‌های عددی. این ورودی امکان تعیین محدودیت‌های عددی را نیز دارد.

    <input type="number" id="age" name="age" min="18" max="100">

  5. ورودی تاریخ (Date Input): برای دریافت تاریخ. معمولاً یک تقویم در اختیار کاربر قرار می‌دهد.

    <input type="date" id="birthday" name="birthday">

  6. ورودی زمان (Time Input): برای دریافت زمان.

    <input type="time" id="appointment" name="appointment">

  7. ورودی رنگ (Color Input): برای انتخاب رنگ. مرورگر یک انتخابگر رنگ نمایش می‌دهد.

    <input type="color" id="favcolor" name="favcolor">

  8. ورودی رادیویی (Radio Button): برای انتخاب یک گزینه از میان چندین گزینه.

    <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>

  9. ورودی چک‌باکس (Checkbox): برای انتخاب یا عدم انتخاب یک گزینه.

    <input type="checkbox" id="subscribe" name="subscribe">
    <label for="subscribe">عضویت در خبرنامه</label>

  10. ورودی فایل (File Input): برای انتخاب و آپلود فایل.

 
<input type="file" id="fileupload" name="fileupload">
  1. ورودی شماره تلفن (Tel Input): برای دریافت شماره تلفن. مرورگر می‌تواند شماره تلفن را اعتبارسنجی کند.
 
<input type="tel" id="phone" name="phone">
  1. ورودی URL (URL Input): برای دریافت URL. مرورگر می‌تواند اعتبارسنجی URL را انجام دهد.
 
<input type="url" id="website" name="website">
  1. ورودی Hidden (Hidden Input): برای ذخیره اطلاعات مخفی که به کاربر نمایش داده نمی‌شود.
 
<input type="hidden" id="userid" name="userid" value="12345">
  1. ورودی دکمه (Button): برای ایجاد دکمه‌های مختلف.
 
<input type="button" value="کلیک کن">
  1. ورودی ارسال (Submit Button): برای ارسال فرم.
 
<input type="submit" value="ارسال">
  1. ورودی بازنشانی (Reset Button): برای بازنشانی فرم به مقادیر پیش‌فرض.
<input type="reset" value="بازنشانی">

انواع ورودی‌های دیگر در HTML:

  1. دکمه:

    <button type="button">دکمه</button>

  2. متن چندخطی (با استفاده از textarea):

    <textarea name="message" rows="4" cols="50"></textarea>

  3. لیست کشویی (با استفاده از select و option):

    <select name="country" id="country">
      <option value="iran">ایران</option>
      <option value="usa">آمریکا</option>
      <option value="uk">بریتانیا</option>
    </select>

با استفاده از این انواع ورودی‌ها می‌توانید فرم‌هایی برای جمع‌آوری داده‌های مختلف از کاربران طراحی کنید.