HTML — ورودی (input)

آخرین بروزرسانی: 1404/08/07

ورودی (input)

تگ «ورودی فرم (Form Input)» با نام <input> جایی برای واردکردن داده می دهد. کاربر اسم می نویسد، تیک می زند، یا فایل می فرستد. نوع ورودی را با ویژگی «type» تعیین می کنیم.

تعریف و کاربرد ورودی فرم

طبق منبع، <input> یک فیلد برای ورود داده است. این عنصر مهم ترین جزء فرم هاست و بسته به type می تواند متن، رمز، ایمیل، عدد، تاریخ و دکمه ارسال باشد.

نمونه پایه فرم با سه ورودی

&lt;form action="/action_page.php"&gt;
  &lt;label for="fname"&gt;First name:&lt;/label&gt;
  &lt;input type="text" id="fname" name="fname"&gt;&lt;br&gt;&lt;br&gt;
  &lt;label for="lname"&gt;Last name:&lt;/label&gt;
  &lt;input type="text" id="lname" name="lname"&gt;&lt;br&gt;&lt;br&gt;
  &lt;input type="submit" value="Submit"&gt;
&lt;/form&gt;

مشاهده در ادیتور

انواع مهم input

در منبع، فهرست typeها آمده است: text (پیش فرض)، password، email، number، date، checkbox، radio، file، color، range، submit، reset، search، tel، url، time، week، month و بیشتر.

نکته: برای متن ها از label استفاده کن تا دسترس پذیری بهتر شود.

ویژگی های پرکاربرد

name: نام فیلد برای ارسال داده.
value: مقدار اولیه فیلد.
placeholder: راهنمای کوتاه داخل فیلد.
required: پرکردن را اجباری می کند.
min/max/step: محدودیت عدد یا تاریخ.
autocomplete: پرشدن خودکار را روشن/خاموش می کند.
multiple: چند مقدار مجاز (مثل فایل یا ایمیل).
list: اتصال به datalist برای پیشنهادها.

تمرین گام به گام

یک فرم ساده بساز و یک <input> اضافه کن.
نوع مناسب را با type تعیین کن.
برای دسترس پذیری، <label> مرتبط قرار بده.
در صورت نیاز، required و placeholder بده.

پیوندهای مرتبط

اگر انواع ورودی می خواهی، صفحه ورودی فرم را ببین. برای برچسب ها به label برو. برای ویژگی های فرم ها هم ویژگی های فرم را مطالعه کن.

جمع بندی سریع

<input> فیلد ورود داده است.
type شکل ورودی را تعیین می کند.
label و name را فراموش نکن.
با required اعتباردهی ساده بساز.

قبلی: تصویر (img) بعدی: درج (ins)

فهرست سرفصل‌های HTML