آموزش تگ input در HTML

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

آموزش تگ input در HTML

Free-Learn

تگ Input در HTML

تگ input یا ورودی ( یا اینپوت ) تگی است که در تگ Form مورد استفاده قرار میگیرد و دارای طرح (نوع) های مختلفی می باشد که با استفاده از آن میتوان داده ها (اطلاعات) را از کاربر دریافت کرد.

تگ Input دارای نوع های مختلفی می باشد، که این نوع ها را میتوان با استفاده از صفت type مشخص نمود.

Free-Learn

مثال از تگ input در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

امتحان کنید

مثال شماره ۲ : استفاده از نوع چک باکس ( که کاربر بتونه چیزی رو تیک بزنه )

امتحان کنید

مثال شماره ۳ : استفاده از نوع ایمیل ( برای دریافت ایمیل )

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ input در HTML پشتیبانی میکنند یا خیر.

نام مرورگر Chrome Firefox Opera Safari IE
پشتیبانی بله بله بله بله بله

Free-Learn

جدول صفات تگ input در HTML

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

(علامتیعنی در HTML5 پشتیبانی نمی شود.)

(علامت یعنی در HTML5 اضافه شده است)

نام صفت مقدار توضیح
accept file_extension
audio/*
video/*
image/*
media_type
مشخص میکند که کاربر میتواند چه فایل هایی آپلود کند. (فقط در نوع file)
align left
right
top
middle
bottom
تراز یا موقعیت قرار گیری تصویر را مشخص میکند. (فقط در نوع image)
alt text یک متن جایگزین را برای تصویر مشخص میکند. (فقط در نوع image)
autocomplete on
off
قابلیت تکمیل خودکار فیلد ورودی را مشخص میکند.
autofocus autofocus مشخص میکند که به محض بارگذاری صفحه بروی یک فیلد فوکوس شود.
checked checked باعث میشه یک فیلد تیک زده شود. (فقط در نوع checkbox یا radio)
dirname inputname.dir جهت (DIR) متن ارسالی را مشخص میکند.
disabled disabled باعث میشه یک فیلد ورودی غیرفعال شود.
form form_id مشخص میکند که یک فیلد ورودی متعلق به ۱ یا چندین فرم می باشد.
formaction URL یک آدرس/مسیر صفحه برای دریافت و پردازش اطلاعات فرم. (برای نوع submit و image)
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
نحوه کدگذاری داده ها را در هنگام ارسال به سرور مشخص میکند. (برای نوع submit و image)
formmethod get
post
متد یا نوع HTTP را برای ارسال دادها مشخص میکند. (برای نوع submit و image)
formnovalidate formnovalidate مشخص میکند که آیا یک فیلد از نظر معتبر بودن اعتبارسنجی شود یا خیر.
formtarget _blank
_self
_parent
_top
framename
نحوه نمایش نتیجه پردازش اطلاعات فرم را مشخص میکند. (برای نوع submit و image)
height pixels برای مشخص کردن اندازه ارتفاع تصویر. (فقط در نوع image)
list datalist_id برای اشاره به تگ <datalist> برای تعریف یک لیست از پیش تعریف شده.
max number برای مشخص کردن بیشترین (ماکزیمم) مقدار وارد شده در یک فیلد ورودی.
maxlength number برای مشخص کردن تعداد کاراکترهایی که میتواند وارد یک فیلد ورودی کرد.
min number برای مشخص کردن کمترین (مینیموم) مقدار وارد شده در یک فیلد ورودی.
multiple multiple برای اینکه بتوان چندین مقدار را بصورت همزمان در یک فیلد ورودی وارد کرد.
name text برای مشخص کردن یک نام برای یک فیلد ورودی.
pattern regexp برای ایجاد یکسری قوانین (محدودیت هایی) برای اطلاعات وارد شده در فیلدهای ورودی.
placeholder text برای ایجاد یک متن (توضیح) در فیلدهای ورودی، که بتونه به کاربر بگه مثلا چه چیزی باید در فلان فیلد وارد کرد.
readonly readonly برای اینکه یک فیلد را فقط خوانی (read-only) کرد.
required required برای اینکه تکمیل کردن یک فیلد را ضروری کرد. (یعنی کاربر باید حتما یه چیزی وارد کنه در غیراینصورت داده های فرم ارسال نخواهد شد)
size number برای مشخص کردن اندازه عرض یک فیلد ورودی به نسبت تعداد کاراکتر.
src URL یک مسیر/آدرس برای تصویر. (فقط در نوع image)
step number فواصل (تعداد قدم های پرش) را بصورت عددی مشخص میکند.
type button
checkbox
color
date
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
نوع یک فیلد ورودی یا بطور کلی نوع Input را مشخص میکند.
value text برای ایجاد یک مقدار (بصورت پیش فرض) درون فیلدهای ورودی.
width pixels برای مشخص کردن اندازه عرض تصویر. (فقط در نوع image)

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

تگ input از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

Free-Learn

نکات و توضیحات

فیلدهای ورودی یا Input ها دارای نوع های مختلفی می باشند ، لذا برای مشخص کردن نوع یک Input باید از صفت type و مقادیر موجود در جدول بالا یا در جدول پایین (فرقی نمیکند) استفاده نمایید.

color checkbox button
email datetime-local date
image hidden file
password number month
reset range radio
tel submit search
url time text
week

چندین مثال از نحوه استفاده از نوع های موجود در جدول بالا.


Free-Learn