تگ input در HTML

به نام خداوند علم و دانش. سلام به دوستان گرامی و مخاطبین وب سایت آموزشی کدیونی، وقت همگی بخیر، در این صفحه با مطلب تگ input در HTML از سری آموزش های HTML در خدمت شما عزیزان هستیم.

تبادل اطلاعات یکی از کارهایی است که در فضای مجازی مورد استقبال کاربران قرار گرفته است. از ارسال نظرات گرفته تا آپلود فایل و ... از جمله کارهایی است که کاربران اینترنت با آن سرکار دارند. در HTML این امکان فراهم شده تا با تگ input داده ها را دریافت کرده و به سرور ارسال کنید.

تگ input چیست؟

تگ input که ترجمه آن به زبان فارسی ورودی می شود برای دریافت داده های فرم به کار می رود. به طور خلاصه اطلاعاتی که کاربران در فرم وارد می کنند را به عنوان ورودی دریافت می کند.

ساختار تگ input به شکل زیر است:

<input type="text" name="user">

این تگ نیاز به بستن ندارد.

صفات تگ input

در این بخش با صفات تگ input آشنا خواهید شد.

صفت accept

این صفت زمانی کاربرد دارد که input به صورت file در نظر گرفته شود و نوع فایل های قابل آپلود را مشخص می کند.

<input type="file" accept="audio/*|video/*|image/*|file_extension|media_type">

