
تگ 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 نهج البلاغه