...
تگ 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> | بله | بله | بله | بله | بله |
خواص
| خاصیت | مقدار | توضیح |
|---|---|---|
| accept | file_extension audio/* video/* image/* media_type | یک فیلتر برای انتخاب فایل های مجاز توسط کاربر را مشخص میکند
|
| alt | text | یک متن جایگزین برای تصویر را مشخص میکند
|
| autocomplete | on off | قابلیت تکمیل خودکار فیلد ورودی را مشخص میکند |
| autofocus | autofocus | مشخص میکند که به محض بارگذاری صفحه بروی یک فیلد فوکوس شود |
| checked | checked | مشخص می کند که یک عنصر <input> هنگام بارگیری صفحه باید از قبل انتخاب شود (برای نوع checkbox یا radio) |
| dirname | inputname.dir | جهت متن ارسالی را مشخص میکند ( راست به چپ یا بر عکس ) |
| disabled | disabled | مشخص می کند که یک عنصر <input> باید غیرفعال شود |
| form | form_id | مشخص میکند که عنصر <input> به کدام <form> تعلق دارد |
| formaction | URL | یک آدرس URL یا مسیر صفحه ، برای دریافت و پردازش اطلاعات فرم را مشخص میکند (برای نوع submit و image) |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | نحوه رمزنگاری داده ها را هنگام ارسال اطلاعات به سمت سرور را مشخص میکند (برای نوع submit و image) |
| formmethod | get post | متد یا نوع HTTP را برای ارسال داده ها مشخص میکند (برای نوع submit و image) |
| formnovalidate | formnovalidate | مشخص میکند که آیا یک فیلد ورودی <input> از نظر اعتبار ورودی اعتبار سنجی و بررسی شود یا خیر (مثلاً مقدار ورودی وارد شده واقعاً ایمیل هست یا نه) |
| formtarget | _blank _self _parent _top framename | نحوه باز شدن صفحه نمایش نتیجه پردازش اطلاعات فرم را مشخص میکند (برای نوع submit و image) |
| height | pixels | ارتفاع تصویر <input> را مشخص میکند (فقط در نوع image) |
| list | datalist_id | به یک عنصر <datalist> اشاره دارد که شامل گزینه های از پیش تعریف شده برای یک عنصر <input> است |
| max | number date | حداکثر مقدار ورودی را برای یک عنصر <input> تعیین می کند |
| maxlength | number | حداکثر تعداد کاراکتر های مجاز در یک عنصر <input> را مشخص می کند |
| min | number date | حداقل مقدار را برای عنصر <input> تعیین می کند |
| minlength | number | حداقل تعداد کاراکتر های مورد نیاز در عنصر <input> را مشخص می کند |
| multiple | multiple | مشخص می کند که کاربر می تواند بیش از یک مقدار در عنصر <input> وارد کند (کاربردی برای نوع file) |
| name | text | نام عنصر <input> را مشخص می کند |
| pattern | regexp | یکسری قوانین و محدودیت ها برای داده های ورودی مشخص می کند |
| placeholder | text | یک متن راهنما برای معرفی مقادیر دریافتی ورودی <input> تعریف می کند |
| readonly | readonly | مشخص می کند که فیلد ورودی فقط خواندنی است |
| required | required | مشخص می کند که فیلد ورودی باید قبل از ارسال فرم پر شود |
| size | number | اندازه عرض یک فیلد ورودی را متناسب با مقدار کاراکتر های دریافتی مشخص می کند |
| src | URL | URL تصویر را برای استفاده به عنوان دکمه ارسال مشخص می کند (فقط برای نوع image) |
| step | number any | تعداد قدم های پرش را برای اعداد ورودی مشخص می کند (مثلاً 3 تا 3 تا کاربر می تواند مقدار عدد یک ورودی را افزایش دهد) |
| 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 | مقدار یک عنصر <input> را مشخص می کند |
| width | pixels | عرض تگ <input> را مشخص می کند ( فقط برای نوع image ) |
خواص عمومی
تگ input از خواص عمومی در HTML پشتیبانی میکند.
رویداد های عمومی
تگ input از رویداد های عمومی در HTML پشتیبانی میکند.
روش برخورد با چاپلوسان
و درود خدا بر او، فرمود: (به شخصى كه در ستايش امام افراط كرد، و آنچه در دل داشت نگفت) من كمتر از آنم كه بر زبان آوردى، و برتر از آنم كه در دل دارى.
حکمت 83 نهج البلاغه
