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”> |
یک فیلد را جهت دریافت ایمیل مشخص می کند. این فیلد شبیه 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 file number password range radio submit tel text url | نوع فیلد input مورد نظر را مشخص می کنند. (توضیح این مقادیر در جدول بالا آمده است.) |
پشتیبانی مرورگرها
تمام مرورگرها از این تگ HTML پشتیبانی می کنند.