مقدمه
سلام پی وی لرنی های عزیز!
به دوره آموزش تگ های HTML خوش آمدید!
HTML یا Hypertext Markup Language یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات اینترنت و وب محسوب می شود.
می توان ادعا کرد که HTML دروازه ورود و پیشرفت برای یادگیری سایر زبان های برنامه نویسی هم چون CSS و جاوا اسکریپت است.
HTML ساختار و اسکلت صفحات وب را تشکیل می دهد و بدون آن نمی توان هیچ صفحه وبی را ساخت.
دوست دارید طراح وب شوید؟
خب باید HTML را بیاموزید!
نگران نشوید! یادگیری HTML کار دشواری نیست و با کمی تلاش خیلی زود در آن استاد می شوید.
در جلسه گذشته آموختیم که چگونه با تگ img کار کنیم؛ تگ img تگ img تصویری را در یک صفحه HTML تعریف می کند.
در این جلسه قصد داریم به آموزش کار با تگ input در HTML بپردازیم.
آموزش کار با تگ input در HTML
به مثال زیر توجه نمایید.
فرم HTML با سه قسمت ورودی؛ دو قسمت متن و یک دکمه ارسال مشخص شده است.
مثال :
| <form action="/action_page.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> </form> |
تعریف و کاربرد
تگ input یک فیلد ورودی را مشخص می کند که کاربر می تواند از طریق آن داده را وارد نماید.
عناصر input در یک تگ form برای اعلام کنترل های ورودی استفاده می شوند که به کاربران امکان وارد کردن داده ها را می دهند.
یک قسمت ورودی بسته به ویژگی نوع می تواند از جهات مختلفی متفاوت باشد.
پشتیبانی مرورگر ها
| عنصر |  |  |  |  |  |
| <input> | بله | بله | بله | بله | بله |
نکات و توصیه ها
نکته
تگ input خالی است و فقط حاوی خصیصه ها است.
توصیه
از تگ <label> برای تعریف تگ برای عناصر <input> استفاده کنید.
در ادامه آموزش کار با تگ input در HTML قرار است به تفاوت تگ input بین HTML 4.01 و HTML5 بپردازیم.
تفاوت بین HTML 4.01 و HTML5
ویژگی “align” در HTML5 پشتیبانی نمی شود.
در HTML5 ، تگ <input> دارای چندین خصیصه جدید است و خصیصه type دارای چندین مقدار جدید است.
تفاوت بین HTML و XHTML
در HTML ، تگ <input> تگ انتهایی ندارد.
در XHTML ، مانند این <input /> تگ <input> باید به درستی بسته شود.
خصیصه ها
| خصیصه ها | مقدار | توضیحات |
|---|
accept | file_extension
audio/*
video/*
image/*
media_type | این خصیصه نوع فایلی که سرور آن را قبول می کند؛ تعیین می نماید. (فقط برای نوع “file”) |
align | left
right
top
middle
bottom | تعیین می کند که image input به جه صورت و از چه جهتی تراز شود. (فقط برای نوع “image”)
این خصیصه در HTML5 پشتیبانی نمی شود. |
alt | text | برای image یک متن جایگزین مشخص می کند.
(فقط برای نوع “image”) |
autocomplete | on
off | این خصیصه تعیین می نماید که آیا یک عنصر <input> باید به صورت خودکار فعال باشد یا خیر. |
autofocus | autofocus | مشخص می کند که هنگام بارگیری صفحه ، یک عنصر <input> باید به طور خودکار متمرکز شود یا خیر. |
checked | checked | مشخص می کند که عنصر <input > در هنگام بار گیری صفحه به صورت پیش فرض انتخاب شده باشد.
(برای نوع “checkbox” یا “radio”) |
dirname | inputname.dir | این خصیصه جهت متن را تعیین می نماید. |
disabled | disabled | مشخص می کند که عنصر <input> باید غیر فعال باشد. |
form | form_id | این خصیصه فرم مربوط به عنصر <input> را مشخص می کند. |
formaction | URL | نشانی اینترنتی فایلی را مشخص می کند که هنگام ارسال فرم ، کنترل ورودی را پردازش می کند ( برای انواع ورودی submit و image استفاده می شود) |
formenctype | application/x-www-form-urlencoded
multipart/form-data
text/plain | نحوه رمزگذاری داده های فرم را هنگام ارسال آن به سرور مشخص می کند ( برای انواع ورودی submit و image استفاده می شود) |
formmethod | get
post | مشخص می کند که ارسال اطلاعات از فرم HTML به سرور به چه صورت باشد. (برای انواع ورودی submit و image استفاده می شود) |
formnovalidate | formnovalidate | این خصیصه نشان می دهد که فیلدهای ورودی برای ارسال به سرور نیاز به اعتبارسنجی ندارد. |
formtarget | _blank
_self
_parent
_top
framename | این خصیصه تعیین می کند که پاسخی که از سرور دریافت شده کجا نمایش داده شود. (برای انواع ورودی submit و image استفاده می شود) |
height | pixels | ارتفاع عنصر <input> را مشخص می کند.
(فقط برای نوع “image”) |
list | datalist_id | این خصیصه به عنصر <datalist> اشاره دارد که شامل گزینه های از پیش تعریف شده برای یک عنصر <input> است. |
max | number
date | این خصیصه حداکثر مقدار را برای یک عنصر <input> مشخص می کند. |
maxlength | number | حداکثر تعداد کاراکترهای مجاز در یک عنصر <input> را تعیین می کند. |
min | number
date | برای عنصر <input> حداقل مقدار را تعیین می کند. |
multiple | multiple | این خصیصه مشخص می کند که کاربر می تواند بیش از یک مقدار را در یک عنصر <input> وارد کند. |
name | text | نام یک عنصر <input> را مشخص می کند. |
pattern | regexp | این خصیصه یک الگو برای بررسی اعتبار یک فیلد ورودی تعیین می کند. |
placeholder | text | یک اشاره کوتاه را مشخص می کند که مقدار مورد انتظار یک عنصر <input> را توصیف می کند. |
readonly | readonly | مشخص می کند که فیلد input فقط خواندنی است. |
required | required | مشخص می کند که قبل از ارسال فرم باید یک قسمت ورودی پر شود |
size | number | تعداد کاراکترهایی را که در عنصر<input> قابل ورود هستند را تعیین می کند. |
src | URL | این خصیصه URL تصویری که به عنوان دکمه ارسال استفاده می شود را تعیین می کند.(فقط برای نوع “image”) |
step | number | تعداد فواصل قانونی برای یک فیلد input را مشخص می کند. |
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> را مشخص می کند.
(فقط برای نوع “image”) |
در ادامه آموزش کار با تگ input در HTML می خواهیم به بررسی پشتیبانی یا عدم پشتیبانی خصیصه های سراسری و خصیصه های رویداد از تگ input بپردازیم.
خصیصه های سراسری Global Attributes
تگ <input> از خصیصه های سراسری در HTML پشتیبانی می کند.
خصیصه رویداد Event Attributes
تگ <input> از خصیصه رویداد در HTML پشتیبانی می کند.
تنظیمات پیش فرض CSS
ندارد.
کلام آخر
در این جلسه با آموزش کار با تگ input در HTML همراه شما بودیم؛ تگ input یک فیلد ورودی را مشخص می کند که کاربر می تواند از طریق آن داده را وارد نماید.
در جلسه آینده شما را با تگ ins آشنا خواهیم کرد.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
