تگ input در HTML

HTML <input> Tag

تگ <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> افزود را میبینیم:

صفت	مقدار	توضیح
accept	audio/* video/* image/*	مشخص می کند که کاربر چه نوع فایلی را میتواند انتخاب کند.
autocompelete	on off	مشخص می کند که آیا صفت autocomplete در فیلد مورد نظر عمل می کند یا خیر.
form	form_id	مشخص می کند که عنصر فرم به کجت متعلق است.
height	pixels	ارتفاع فیلد را بر حسب پیکسل مشخص می کند.
max	number date	بیشترین مقدار را برای فیلد input مشخص می کند.
maxlength	number	بیشترین تعداد کاراکتر را در فیلد مورد نظر مشخص می کند.
min	number date	کمترین مقدار را برای فیلد مورد نظر مشخص می کند.
minlength	number	کمترین تعداد کاراکتر را برای فیلد مورد نظر مشخص می کند.
name	text	نام فیلد input مورد نظر را مشخص می کند.
placeholder	text	یک نمونه مختصر از نحوه ورود اطلاعات را فیل مورد نظر را نشان می دهد.
src	URL	آدرس URL تصویری را که برای دکمه submit یا تایید بکار خواهد رفت را مشخص می کند.
value	text	مقدار فیلد مورد نظر را مشخص می کند.
type	button checkbox date email file number password range radio submit tel text url	نوع فیلد input مورد نظر را مشخص می کنند. (توضیح این مقادیر در جدول بالا آمده است.)

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