تگ input و انواع متداول (Text, Password, Submit)

تگ <input> و انواع متداول: آجر سازنده فرم! 🧱

سلام به همه! توی بحث فرم‌ها، تگ <input> یکی از پرکاربردترین و مهم‌ترین تگ‌هاست. فکر کنید مثل یه جعبه ابزار پر از ابزارهای مختلف برای جمع‌آوری اطلاعات از کاربره. با تغییر خصوصیت type، می‌تونیم انواع مختلفی از فیلدهای ورودی رو با همین یه تگ بسازیم!

تگ <input> در واقع یه عنصر چندکاره است که بسته به نوعش، کارهای مختلفی انجام می‌ده؛ از گرفتن یه خط متن ساده گرفته تا ارسال کل فرم!

ساختار اصلی <input>:

تگ <input> معمولاً یه تگ خودبسته (self-closing) هست، یعنی نیازی به تگ پایانی نداره. مهم‌ترین خصوصیتش type هست که نوع ورودی رو مشخص می‌کنه.

ساختار کلی:

<input type="نوع_ورودی" id="شناسه_منحصر_به_فرد" name="نام_برای_ارسال">

توضیحات خصوصیت‌ها:

• type: مهم‌ترین خصوصیت که نوع فیلد ورودی رو تعیین می‌کنه.
• id: یه شناسه منحصر به فرد برای این عنصر. این شناسه برای اتصالش به تگ <label> استفاده می‌شه.
• name: نامی که به این فیلد داده می‌شه و وقتی فرم ارسال می‌شه، اطلاعات این فیلد با این نام به سرور فرستاده می‌شه. خیلی مهمه!

انواع متداول <input>:

۱. type=”text”: کادر متن معمولی! ✍️

این رایج‌ترین نوع ورودی هست و برای گرفتن ورودی‌های متنی مثل نام، نام خانوادگی، آدرس و… استفاده می‌شه.

<label for="fullname">نام و نام خانوادگی:</label>
<input type="text" id="fullname" name="fullname" placeholder="مثلاً: علی رضایی">

خصوصیت placeholder: یه متن راهنماست که داخل کادر نمایش داده می‌شه و با اولین ورودی کاربر ناپدید می‌شه.

۲. type=”password”: فیلد رمز عبور! 🔒

این نوع ورودی شبیه type=”text” هست، اما هر کاراکتری که کاربر وارد می‌کنه، به صورت نقطه یا ستاره نمایش داده می‌شه تا امنیتش حفظ بشه.

<label for="password">رمز عبور:</label>
<input type="password" id="password" name="password">

نکته: این فقط برای پنهان کردن ورودی در صفحه است. رمز عبور به صورت رمزنگاری شده ارسال نمی‌شه (مگر اینکه با تکنولوژی‌های سمت سرور انجام بشه).

۳. type=”submit”: دکمه ارسال فرم! 🚀

این نوع ورودی، یه دکمه ایجاد می‌کنه که با کلیک روی اون، اطلاعات کل فرم به آدرسی که در خصوصیت action تگ <form> مشخص شده، ارسال می‌شه.

<input type="submit" value="ارسال اطلاعات">

خصوصیت value: متنی که روی دکمه نمایش داده می‌شه.

نکته: می‌تونید به جای <input type=”submit”> از تگ <button type=”submit”> هم استفاده کنید که انعطاف‌پذیری بیشتری در نمایش محتوا داره.

تگ <input> فقط این سه نوع نیست! انواع مختلف دیگه‌ای مثل email, number, checkbox, radio, date, file و… هم داره که هر کدوم کاربرد خاص خودشون رو دارن و در ادامه باهاشون آشنا می‌شیم.

یادگیری انواع مختلف تگ <input> کلید ساخت فرم‌های تعاملی و کاربردیه. حتماً این تگ‌ها رو تمرین کنید و با خصوصیت‌هاشون بازی کنید تا بهشون مسلط بشید! 😊