سفارش تبلیغ
صبا ویژن

آموزش تگ input در Html

آموزش تگ input در Html

تگ input یکی از مهمترین تگ های موجود در تگ form می باشد. با استفاده از این تگ می توانیم کنترل های لازم بر روی اطلاعات کاربران را انجام دهیم. (طراحی سایت , سئو سایت , طراحی سایت )

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

باتوجه به ویژگی و خصویت type می توانیم از فیلد ورودی input برای انواع ورودی های مختلف استفاده نماییم.

تگ input یک تگ بسته است و به صورت یک عنصر تنها به کار می رود.

اگر بخواهید در کنار input خود یک برچسب قرار دهید می توانید از تگ lable استفاده نمایید.

نمای کلی برای استفاده از تگ input به صورت زیر می باشد:

به طور مثال تگ input  به کار رفته در عنصر form :

 

خصوصیتمقدارتوضیحات
accept file_extension
audio/*
video/*
image/*
media_type
این خصوصیت مشخص کننده نوع فایلی است که شما ارسال می کنید.

 

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

aling left
center
right
justify
این خصوصیت در حال حاضر در Html5 پشتیبانی نمی شود.
با استفاده از این خصوصیت می توانیم image input را در جهت های مختلف ترازبندی کنیم.
این خصوصیت تنها برای image به کار میرود.
alt text با استفاده از این خصوصیت می توانید برای عکس خود یک متن جایگزین استفاده کنید.
این خصوصیت تنها برای image به کار میرود.
autocomplete on
off
با استفاده از این خصوصصیت می توانید مشخص کنید که فیلد های فرم ها به صورت اتوماتیک پر شوند یا خیر.
پشتیبانی از Html5
autofocus autofocus بااستفاده از این خصوصیت مکان نما در فیلد پیش فرض پس از لود صفحه قرار می گیرد.
پشتیبانی از Html5
checked checked بااسفاده از این ویژگی تگ input به طور خود کار پس از لود شدن صفحه در حالت انتخاب قرار می گیرد.
این خصوصیت تنها برای checkbox و radio به کار میرود.
disabled disabled با استفاده از این خصوصیت می توانید تگ input خود را غیر فعال کنید.
form form_id با استفاده از این خصوصیت می توانید فرم هایی که به فیلد مورد نظر تعلق دارند را مشخص نمایید.
پشتیبانی از Html5
formaction URL این خصوصیت آدرس قسمتی که عملیات کنترلی برروی ورودی ها انجام می شود را ایجاد می کند.
این خصوصیت تنها برای ورودی های  image و submit به کار میرود.
پشتیبانی از Html5
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
توسط این خصوصیت چگونگی رمزگذاری برروی داده های فرم ها مشخص می شود.
این خصوصیت تنها برای ورودی های  image و submit به کار میرود.
پشتیبانی از Html5
formmethod get
post
این خصوصیت مشخص میکند که داده ها به کدام شکل به سرور انتقال داده شوند.
این خصوصیت تنها برای ورودی های  image و submit به کار میرود.
پشتیبانی از Html5
formnovalidate formnovalidate توسط این خصوصیت دیگر داده های ورودی به سرور نیازی به اعتبار سنجی ندارند.
پشتیبانی از Html5
formtarget _blank
_self
_parent
_top
framename
توسط این خصوصیت می توانید مشخص کنید که پاسخ دریافت شده از سرور به چه نحوی به نمایش گذاشته شود.
پشتیبانی از Html5
height pixels توسط این خصوصیت می توانید ارتفاع تگ input را مشخص نمایید.
این خصوصیت تنها برای image به کار میرود.
پشتیبانی از Html5
list datalist_id توسط این خصوصیت می توانید یک datalist را به فیلد متنی خود اضافه کنید.
پشتیبانی از Html5
max number
date
توسط این خصوصیت می توانید مقدار ماکسیمم تگ input را مشخص نمایید.
پشتیبانی از Html5
maxlength number توسط این خصوصیت می توانید تعداد ماکسیسم کاراکتری که می خواهید در فیلد خود قرار دهید را مشخص نمایید.
پشتیبانی از Html5
min number
date
توسط این خصوصیت می توانید تعداد مینیموم کاراکتری که می خواهید در فیلد خود قرار دهید را مشخص نمایید.
پشتیبانی از Html5
multiple multiple توسط این خصوصیت می توانید بیشتر از یک مقدار در تگ input قرار دهید.
پشتیبانی از Html5
name text توسط این خصوصیت یک نام برای تگ input قرار می دهیم.
pattern regexp بااستفاده از این خصوصیت یک الگو برای اعتبار سنجی فیلد ورودی می توانید مشخص کنید.
پشتیبانی از Html5
placeholder text توسط این خصوصیت می توانید نمونه ای از ورودی مورد نظر را قرار دهید تا به صورت کمرنگ در فیلد قرار بگیرد و با قرار گیری موس روی فیلد مورد نظر از بین می رود.
پشتیبانی از Html5
readonly readonly نشان دهنده این است که فیلد مورد نظر فقط خواندنی است.
required required این خصوصیت نشان می دهد که پر کردن فیلد توسط کاربر الزامی است.
پشتیبانی از Html5
size number توسط این تعداد کاراکتری که میتواند در تگ input قرار گیرد مشخص می شود.
src URL توسط این خصوصیت می توانید آدرس تصویری که میخواهید به عنوان دکمه جستجو استفاده کنید را قرار می دهید.
این خصوصیت تنها برای image به کار میرود.
step number با استفاده از این خصوصیت می توانید مشخص کنید که تعداد فاصله ها در تگ input چگونه باشد.
پشتیبانی از Html5
type button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
توسط این خصوصیت می توانید مشخص کنید که نوع و نحوه نمایش تگ input به چه صورت باشد.
می تواند به صورت دکمه یا فایل یا پسورد و یا ایمیل وغیره وجود داشته باشد.
value text با استفاده از این خصوصیت می توانید برای تگ input یک مقدار را مشخص نمایید.
width pixels توسط این خصوصیت می توانید عرض تگ input را مشخص نمایید.
پشتیبانی از Html5

 

تگ input تمام ویژگی های عمومی و رویداد های عمومی را در Html پشتیبانی میکند.

پشتیبانی مرور گرها از تگ input در Html:

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