تگ input در HTML

  /  فرانت اند   /  HTML   /  تگ input در HTML

تگ input در HTML برای گرفتن ورودی و یکسری اطلاعات از کاربر کاربرد دارد ، این تگ معمولاً درون عنصر <form> قرار میگیرد و استفاده می شود.

مثال

در این مثال دو ورودی <input> داریم که نام و نام خانوادگی کاربر را گرفته و به آدرس example.php ارسال می کند:

<form action="example.php" method="POST">
<label for="fname">نام:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">نام خانوادگی:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="ارسال">
</form>


تعریف و کاربرد

تگ input در HTML یک ورودی را برای کاربر تعریف کرده و با توجه به نوعی که دارد اطلاعات مربوطه را دریافت میکند.

تگ <input> مهم ترین عنصر <form> می باشد.

تگ <input> در HTML با توجه به ویژگی type به روش های مختلف قابل نمایش هست.

انواع مختلف ورودی ها به شرح زیر است:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text"> (مقدار پیش فرض)
  • <input type="time">
  • <input type="url">
  • <input type="week">

نکته: همیشه از تگ <label> برای تعریف برچسب ها برای موارد زیر استفاده کنید:

  • <input type="text">
  • <input type="checkbox">
  • <input type="radio">
  • <input type="file">
  • <input type="password">

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

عنصر
<input>بلهبلهبلهبلهبله

خواص

خاصیتمقدارتوضیح
acceptfile_extension
audio/*
video/*
image/*
media_type
یک فیلتر برای انتخاب فایل های مجاز توسط کاربر را مشخص میکند

type="file"

alttextیک متن جایگزین برای تصویر را مشخص میکند

type="image"

autocompleteon
off
قابلیت تکمیل خودکار فیلد ورودی را مشخص میکند
autofocusautofocusمشخص میکند که به محض بارگذاری صفحه بروی یک فیلد فوکوس شود
checkedcheckedمشخص می کند که یک عنصر <input> هنگام بارگیری صفحه باید از قبل انتخاب شود (برای نوع checkbox یا radio)
dirnameinputname.dirجهت متن ارسالی را مشخص میکند ( راست به چپ یا بر عکس )
disableddisabledمشخص می کند که یک عنصر <input> باید غیرفعال شود
formform_idمشخص میکند که عنصر <input> به کدام <form> تعلق دارد
formactionURLیک آدرس URL یا مسیر صفحه ، برای دریافت و پردازش اطلاعات فرم را مشخص میکند (برای نوع submit و image)
formenctypeapplication/x-www-form-urlencoded
multipart/form-data
text/plain
نحوه رمزنگاری داده ها را هنگام ارسال اطلاعات به سمت سرور را مشخص میکند (برای نوع submit و image)
formmethodget
post
متد یا نوع HTTP را برای ارسال داده ها مشخص میکند (برای نوع submit و image)
formnovalidateformnovalidateمشخص میکند که آیا یک فیلد ورودی <input> از نظر اعتبار ورودی اعتبار سنجی و بررسی شود یا خیر (مثلاً مقدار ورودی وارد شده واقعاً ایمیل هست یا نه)
formtarget_blank
_self
_parent
_top
framename
نحوه باز شدن صفحه نمایش نتیجه پردازش اطلاعات فرم را مشخص میکند (برای نوع submit و image)
heightpixelsارتفاع تصویر <input> را مشخص میکند (فقط در نوع image)
listdatalist_idبه یک عنصر <datalist> اشاره دارد که شامل گزینه های از پیش تعریف شده برای یک عنصر <input> است
maxnumber
date
حداکثر مقدار ورودی را برای یک عنصر <input> تعیین می کند
maxlengthnumberحداکثر تعداد کاراکتر های مجاز در یک عنصر <input> را مشخص می کند
minnumber
date
حداقل مقدار را برای عنصر <input> تعیین می کند
minlengthnumberحداقل تعداد کاراکتر های مورد نیاز در عنصر <input> را مشخص می کند
multiplemultipleمشخص می کند که کاربر می تواند بیش از یک مقدار در عنصر <input> وارد کند (کاربردی برای نوع file)
nametextنام عنصر <input> را مشخص می کند
patternregexpیکسری قوانین و محدودیت ها برای داده های ورودی مشخص می کند
placeholdertextیک متن راهنما برای معرفی مقادیر دریافتی ورودی <input> تعریف می کند
readonlyreadonlyمشخص می کند که فیلد ورودی فقط خواندنی است
requiredrequiredمشخص می کند که فیلد ورودی باید قبل از ارسال فرم پر شود
sizenumberاندازه عرض یک فیلد ورودی را متناسب با مقدار کاراکتر های دریافتی مشخص می کند
srcURLURL تصویر را برای استفاده به عنوان دکمه ارسال مشخص می کند (فقط برای نوع image)
stepnumber
any
تعداد قدم های پرش را برای اعداد ورودی مشخص می کند (مثلاً 3 تا 3 تا کاربر می تواند مقدار عدد یک ورودی را افزایش دهد)
typebutton
checkbox
color
date
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
نوع ورودی را برای نمایش تگ <input> مشخص می کند
valuetextمقدار یک عنصر <input> را مشخص می کند
widthpixelsعرض تگ <input> را مشخص می کند ( فقط برای نوع image )

خواص عمومی

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

رویداد های عمومی

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

برای دسترسی به آموزش های بیشتر و ویدیو های من ، کلمه کلیدی متین برونسی را داخل گوگل سرچ کنید.

ارسال یک نظر