Input در HTML

Input در HTML با تگ <input> که یکی از اساسی‌ترین تگ‌های HTML برای ایجاد فیلدهای فرم است. این تگ به کاربران اجازه می‌دهد تا اطلاعات را از طریق فرم وب وارد و ارسال کنند.

کاربرد Input و ویژگی‌های آن

همانطور که قبلا ذکر شد، تگ <input> در HTML برای ایجاد فیلدهای ورودی در فرم‌ها استفاده می‌شود. این فیلدها به کاربران این امکان را می‌دهند تا اطلاعاتی را مستقیما در صفحه وب وارد کنند.

کاربرد Input

• ایجاد یک فیلد ورودی تک خطی که کاربران می‌توانند در آن متن، عدد یا گزینه‌های از پیش تعریف‌شده را انتخاب کنند.

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

• type="text" (متن): این نوع پیش فرض type است و یک فیلد ورودی تک خطی برای متن ساده ایجاد می کند. مناسب برای جمع آوری نام، آدرس، نظرات
• type="password" (رمز عبور): فیلدی برای وارد کردن رمز عبور ایجاد می‌کند. هنگام تایپ، کاراکترها به صورت ستاره (*) نمایش داده می شوند تا امنیت رمز عبور حفظ شود.
• type="email" (ایمیل): فیلدی برای وارد کردن آدرس ایمیل ایجاد می٬کند. این نوع type معمولا صحت فرمت ایمیل وارد شده را نیز بررسی می کند.
• type="number" (عدد): فیلدی برای وارد کردن اعداد ایجاد می‌کند. با این نوع type کاربر فقط می‌تواند اعداد را وارد کند.
• type="date" (تاریخ): یک ابزار انتخابگر تاریخ را نمایش می‌دهد که کاربر می‌تواند از آن برای انتخاب یک تاریخ خاص استفاده کند.
• type="checkbox" (کادر انتخاب): یک کادر انتخاب ایجاد می‌کند که کاربر می‌تواند آن را علامت بزند یا از حالت انتخاب خارج کند. مناسب برای انتخاب چند گزینه از یک لیست.
• type="radio" (دکمه رادیویی): یک دکمه رادیویی ایجاد می‌کند. کاربر تنها می‌تواند یکی از دکمه‌های رادیویی موجود در یک گروه را انتخاب کند.

ویژگی‌های Input

• type: این مهم‌ترین ویژگی است که نوع داده ورودی را که فیلد می‌پذیرد، تعریف می‌کند. انواع مختلفی موجود است، از جمله:
  • text: فیلد ورودی متن پیش‌فرض.
  • password: حروف وارد شده را با ستاره (*) پنهان می‌کند.
  • email: صحت داده‌های وارد شده را به عنوان یک آدرس ایمیل معتبر تأیید می‌کند.
  • number: فقط ورودی عددی را مجاز می‌داند.
  • date: یک انتخابگر تاریخ برای انتخاب تاریخ ایجاد می‌کند.
  • checkbox: برای انتخاب گزینه‌ها یک کادر انتخاب ایجاد می‌کند.
  • radio: برای انتخاب گزینه‌های متقابلاً منحصر به فرد دکمه‌های رادیویی ایجاد می‌کند.
• id: یک شناسه منحصر به فرد برای فیلد ورودی، که برای ارجاع به آن با CSS یا Javascript مفید است.
• name: نامی را به فیلد ورودی اختصاص می‌دهد که برای بازیابی داده‌های ارسال شده در سمت سرور استفاده می‌شود.
• value: مقدار پیش‌فرض نمایش داده شده در فیلد ورودی را تعریف می‌کند.
• placeholder: یک راهنمایی یا متن نمونه را تا زمانی که کاربر شروع به تایپ کند، در داخل فیلد نمایش می‌دهد.
• required: پر کردن این فیلد را قبل از ارسال فرم اجباری می‌کند.
• disabled: فیلد را غیرفعال می‌کند و آن را برای کاربر غیرقابل ویرایش می‌کند.

مثال:

HTML

<form action="your_action_page.php" method="post">
  <label for="name">نام:</label>
  <input type="text" id="name" name="name" placeholder="نام خود را وارد کنید">
  <br>
  <label for="email">ایمیل:</label>
  <input type="email" id="email" name="email" placeholder="ایمیل خود را وارد کنید">
  <br>
  <input type="submit" value="ارسال">
