آموزش HTML – تگ input

نویسنده : مرتضی گنج | تاریخ انتشار : 2020/01/11 | بخش : آموزش HTML

تعریف و کاربرد تگ input در HTML

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

  • تگ <input> مشخص کننده یک فیلد ورودی، که کاربر می تواند در آن اطلاعات را وارد کند.
  • عنصر <input> به منظور اعلام کنترل ورودی داخل عنصر <form> قرار می گیرد، که کاربر می تواند اطلاعات را وارد کند.
  • یک فیلد input را می توان در زمینه های گوناگون، بسته به نوع خصوصیت type استفاده کرد.

نکته ها و ترفندها

عنصر <input> خالی بوده و تنها شامل ویژگی ها می باشد.

استفاده از عنصر <label> برای تعریف یک برچسب برای عنصر <input> است.

تفاوت بین HTML 4.01 و HTML5

ویژگی “align” در HTML5 پشتیبانی نمی شود.

در HTML5، تگ <input> چندین ویژگی جدید دارد و برای ویژگی type چندین مقدار جدید تعریف شده است.

 

تفاوت بین HTML و XHTML

در HTML، تگ <input> تگ پایانی ندارد.

در XHTML، تگ <input> باید با یک تگ پایانی بسته شود.

مانند:

<input />

 

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

<form action="#">
  نام: <input type="text" name="fname"><br>
  نام خانوادگی: <input type="text" name="lname"><br>
  <hr>
  <input type="checkbox" name="t" value="Bike"> HTML<br>
  <input type="checkbox" name="t" value="Car"> PHP<br>
  <input type="checkbox" name="t" value="Boat"> JavaScript <br>
  <input type="submit" value="ارسال">
</form>

تمرین کنید !

 

پشتیبانی مرورگرها از تگ <input>

Element
<input> بله بله بله بله بله

 

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

نام صفت  مقدار توضیح
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 برای اینکه تکمیل کردن یک فیلد را ضروری کرد. (یعنی کاربر باید حتما یه چیزی وارد کنه در غیر اینصورت داده های فرم ارسال نخواهد شد)
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)

 

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

فیلدهای ورودی یا 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

 

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

<input type="button"> 
<input type="color">
<input type="date">
<input type="email">
<input type="file">
<input type="hidden"> 
<input type="image"> 
<input type="password"> 
<input type="radio">
<input type="submit"> 
<input type="text">
<input type="url">