آموزش input در html

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

مقدمه‌ای بر آموزش input در html

قبل از آموزش input در html، نیاز است که با فرم ها و چگونگی دریافت اطلاعات از کاربر آشنایی مختصری داشته باشید. بنابراین با اینکه فرم ها در این مقاله موضوع بحث ما نیست، ولی در ابتدا توضیح کوتاهی درباره فرم ها می دهیم و سپس به سراغ یادگیری تگ اینپوت در 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 چه نوع داده ای را می تواند بپذیرد.

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

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

<input type=”text”>

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

ایجاد متن پشفرض برای فیلد متنی (Placeholder)

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

<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>

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

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

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

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

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

مثال:

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

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

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

خروجی:

آقا:
خانم:

ایجاد چک باکس

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

مثال:

مهارت شما:

<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”>

خروجی:

نکته:

1. تگ label در بالای هر کدام از فیلدهای فرم (متن، ایمیل و … ) می تواند قرار گیرد و یک راهنمایی برای آن مقدار می باشد.
2. مقدار checked باعث می شود مقدار مورد نظر به صورت پیش فرض تیک خورده باشد.
3. در حالت عادی برای تیک زدن مقدار ها، فقط باید روی مربع کوچک ایجاد شده کلیک کنیم. برای اینکه بعد از کلیک روی متن، نیز مربع آن تیک بخورد برای label و input به ترتیب مقدار for و id در نظر می گیریم و مقدار آن را نیز یکسان است.

سخن پایانی

امیدوارم که این آموزش نیز مورد استفاده شما قرار گرفته باشد. برای یادگیری کامل برنامه نویسی و طراحی قالب وردپرس، می توانید در دوره آموزش طراحی قالب وردپرس و فروش در ژاکت شرکت کنید.