تعریف و کاربرد تگ 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 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 |
| 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">