تگ input در html + ویدیو آموزشی

تگ input در html برای تمامی کسانی که قصد دارند یک وبسایت راه اندازی کنند امری ضروری می باشد. زیرا در قسمت های متفاوت سایت نیاز است که یک فیلد ورودی داشته باشیم تا بتوانیم اطلاعاتی را از کاربر بگیریم. در این مقاله از وبسایت۳ به آموزش تگ input در html خواهیم پرداخت و پس از آن شما قادر خواهی بود در هر کجای وب سایت خود به راحتی اطلاعات مورد نیاز را از کاربر دریافت کنید.

⭐ (پیشنهاد می کنم برای یادگیری بهتر، ابتدا ویدیو بالا که قسمتی از دوره رایگان آموزش HTML CSS به زبان ساده است را ببینید سپس ادامه متن را مطالعه نمایید.)⭐

آموزش input در html 

قبل از آموزش input در html، نیاز است که با فرم ها و چگونگی دریافت اطلاعات از کاربر آشنایی مختصری داشته باشید. بنابراین با اینکه فرم ها در این مقاله موضوع بحث ما نیست، ولی در ابتدا توضیح کوتاهی درباره فرم ها می دهیم و سپس به سراغ یادگیری تگ اینپوت در html می رویم. (برای یادگیری کامل فرم به آموزش تگ form در html مراجعه کنید)

فرم در وب سایت چیست؟ 

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

فرم دارای فضاهایی برای پر کردن است، که داده ها و اطلاعات را دریافت نماید. معمولاً فرم ها شامل یک فیلد ورودی برای وارد کردن نام، ایمیل، آدرس و … هستند. همچنین می توانید فضای متنی بزرگتری برای دریافت متن های طولانی تر مثلاً برای گرفتن نظرات کاربران طراحی نمایید.

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

سرانجام تمامی فرم ها دارای یک دکمه ارسال هستند تا داده ها را به سروری که در آن پردازش یا ذخیره می شوند ارسال نمایند.

نحوه ایجاد فرم ها در html

برای ایجاد فرم در html باید از تگ<form> استفاده کنیم که شامل یک تگ باز و یک تگ بسته می باشد.

<form>

</form>

فرم ها دارای دو ویژگی هستند که در بحث بک اند (Back-End) مطرح می شود. ولی بهتر است که شما آن را بنویسید، تا در زمانی که قصد نوشتن Back-End را نیز دارید بتوانید مقادیر آن را تعیین نمایید.

این دو ویژگی action و method است که مشخص می کند فرم ما بعد از ارسال به کجا و چگونه ارسال شود.

<form action=”#” method=”#”>

</form>

تگ input در html

تگ input در html برای جمع آوری اطلاعات از کاربر است که در فرم استفاده می شود.

<input> در واقع جایی است که کاربر داده های خود را وارد می کند.

مواردی که نیاز است درباره این تگ بدانید:

• input (اینپوت) یک تگ باز است و تگ بسته ندارد.
• این تگ دارای یک ویژگی به نام type است که می توانید نوع اطلاعاتی که قرار است دریافت کنید را با استفاده از آن کنترل نمایید. مثلاً متن ایمیل، تماس، متن طولانی، چک باکس و … .

شیوه کلی نوشتن اینپوت به صورت زیر است:

<form action="#" method="#">

<input type="value">

</form>

مثلاً برای ایجاد یک فیلد که بتوانید ایمیل کاربر را دریافت کنید اینپوت به صورت زیر تعریف می شود:

<form action="#" method="#">

<input type="email">

</form>

ویژگی type تعیین می کند که عنصر input چه نوع داده ای را می تواند بپذیرد.

انواع input در html

همانطور که مشاهده کردید با تگ اینپوپ به راحتی می توانید اطلاعات مورد نیاز را از دریافت نمایید. اگر برای شما سوال است که چه نوع اطلاعاتی را با استفاده از این تگ می توانیم دریافت کنیم؟ در ادامه مبحث درباره انواع input در html صحبت خواهیم کرد و متوجه می شوید که انواع فیلد متنی، ایمیل، رمز، دکمه رادیو، چک باکس، دکمه ارسال اطلاعات و … می تواند در قسمت type این تگ نوشته شود و اطلاعات مورد نیاز را دریافت کند.

ایجاد فیلد ورودی متن (Text Box Input Field)

ورودی متن رایج ترین سبک ورودی می باشد و زمانی که مقداری برای type را مشخص نکنیم مقدار آن به صورت پیش فرض متن خواهد بود.

<input type=”text”>

خط بالا یک فیلد ورودی تک خطی ایجاد می کند که کاربر می تواند در آن یک ورودی متن تایپ کند.

ویژگی Placeholder در html (ایجاد متن پشفرض)

در بیشتر مواقع مشاهده می کنیم در کادری که قرار است اطلاعاتی وارد کنیم، یک متن کمرنگ (برای راهنمایی) نوشته شده است. برای نوشتن این متن پیش فرض از ویژگی Placeholder در html استفاده می کنیم. به صورت زیر:

