اُپن تگ | منابع و محتوای آموزشی برای طراحان وب
بدون نتیجه
نمایش همه نتایج
  • ثبت نام / ورود
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
اپن تگ
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
بدون نتیجه
نمایش همه نتایج
بدون نتیجه
نمایش همه نتایج
اپن تگ

خانه › HTML5 › تگ input در HTML

تگ input در HTML

HTML <input> Tag

عناصر مرتبط:
<form>  <textarea>  <select>  <button>

تگ <input> در HTML فیلدی است که توسط آن کاربر اطلاعات درخواست شده را وارد می کند.

مثال:

<form>
    <label for="fname">نام:</label>
    <input type="text" id="fname" name="fname" /><br />
    <label for="lname">نام خانوادگی:</label>
    <input type="text" id="lname" name="lname" /><br />
    <label for="number">تلفن همراه:</label>
    <input type="number" id="number" name="number" /><br />
    <label for="email">ایمیل:</label>
    <input type="email" id="email" name="email" /><br />
    <input type="submit" value="ارسال" />
</form>

نتیجه:

مشاهده و ویرایش کد در حالت تمام صفحه

انواع <input>:

نحوه عملکرد <input> بستگی مسقیم به نوع (Type) آن دارد که توسط صفت type مشخص می شود. در جدول زیر تعدادی از پرکاربردترین انواع صفت type آمده است:

نوع (Type)توضیحنحوه نوشتار
buttonدکمه ای را تعریف می کند که معمولا توسط جاوااسکریپت بکار گرفته می شود و عملی را انجام می دهد.<input type=”button”>
checkboxیک چک باکس را تعریف می کند که توسط آن یک مقدار انتخاب یا از حالت انتخاب خارج می شود.<input type=”checkbox”>
dateیک تقویم را باز می کند تا کاربر تاریخ مورد نظر را انتخاب کند.<input type=”date”>
emailیک فیلد را جهت دریافت ایمیل مشخص می کند. این فیلد شبیه text بوده اما به وارد کردن درست ساختار ایمیل حساس است.<input type=”email”>
fileیک فیلد انتخاب فایل را تعریف می کند که توسط آن کاربر می تواند فایل درخواست شده انتخاب و ارسال نماید.<input type=”file”>
number یک فیلد برای ورود عدد مشخص می کند. در این فیلد دو فلش قرار دارد که کاربر توسط آن می تواند مقدار را کم یا زیاد کند.<input type=”number”>
password فیلد مورد نظز را برای وارد کردن پسورد یا رمز توسط کاربر مشخص می کند. در این فیلد کاراکترها مشخص نیستند و به جای هر کاراکتر یک دایره مشکی نمایش می شود.<input type=”password”>
range یک کنترلر را مشخص می کند که توسط آن کاربر توسط یک ابزار گرافیکی مقدار مورد نظر خود را در محدوده مشخص شده انتخاب می کند.<input type=”range”>
radioدکمه رادیویی را مشخص می کند که توسط آن کاربر قادر به انتخاب تنها یک مقدار از میان چند مقدار خواهد بود.<input type=”radio”>
submitیک دکمه تایید تعریف می کند که توسط آن تمام اطاعات وارد شده توسط کاربر در تمام فیلدها به مقصد مشخص شده ارسال می شود.<input type=”submit”>
telیک فیلد را برای دریافت شماره تلفن مشخص می کند.<input type=”tel”>
textاین مقدار پیشفرض است. یک فیلد برای ورود کاراکتر توسط کاربر را مشخص می کند.<input type=”text”>
urlیک فیلد را جهت دریافت آدرس URL مشخص می کند. این فیلد شبیه text بوده اما به وارد کردن درست ساختار آدرس URL حساس است.<input type=”url”>

صفتها (Attributes):

در جدول زیر تعدادی از صفات پرکاربردی که توسط آنها و در حالات مختلف می توان به وسعت کار با <input> افزود را میبینیم:

صفتمقدارتوضیح
acceptaudio/*
video/*
image/*
مشخص می کند که کاربر چه نوع فایلی را میتواند انتخاب کند.
autocompeleteon
off
مشخص می کند که آیا صفت autocomplete در فیلد مورد نظر عمل می کند یا خیر.
formform_id مشخص می کند که عنصر فرم به کجت متعلق است.
heightpixelsارتفاع فیلد را بر حسب پیکسل مشخص می کند.
maxnumber
date
بیشترین مقدار را برای فیلد input مشخص می کند.
maxlengthnumberبیشترین تعداد کاراکتر را در فیلد مورد نظر مشخص می کند.
minnumber
date
کمترین مقدار را برای فیلد مورد نظر مشخص می کند.
minlengthnumberکمترین تعداد کاراکتر را برای فیلد مورد نظر مشخص می کند.
nametextنام فیلد input مورد نظر را مشخص می کند.
placeholdertextیک نمونه مختصر از نحوه ورود اطلاعات را فیل مورد نظر را نشان می دهد.
srcURLآدرس URL تصویری را که برای دکمه submit یا تایید بکار خواهد رفت را مشخص می کند.
valuetextمقدار فیلد مورد نظر را مشخص می کند.
typebutton
checkbox
date
email
file
number
password
range
radio
submit
tel
text
url
نوع فیلد input مورد نظر را مشخص می کنند. (توضیح این مقادیر در جدول بالا آمده است.)

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

پست قبلی

تگ form در HTML

پست بعدی

تگ textarea در HTML

پست بعدی
html-textarea-tag

تگ textarea در HTML

دیدگاهتان را بنویسید لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

بنر مرجع html
بنر مرجع css

اُپن تگ

اپن تگ در تلاش است با گردآوری منابع و ارائه محتوای آموزشی در حوزه طراحی وب، راه را برای دسترسی طراحان وب و علاقه‌مندان به آخرین روش‌ها و تکنولوژی‌های این بخش از صنعت توسعه وب هموارتر سازد.

با خبر باشید!

برای اطلاع از مطالب ويژه و دوره های آموزشی جدید در خبرنامه اُپن‌تگ عضو شوید.

  • درباره
  • ارتباط با ما

تمامی حقوق برای اپن تگ محفوظ است. استفاده از مطالب تنها با ذکر منبع مجاز است.

  • ورود
  • ثبت نام
  • سبد خرید
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS

خوش آمدید!

به حساب خود وارد شوید

فراموشی رمز عبور ؟ ثبت نام

ساخت حساب کاربری!

فرم زیر را برای ثبت نام تکمیل نمایید

همه فیلد ها ضروری اند وارد شدن

رمز عبور خود را بازیابی کنید

لطفاً ایمیل یا نام کاربری خود را جهت بازیابی رمز عبور وارد نمایید

وارد شدن