</form>

توضیح:

• این کد یک فرم با دو فیلد ورودی ایجاد می‌کند: نام و ایمیل.
• ویژگی type هر دو فیلد را به عنوان ورودی متن در ابتدا تعریف می‌کند.
• از ویژگی‌های id و name برای ارجاع بعدی استفاده می‌شود.
• placeholder راهنمایی‌هایی را برای کاربر ارائه می‌دهد.
• دکمه submit نهایی ارسال فرم را فعال می‌کند.

با استفاده از ویژگی‌های type مختلف و سایر خصوصیات، می‌توانید طیف وسیعی از فیلدهای فرم را برای جمع‌آوری اطلاعات متنوع از کاربران در برنامه‌های وب خود ایجاد کنید.

برای آموزش طراحی سایت از مبتدی تا حرفه‌ای در زمینه html و css به شما پیشنهاد می‌کنیم مقالات این دسته را در سایت آکادمی بین‌المللی دویکس مطالعه کنید.

مزایای استفاده از Input در HTML

استفاده از این تگ مزایای بسیاری در HTML دارد از جمله جمع آوری اطلاعات، تعامل با کاربر، سادگی، انعطاف پذیری، اعتبارسنجی، امنیت، کارایی که به بررسی آن‌ها می‌پردازیم.

1. جمع آوری اطلاعات:

• Input به شما امکان می‌دهد تا اطلاعات مختلفی مانند نام، ایمیل، شماره تلفن، آدرس را از کاربران جمع آوری کنید.
• این اطلاعات می‌تواند برای اهداف مختلفی مانند ثبت نام، سفارش، نظرسنجی مورد استفاده قرار گیرد.

2. تعامل با کاربر:

• Input راهی برای تعامل با کاربران و دریافت بازخورد آنها از طریق فرم‌ها فراهم می‌کند.
• این امر می‌تواند به شما در درک بهتر نیازها و خواسته‌های کاربران و ارائه خدمات بهتر به آن‌ها کمک کند.

3. سادگی:

• استفاده از Input در HTML بسیار ساده است.
• شما فقط نیاز به نوشتن چند خط کد HTML برای ایجاد یک فیلد ورودی دارید.

4. انعطاف پذیری:

• Input از انواع مختلفی مانند text، password، email، number، date پشتیبانی می‌کند.
• این انعطاف پذیری به شما امکان می‌دهد تا فرم‌های مختلفی را برای جمع آوری اطلاعات مختلف ایجاد کنید.

5. اعتبارسنجی:

• Input از ویژگی‌های مختلفی برای اعتبارسنجی داده‌های ورودی پشتیبانی می‌کند.
• این امر به شما کمک می‌کند تا از صحت و درستی اطلاعات جمع آوری شده اطمینان حاصل کنید.

6. امنیت:

• Input از ویژگی‌های امنیتی مختلفی مانند رمزنگاری رمز عبور پشتیبانی می‌کند.
• این امر به شما کمک می‌کند تا از اطلاعات کاربران خود در برابر هکرها و سارقان اطلاعات محافظت کنید.

7. کارایی:

• Input به شما کمک می‌کند تا فرم‌های کارآمد و آسان برای استفاده ایجاد کنید.
• این امر می‌تواند به شما در جذب و حفظ کاربران بیشتر کمک کند.

در اینجا چند نمونه از کاربردهای Input در HTML آورده شده است:

• فرم‌های ثبت نام: برای جمع آوری اطلاعات شخصی مانند نام، ایمیل، شماره تلفن از کاربران استفاده می‌شود.
• فرم‌های سفارش: برای جمع آوری اطلاعات مربوط به سفارش مانند نام محصول، تعداد، آدرس ارسال از کاربران استفاده می‌شود.
• فرم‌های نظرسنجی: برای جمع آوری نظرات و بازخورد کاربران در مورد یک موضوع خاص استفاده می‌شود.
• فرم‌های تماس: برای جمع آوری اطلاعات تماس از کاربران مانند نام، ایمیل و شماره تلفن استفاده می‌شود.

نتیجه:

Input یک عنصر HTML بسیار قدرتمند و انعطاف پذیر است که می‌تواند برای اهداف مختلفی مانند جمع آوری اطلاعات، تعامل با کاربر، ایجاد فرم‌ها مورد استفاده قرار گیرد.