بازگشت به وبلاگ

آموزش تگ input در :HTML انواع ورودی‌ها و کاربرد هرکدام

input ها قلب هر فرمی هستن که بدون انواع درستش کاربرات اطلاعات غلط میدن😍. تو این آموزش از صفر input text email password رو یاد میگیری، number tel url date برای داده‌های خاص رو میشناسی و checkbox radio file برای انتخاب‌های پیشرفته میسازی. اگر میخوای آموزش کامل انواع input در HTML برای مبتدیان رو با مثال‌های عملی یاد بگیری، این پست برات عالیه🚀.

4 دقیقه مطالعه
44
آموزش تگ input در :HTML انواع ورودی‌ها و کاربرد هرکدام

input-checkbox-radio-file-inputs

انواع text، email input و password در فرم HTML

** text بدونemail؟ فرم‌هاتspam میشه😱📧** input type="text" برای نام و متن ساده،type="email" خودکار @ و format رو چک میکنه،type="password" کاراکترها رو ستاره نشون میده، این ۳ تا پایه آموزش انواع input text email password در HTML برای فرم‌های ثبت نام هستن. هر کدوم name منحصربه‌فرد میخوان تا سرور داده‌ها رو تفکیک کنه🚀.

HTML
<form>
  <input type="text" name="fullname" placeholder="نام کامل">
  <br>
  <input type="email" name="email" placeholder="example@email.com">
  <br>
  <input type="password" name="password" placeholder="رمز عبور">
</form>

text همه‌کاره‌ست،email validation خودکار داره و keyboard موبایل رو تغییر میده،password امنیت login رو تضمین میکنه، اگر میخوای آموزش کامل input text email password در فرم HTML رو مسلط شی،placeholder و name رو فراموش نکن😎.

type-of-inputs

input number، tel، url و date برای داده‌های خاص

شماره غلط وارد کردن؟ input number جلوتو میگیره😱🔢 input type="number" فقط عدد قبول میکنه و +/- دکمه داره، type="tel" کیبورد موبایل رو عددی میکنه، type="url" http:// چک میکنه، type="date" تقویم باز میکنه،این ۴ تا آموزش input number tel url date در HTML برای فرم‌های دقیق عالیه🚀.

HTML
<form>
  <input type="number" name="age" min="18" max="100" placeholder="سن">
  <br>
  <input type="tel" name="phone" placeholder="09123456789">
  <br>
  <input type="url" name="website" placeholder="https://example.com">
  <br>
  <input type="date" name="birthday">
</form>

number از حروف جلوگیری میکنه،tel pattern="[0-9]{11}" اضافه کن، url لینک معتبر میخواد، date موبایل date picker نشون میده،اگر میخوای آموزش کامل input های خاص HTML برای داده‌های دقیق رو مسلط شی،min max pattern رو فراموش نکن😎.

3.webp

input checkbox،radio و file برای انتخاب‌های پیشرفته

input type="checkbox" چندتا انتخاب مثل علایق، type="radio" فقط یکی مثل جنسیت،type="file" فایل آپلود،این ۳ تا آموزش input checkbox radio file در HTML برای فرم‌های پیشرفته عالیه🚀.checkbox ها name یکسان دارن،radio ها name یکسان ولی value متفاوت، file accept="image/*" فقط عکس قبول میکنه.

HTML
<form>
  <!-- checkbox چند انتخاب -->
  <input type="checkbox" name="hobbies[]" value="football">فوتبال
  <input type="checkbox" name="hobbies[]" value="guitar">گیتار
  <br>
  
  <!-- radio تک انتخاب -->
  <input type="radio" name="gender" value="male">مرد
  <input type="radio" name="gender" value="female">زن
  <br>
  
  <!-- file آپلود -->
  <input type="file" name="avatar" accept="image/*">
</form>

checkbox برای array میفرسته،radio فقط یکی انتخاب میشه،file multiple="multiple" چندتا فایل، اگر میخوای آموزش کامل input checkbox radio file در فرم HTML رو مسلط شی،name ها رو درست تنظیم کن😎.

حالا که همه input type ها از text تا file رو یاد گرفتی، آماده‌ای فرم‌های حرفه‌ای ثبت نام، سفارش و نظرسنجی بسازی✨. یادت باشه input مناسب name درست validation فرم کامل و کاربرپسند. از امروز همه فرم‌هات رو با input های صحیح بساز و ببین چطور lead و conversion سایتت منفجر میشه💥🌟.

این مقاله به درد یکی از رفیقات می‌خوره؟

با یه کلیک براش بفرست تا اونم تو این مسیر همراهت بشه

مقالات مرتبط با این موضوع

برای ادامه مسیرت اینا رو از دست نده
تفاوت section،article  و aside در HTML؛ کِی از کدوم استفاده کنیم؟

تفاوت section،article و aside در HTML؛ کِی از کدوم استفاده کنیم؟

section article aside رو قاطی می‌کنی و div div div می‌نویسی؟😵 تفاوت section،article و aside درHTML؛ کی از کدوم استفاده کنیم؟ راز کد تمیز و SEO بالا رو فاش می‌کنه! از تفاوت اصلی‌شون شروع می‌کنیم،مثال‌های واقعی وبلاگ و فروشگاه می‌بینیم و کشف می‌کنیم چرا semantic tags برای SEO و accessibility جادو می‌کنن.🚀

5 دقیقه مطالعه
آموزش کامل تگ‌های معنایی HTML؛ از   header تا  article

آموزش کامل تگ‌های معنایی HTML؛ از header تا article

div div div همه جا؟ آموزش کامل تگ‌های معناییHTML ؛ از header تا article صفحه‌ت رو از آشوب نجات می‌ده! یاد می‌گیری header nav footer چطور ساختار اصلی بسازن،article section aside محتوا رو منظم کنن و main figure تگ‌های مخفی قدرتمند HTML باشن تا semantic HTML پیشرفته برای SEO و accessibility داشته باشی.🚀

4 دقیقه مطالعه
آموزش تگ‌های label، textarea و button در HTML

آموزش تگ‌های label، textarea و button در HTML

فرم‌هایی بساز که همه عاشقشون بشن!😍 تا حالا فرم وبسایتت رو کاربرا نصفه ول کردن؟ یا screen reader ها نمی‌تونستن بخوننشون؟🤔 آموزش تگ‌های label textarea و button در HTML دقیقاً همون چیزیه که نیاز داری!

7 دقیقه مطالعه
آموزش تگ input در :HTML انواع ورودی‌ها و کاربرد هرکدام | EagerDevelopers