audio/*

این مقدار یعنی تمام فرمت های صوتی قابل پذیرش است.

video/*

این مقدار یعنی تمام فرمت های ویدیویی قابل پذیرش است.

image/*

این مقدار یعنی تمام فرمت های عکس قابل پذیرش است.

file_extension

انتخاب فایل بر اساس فرمت هایی از قبل تعیین شده است. مثال: (.jpg, .png, .webp)

media_type

انتخاب فایل بر اساس نوع رسانه است. مثال: image/png

صفت alt

این صفت زمانی کاربرد دارد که input به صورت image در نظر گرفته شود و توضیحی برای عکس مشخص می کند.

<input type="image" src="image.jpg" alt="توضیح">

صفت autocomplete

در صورت امکان، متن در حال تایپ را به طور خودکار تکمیل می کند.

<input type="text" autocomplete="on|off">

صفت autofocus

بعد از بارگذاری صفحه بر روی input انتخابی فوکوس می کند.

<input autofocus>

صفت checked

این صفت زمانی کاربرد دارد که نوع input به صورت checkbox یا radio در نظر گرفته شود و تیک را به صورت پیش فرض فعال می کند.

<input type="checkbox" checked>

صفت dirname

جهت متن را مشخص می کند.

<input type="text" name="user" dirname="user.dir">

صفت disabled

برای غیرفعال کردن input به کار می رود.

<input disabled>

صفت form

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

مقدار این صفت باید با مقدار صفت id فرم مورد نظر برابر باشد.

<input type="text" name="user" form="id">

صفت formaction

این صفت زمانی کاربرد دارد که input از نوع submit یا image در نظر گرفته شود و آدرس فرم ارسالی را مشخص می کند.

<input type="submit" formaction="URL">

صفت formenctype

این صفت زمانی کاربرد دارد که input از نوع submit یا image در نظر گرفته شود و داده ها را قبل از ارسال به سرور کدگذاری می کند.

<input type="submit" formenctype="application/x-www-form-urlencoded|multipart/form-data|text/plain">

application/x-www-form-urlencoded

تمام داده ها را قبل ارسال رمزگذاری می کند. (پیش فرض)

multipart/form-data

برای آپلود فایل کاربرد دارد.

text/plain

داده ها را بدون رمزگذاری ارسال می کند.

صفت formmethod

این صفت زمانی کاربرد دارد که input از نوع submit یا image در نظر گرفته شود و نوع متد فرم را مشخص می کند.

<input type="submit" formmethod="get|post">

صفت formnovalidate

با استفاده از این صفت می توان اعتبار سنجی داده ها را غیر فعال کرد.

<input formnovalidate="formnovalidate">

صفت formtarget

این صفت زمانی کاربرد دارد که input از نوع submit یا image در نظر گرفته شود و نحوه باز شدن فرم ارسالی را مشخص می کند.

<input type="submit" formtarget="_blank|_self|_parent|_top|frame">

مقدار پیش فرض این صفت به صورت _self تعیین شده یعنی در همان صفحه فرم ارسال می شود. در صورتی که قصد دارید فرم در پنجره یا تب جدید باز شود باید از مقدار _blank استفاده کنید.

صفت height

این صفت زمانی کاربرد دارد که input به صورت image در نظر گرفته شود و ارتفاع عکس را مشخص می کند.

<input type="image" src="image.jpg" height="100">

صفت list

برای ارتباط به تگ datalist به کار می رود.

<input list="datalist">

صفت max

برای تعیین بیشترین مقداری که در input می توان قرار داد به کار می رود.

<input max="number|date">

صفت maxlength

برای تعیین تعداد کاراکترهای مجاز قابل تایپ به کار می رود.

<input maxlength="number">

صفت min

برای تعیین کمترین مقداری که در input می توان قرار داد به کار می رود.

<input min="number|date">

صفت minlength

حداقل کاراکترهای مجاز قابل تایپ را مشخص می کند.

<input minlength="number">

صفت multiple

برای انتخاب چندین گزینه به کار می رود.

<input multiple>

صفت name

برای input نام انتخاب می کند.

<input name="text">

صفت pattern

با استفاده از صفت pattern می توان قانون و فیلتری از کاراکترهای مجاز قابل پذیرش را مشخص کرد.

<input pattern="regexp">

به عنوان مثال می خواهیم فیلتری انجام دهیم که فقط اعداد 0 تا 9 و طول 10 کاراکتر را قبول کند.

<input pattern="[0-9]{10}">

صفت placeholder

برای نوشتن توضیح کوتاه در مورد input فعلی به کار می رود. در صورتی که input حاوی داده باشد متن placeholder نمایش داده نمی شود.

<input placeholder="text">

صفت readonly

در صورت استفاده از این صفت input به صورت خواندنی می شود.

<input readonly>

صفت required

در صورت استفاده از این صفت input مورد نظر اجباری می شود و کاربر حتما باید داده ای را وارد کند.

<input required>

صفت size

این صفت عرض input را نسبت به تعداد کاراکتر آن مشخص می کند.

<input size="number">

صفت src

این صفت زمانی کاربرد دارد که input به صورت image تعریف شده باشد و آدرس عکس را مشخص می کند.

<input type="image" src="image.jpg">

صفت step

تعداد پرش میان اعداد را مشخص می کند.

<input step="number">

صفت type

این صفت کاربرد فراوانی دارد و نوع input را مشخص می کند. به عنوان مثال می توانید مشخص کنید فیلد از نوع متنی باشد یا دکمه ای برای انتخاب فایل جهت آپلود و ... باشد.

<input type="button|checkbox|color|date|datetime-local|email|file|hidden|image|month|number|password|radio|range|reset|search|submit|tel|text|time|url|week">

button

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

checkbox

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

color

برای انتخابگر رنگ استفاده می شود.

date

برای انتخاب تاریخ به کار می رود.

datetime-local

برای انتخاب تاریخ و زمان به کار می رود.

email

برای آدرس ایمیل به کار می رود.

file

برای انتخاب فایل به کار می رود

hidden

input را مخفی می کند.

image

برای دکمه، عکس انتخاب می کند.

month

ماه و سال را انتخاب می کند.

number

برای مقادیر عددی استفاده می شود.

password

برای فیلد های مخصوص رمز عبور به کار می رود.

radio

برای ایجاد radio button به کار می رود.

range

برای انتخاب محدوده ای از اعداد به حالت اسلایدر به کار می رود.

reset

برای ریست داده ها به مقدار اولیه خود به کار می رود.

search

فیلد متنی برای جستجو می باشد.

submit

دکمه ای از نوع submit تعریف می کند.

tel

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

text

فیلد از نوع متنی تعریف می کند.

time

برای انتخاب زمان به کار می رود.

url

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

week

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

صفت value

مقدار input را مشخص می کند. به عنوان مثال اگر input از نوع text باشد مقدار متنی این صفت توسط فرم به سرور ارسال خواهد شد.

<input type="text" value="text">

صفت width

این صفت زمانی کاربرد دارد که input به صورت image در نظر گرفته شود و عرض عکس را مشخص می کند.

<input type="image" src="image.jpg" width="100">

مثال تگ input

کد:

<form>
  <input type="text">
  <input type="color">
  <input type="range">
  <input type="checkbox">
  <input type="radio">
</form>

اجرا

سازگاری با مرورگرها

تگ input با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS