تگ input در html

تگ input یکی از پراستفاده‌ترین تگ‌های HTML است که برای ایجاد فیلدهای ورودی مختلف مانند متن، ایمیل، رمز عبور، شماره، چک‌باکس، رادیو، تاریخ و… در تگ form به کار می‌رود. این تگ به صورت خودبسته (self-closing) است و درون خود محتوایی ندارد.

تگ <input> با استفاده از ویژگی type مشخص می‌کند که چه نوع فیلدی ایجاد شود. در کنار آن، می‌توان ویژگی‌های متعددی برای تعریف مقدار اولیه، نام، شناسه، وضعیت اجباری بودن و… به آن اضافه کرد.

<input type="text" name="username" id="username" placeholder="نام کاربری">

تگ input دارای انواع زیادی از ویژگی‌هاست که بسته به نوع فیلد (type) می‌توان از آن‌ها استفاده کرد.

نوع فیلد را مشخص می‌کند. مقادیر رایج شامل text، email، password، number، radio، checkbox، file، date، submit، و… است.

<input type="email" name="email">
<input type="checkbox" name="agree">
<input type="submit" value="ارسال">

این ویژگی یکی از مهم‌ترین ویژگی‌های تگ <input> است و انواع مختلفی دارد. در ادامه انواع رایج آن به همراه مثال آورده شده است:

type=”text” – برای ورود متن ساده:

<input type="text" name="fullname" placeholder="نام کامل">

type=”email” – برای ورود آدرس ایمیل (دارای اعتبارسنجی ایمیل):

<input type="email" name="email" placeholder="ایمیل شما">

type=”password” – برای ورود رمز عبور (مخفی‌سازی متن):

<input type="password" name="password" placeholder="رمز عبور">

type=”number” – برای ورود عدد (با کنترل فلش بالا/پایین):

<input type="number" name="age" min="0" max="120">

type=”checkbox” – برای انتخاب چند گزینه از بین چند گزینه (تیک‌خور):

<label><input type="checkbox" name="subscribe"> عضویت در خبرنامه</label>

type=”radio” – برای انتخاب یک گزینه از بین چند گزینه (دکمه رادیویی):

<label><input type="radio" name="gender" value="male"> مرد</label>
<label><input type="radio" name="gender" value="female"> زن</label>

type=”file” – برای انتخاب و آپلود فایل از سیستم:

<input type="file" name="resume">

type=”date” – برای انتخاب تاریخ (با تقویم مرورگر):

<input type="date" name="birthdate">

type=”submit” – برای دکمه ارسال فرم:

<input type="submit" value="ارسال فرم">

type=”reset” – برای پاک کردن مقادیر فرم و بازگرداندن به حالت اولیه:

<input type="reset" value="پاک‌سازی فرم">

type=”hidden” – برای ذخیره داده‌های مخفی که در فرم ارسال می‌شوند اما نمایش داده نمی‌شوند:

<input type="hidden" name="userid" value="12345">

type=”tel” – برای ورود شماره تلفن (در موبایل کیبورد عددی فعال می‌شود):

<input type="tel" name="phone" placeholder="شماره تلفن">

type=”url” – برای ورود آدرس اینترنتی با اعتبارسنجی (http یا https):

<input type="url" name="website" placeholder="https://example.com">

توجه: برخی مقادیر مانند color، range، search و datetime-local نیز وجود دارند که برای مرورگرهای مدرن کاربرد دارند و بسته به هدف پروژه می‌توان از آن‌ها نیز استفاده کرد.

نام فیلد برای ارسال داده به سرور. مقدار این ویژگی به‌عنوان کلید در داده‌های ارسالی استفاده می‌شود.

<input type="text" name="fullname">

مقدار اولیه فیلد ورودی را تعیین می‌کند. در برخی موارد مانند type=”submit” این مقدار به‌عنوان متن دکمه نمایش داده می‌شود.

<input type="text" value="مقدار پیش‌فرض">
<input type="submit" value="ارسال فرم">

متنی را درون فیلد نمایش می‌دهد تا راهنمای کاربر برای ورود داده باشد. این متن پس از تایپ کاربر ناپدید می‌شود.

<input type="text" placeholder="نام خود را وارد کنید">

این ویژگی مشخص می‌کند که پر کردن فیلد ضروری است و فرم بدون مقداردهی این فیلد ارسال نمی‌شود.

<input type="email" required>

اگر این ویژگی قرار داده شود، فیلد غیرفعال می‌شود و کاربر نمی‌تواند مقدار آن را تغییر دهد یا روی آن کلیک کند.

<input type="text" disabled value="غیرفعال">

مشابه disabled است با این تفاوت که کاربر نمی‌تواند مقدار را تغییر دهد ولی فیلد همچنان در فرم ارسال می‌شود.

<input type="text" readonly value="فقط خواندنی">

تگ <input> از Global Attributes در HTML پشتیبانی می‌کند.

تگ <input> از Event Attributes مانند onchange، onfocus، oninput و… پشتیبانی می‌کند.

نمای ظاهری پیش‌فرض تگ <input> بسته به نوع آن متفاوت است. اما به‌طور کلی مرورگرها به صورت زیر آن را نمایش می‌دهند:

input {
  display: inline-block;
  padding: 1px 2px;
  border: 1px solid #ccc;
}