آموزش تگ input در HTML

آموزش تگ input در HTML
آموزشگاه آنلاین اکسیژن 2

با سلام

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

در این آموزش قصد دارم تا شما را با تگ input و نحوه استفاده از آن در کدنویسی های سایت آشنا کنم.

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

نام صفتمقدارتوضیحات
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 برای اینکه بتوان چندین مقدار را بصورت همزمان در یک فیلد ورودی وارد کرد. 
nametext برای مشخص کردن یک نام برای یک فیلد ورودی.
patternregexp برای ایجاد یکسری قوانین (محدودیت هایی) برای اطلاعات وارد شده در فیلدهای ورودی. 
placeholdertext برای ایجاد یک متن (توضیح) در فیلدهای ورودی، که بتونه به کاربر بگه مثلا چه چیزی باید در فلان فیلد وارد کرد.
readonly readonly برای اینکه یک فیلد را فقط خوانی (read-only) کرد.
required required برای اینکه تکمیل کردن یک فیلد را ضروری کرد. (یعنی کاربر باید حتما یه چیزی وارد کنه در غیراینصورت داده های فرم ارسال نخواهد شد) 
sizenumber برای مشخص کردن اندازه عرض یک فیلد ورودی به نسبت تعداد کاراکتر.
srcURL یک مسیر/آدرس برای تصویر. (فقط در نوع image)
stepnumber
فواصل (تعداد قدم های پرش) را بصورت عددی مشخص میکند. 
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 را مشخص میکند.
valuetext برای ایجاد یک مقدار (بصورت پیش فرض) درون فیلدهای ورودی.
widthpixels برای مشخص کردن اندازه عرض تصویر. (فقط در نوع image)

شما با استفاده از صفت type میتوانید به اشکال مختلف از آیتم هایی که در فرم ها استفاده می شود می توانید استفاده نمایید.مثل checkbox که به شما امکان وجود چند انتخاب را به کاربر را خواهد دارد یا به طور مثال range که با استفاده از آن می توانید رنجی خاص را برای خود تعیین کنید.

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

موفق و پیروز باشید.

دیدگاهتان را بنویسید