<input type=”text” placeholder=”متن پیشفرض”>

خروجی به صورت این صورت خواهد بود:

اهمیت name در فیلد متنی

هنگامی که اطلاعات متنوع و زیادی را به سرور ارسال می کنیم، سرور باید بتواند بین داده هایی که جمع آوری می کند تمایز قائل شود.

برای مثال از داده های متنی ارسال شده باید نام کاربری، رمز عبور، ایمیل و … را تشخیص دهد.

از این رو برای هر داده متنی ارسال شده ویژگی name را تعریف می کنیم تا تشخیص این موارد راحت شود.

مثال:

<input type="text" name="first_name" placeholder="نام">

<input type="text" name="last_name" placeholder="نام خانوادگی">

خروجی کار به این صورت خواهد بود:

نکته: همان طور که خودتان هم حتما متوجه شده اید:

• مقدار  placeholder یک مقدار برای راهنمایی کاربر
• و صفت name راهنمایی سرور برای تشخیص مقدار وارد شده می باشد.

اجبار کاربر به پر کردن فیلد

شما می توانید فرم خود را طوری بسازید که اگر کاربر اطلاعات خود را پر نکرده باشد و یا اطلاعات اشتباهی وارد کند، هنگام ارسال اطلاعات یک پیغام خطا را مشاهده کند.

برای این کار کافی است ویژگی required را به تگ input اضافه کنید:

<input type=”text” name=”first_name” placeholder=”نام” required>

<input type=”text” name=”last_name” placeholder=”نام خانوادگی” required>

<button type=”submit”>ارسال</button>

در این صورت اگر کاربر تمامی فیلدهایی که شامل required را پر نکند با پیغام خطا روبرو شده و فرم ارسال نمی شود.

ایجاد حداقل و حداکثر تعداد کاراکتر وارد شده

برای اینکه مثلا تعداد کاراکتر برای وارد گردن نام کمتر از 2 حرف یا بیشتر از 25 حرف نباشد از دو ویژگی  minlength و maxlength استفاده می کنیم.

<input type=”text” name=”username” minlength=”3″ maxlength=”25″ required>

ایجاد فیلد برای سایر ورودی ها

حالا که به خوبی با وارد کردن متن آشنا شدید می توانید سایر فیلدها را نیز مشابه متن برای دریافت اطلاعات وارد کنید. برای اینکار کافی است برای type نوع ورودی مورد نظر خود را وارد کنیم.

در مثال زیر همان طور که مشاهده می کنید در یک فرم نام، ایمیل و پسورد را دریافت کرده ایم.

<form action="#" method="#">

<input type="text" placeholder="نام شما :">

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

<input type="password" placeholder="پسورد شما :">

</form>

ایجاد دکمه رادیویی

دکمه رادیویی برای زمانی کاربرد دارد که بخواهیم کاربر از بین چند گزینه فقط یکی را انتخاب کند.

(مشاهده کنید : فیلم آموزش تگ radio در html)

برای ایجاد دکمه رادیویی کافی است به type مقدار radio بدهیم.

فقط نیاز است دو مورد زیر را نیز مد نظر داشته باشید:

• ویژگی name برای هر دکمه رادیویی که ایجاد می کنیم یکسان باشد. (اگر یکسان نباشد می تواند همزمان هر دو گزینه را انتخاب کند)
• یک ویژگی به نام value نیز اضافه می کنیم و یک نام دلخواه به آن می دهیم (این مورد برای بک اند مورد استفاده قرار می گیرد)

مثال:

اگر بخواهیم در فرم خود جنسیت را تعیین کنیم دکمه رادیویی را به صورت زیر تعریف می کنیم:

جنسیت

آقا: <input type="radio" name="gender" value="male">

خانم: <input type="radio" name="gender" value="female">

خروجی:

ایجاد چک باکس

ایجاد چک باکس نیز زمانی کاربرد دارد که کاربرد بتواند چند گزینه را از بین گزینه های مورد نظر انتخاب کند.

(مشاهده کنید : فیلم آموزش تگ چک باکس در html)

مثال:

مهارت شما:

<label for="front">فرانت اند</label>

<input type="checkbox" name="front" id="front" checked>

<label for="backend">بک اند</label>

<input type="checkbox" name="backend" id="backend">

<label for="full">فول استک</label>

<input type="checkbox" name="full" id="full">

خروجی:

نکته:

تگ label در بالای هر کدام از فیلدهای فرم (متن، ایمیل و … ) می تواند قرار گیرد و یک راهنمایی برای آن مقدار می باشد.

مقدار checked باعث می شود مقدار مورد نظر به صورت پیش فرض تیک خورده باشد.

در حالت عادی برای تیک زدن مقدار ها، فقط باید روی مربع کوچک ایجاد شده کلیک کنیم. برای اینکه بعد از کلیک روی متن، نیز مربع آن تیک بخورد برای label و input به ترتیب مقدار for و id در نظر می گیریم و مقدار آن را نیز یکسان است.

منبع : https://www.w3schools.com/tags/tag_input.asp