تگ input در HTML

تاریخ انتشار: 7 خرداد 1400

تاریخ بروزرسانی: 11 خرداد 1400

تعداد بازدید: 127

تگ 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	یک فیلتر برای انتخاب فایل های مجاز توسط کاربر را مشخص میکند `type="file"`
alt	text	یک متن جایگزین برای تصویر را مشخص میکند `type="image"`
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 email 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 پشتیبانی میکند.