در جلسه قبل با ویژگی ها در HTML آشنا شدید، در دوره متنی HTML قسمت ششم به انواع input می پردازیم.
ویژگی type یکی از مهم‌ترین ویژگی‌های تگ input است که نوع داده ورودی را مشخص می‌کند. با استفاده از این ویژگی، می‌توان انواع مختلفی از فیلدهای ورودی را برای جمع‌آوری داده‌های مختلف از کاربر ایجاد کرد. این ویژگی همچنین تجربه کاربری بهتری فراهم می‌کند و می‌تواند در اعتبارسنجی داده‌ها به مرورگر کمک کند.
ساختار کلی input در HTML
<input type ="نوع_ورودی">
انواع type و توضیح کامل هر نوع
تایپ ورودی text
- فیلدی برای ورود متن‌های عمومی.
- محدودیتی برای نوع کاراکترها ندارد.
<input type="text" placeholder="نام خود را وارد کنید">انواع input | نوع password
- برای ورود رمز عبور.
- کاراکترها به صورت ستاره (یا نقاط) نمایش داده می‌شوند.
<input type="password" placeholder="رمز عبور خود را وارد کنید">
تایپ ورودی number
- برای ورود عدد.
- مرورگر فقط اجازه ورود مقادیر عددی را می‌دهد.
ویژگی‌های اضافی:
- min و max: محدوده عددی مشخص می‌کنند.
- step: فاصله بین مقادیر را تنظیم می‌کند.
<input type="number" min="1" max="10" step="1" placeholder="عدد بین 1 تا 10">دوره متنی HTML قسمت ششم تایپ ورودی date
- برای انتخاب تاریخ.
- مرورگر یک انتخابگر تاریخ (Date Picker) نمایش می‌دهد.
<input type="date">
دوره متنی HTML قسمت ششم تایپ ورودی datetime-local
- برای انتخاب تاریخ و زمان محلی (بدون منطقه زمانی).
<input type="datetime-local">
تایپ ورودی time
- برای انتخاب زمان.
<input type="time">
تایپ ورودی range
- برای انتخاب مقادیر عددی در بازه‌ای مشخص.
- به صورت یک اسلایدر گرافیکی نمایش داده می‌شود.
ویژگی‌های اضافی:
- min و max: محدوده اسلایدر.
- step: فاصله مقادیر.
<input type="range" min="1"
max="100" step="5">
دوره متنی HTML قسمت ششم تایپ ورودی checkbox
- برای انتخاب چند گزینه از میان گزینه‌ها.
- امکان انتخاب چند مورد همزمان وجود دارد.
<input type="checkbox" id="option1" name="option1" value="1">
<label for="option1">گزینه 1</label>
تایپ ورودی radio
- برای انتخاب یک گزینه از میان چند گزینه.
- گزینه‌ها باید مقدار name یکسان داشته باشند.
<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>
دوره متنی HTML قسمت ششم تایپ ورودی file
- برای آپلود فایل از دستگاه کاربر.
- می‌توان نوع فایل‌های مجاز را با ویژگی accept محدود کرد.
مثال:
<input type="file" accept=".jpg, .png, .pdf">
تایپ ورودی hidden
- یک فیلد پنهان که برای ذخیره داده‌هایی استفاده می‌شود که نیازی به نمایش به کاربر ندارند.
مثال:
<input type="hidden" name="userID" value="12345">
تایپ ورودی submit
- برای ارسال فرم.
- کلیک روی این دکمه اطلاعات فرم را به سرور ارسال می‌کند.
<input type="submit" value="ارسال">
تایپ ورودی reset
- برای بازنشانی (پاک کردن) تمام مقادیر فرم به مقادیر پیش‌فرض.
<input type="reset" value="بازنشانی">
تایپ ورودی button
- دکمه‌ای بدون عملکرد پیش‌فرض که می‌تواند با جاوااسکریپت سفارشی‌سازی شود.
تایپ ورودی color
- برای انتخاب رنگ.
- مرورگر یک انتخابگر رنگ نمایش می‌دهد.
<input type="color">
تایپ ورودی tel
- برای ورود شماره تلفن.
- مرورگر به صورت پیش‌فرض قالب خاصی اعمال نمی‌کند اما می‌تواند برای ورودی‌های عددی استفاده شود.
<input type="tel" placeholder="شماره تلفن خود را وارد کنید">تایپ ورودی url
- برای ورود آدرس وب.
- مرورگر به صورت خودکار فرمت URL را بررسی می‌کند.
<input type="url" placeholder="https://example.com">دوره متنی HTML قسمت ششم تایپ ورودی search
- مشابه text، اما برای فیلدهای جستجو طراحی شده است.
- ممکن است مرورگرها استایل متفاوتی برای این نوع اعمال کنند.
<input type="search" placeholder="جستجوکنید">تایپ ورودی image
- برای ایجاد دکمه ارسال که به جای متن، تصویر نمایش می‌دهد.
<input type="image" src="submit-button.png" alt="ارسال">حال که دوره متنی HTML قسمت ششم آشنایی با انواع input را مطالعه کردید، می توانید دیگر قسمت های دوره ی متنی HTML سایت ایوولرن را مطالعه کنید.