توی این جلسه از آموزش html قراره با تگ input آشنا بشیم و انواع مختلف اون رو بشناسیم. اگه خاطرتون باشه توی آموزش کار با فرم در html، بهتون گفتم که تگ input رو توی یه آموزش مجزا به طور کامل بهتون توضیح میدم. تگ input انواع مختلفی داره و شاید باورتون نشه که فقط با یه تغییر نوع ساده، این تگ میتونه چه قابلیت‌هایی رو به سایتتون اضافه کنه. بیشتر از این مقدمه گویی نمیکنم، آماده باشید که بریم سراغ آموزش?.
المان Text Box در فرم:
ساده‌ترین و عمومی‌ترین کاربرد تگ input، ساخت یه تکس باکس برای دریافت اطلاعات متنی مثل نام، نام خانوادگی، شماره تلفن و… هست. به این منظور کافیه کد زیر رو به فرم html اضافه کنید.
<input type=”text” id=”fname” />
خروجی این کد یه تکس باکس ساده برای دریافت نام از کاربر هست. راجع به خصیصه id بعدا به طور مفصل صحبت می‌کنیم اما فعلا قرار نیست به اون بپردازیم. توی این مطلب تمرکزمون فقط روی تگ input و انواع اون هست پس در ادامه با دقت به مثال‌ها و خروجی‌ها دقت کنید. خروجی کد بالا چنین چیزی هست:
خب همونطور که می‌بینید این یه کادر برای دریافت متن هست اما خیلی نامفهومه!. درواقع هیچ راهنمایی نداره و کاربر با دیدن این نمیدونه باید چه اطلاعاتی رو در این قسمت وارد کنه. برای اینکه طراحی کمی مفهوم‌تر بشه می‌تونیم از خصیصه placeholder استفاده کنیم. به این منظور کد ما به این صورت تغییر میکنه.
<input type=”text” id=”fname” placeholder=”Enter text…” />
و خروجی هم چنین چیزی خواهد بود:
الان طراحی ما کمی مفهوم‌تر شده اما برای بهتر شدن طراحی می‌تونیم علاوه بر placeholder از یه label هم کمک بگیریم. اگه خاطرتون باشه قبلا label رو بهتون توضیح دادم. حالا می‌خوایم از label استفاده کنیم. به این منظور کد ما به شکل زیر تغییر میکنه.
<label for=”fname”>First name:</label>
<input type=”text” id=”fname” name=”fname” placeholder=”Enter text…” >
و خروجی هم چنین چیزی خواهد بود.
الان طراحی ما قابل قبول و کاملا مفهومه. کاربر با دیدن این فرم متوجه میشه که باید اسمش رو در این قسمت وارد کنه. به عنوان یادآوری باید بگم خصیصه name در تگ input باعث برقراری ارتباط بین تگ input و label میشه. و اگه دقت کنید مقدار fname برای خصیصه name در تگ input و for در تگ label برابر هست. نکته مهم دیگه اینه که یادتون باشه همه این طراحی‌ها داخل تگ باز و بسته فرم نوشته میشن. یعنی این شکلی.
<form action=”/action_page.php”>
<label for=”fname”>First name:</label>
<input type=”text” id=”fname” name=”fname” placeholder=”Enter text…” ><br><br>
<input type=”submit” value=”Submit”>
</form>
خب تا اینجای کار نحوه نوشتن تگ input و اضافه کردن اون به فرم رو یاد گرفتید، حالا میخوام انواع تگ input رو بهتون معرفی کنم.
انواع تگ input:
input انواع مختلفی داره که در ادامه به طور مختصر انواع مختلف این تگ رو بهتون معرفی میکنم و هر کدوم که نیاز به توضیح بیشتری داشت رو توضیح میدم.
- button: استفاده از این نوع امکان اضافه شدن یه دکمه به فرم رو فراهم میکنه درواقع معادل تگ button از نوع button هست که قبلا توضیح دادم
- checkbox: امکان اضافه شدن یه لیست چند انتخابی رو فراهم میکنه. از اونجایی که این المان خیلی پر کاربرده در ادامه مفصل توضیحش میدم.
- color: امکان اضافه شدن یه جعبه انتخاب رنگ به فرم رو فراهم میکنه. میتونی امتحانش کنی!!?
- date: امکان اضافه شدن یه باکس انتخاب تاریخ رو فراهم میکنه، البته میلادی که خیلی به درد سایت‌های فارسی نمیخوره.
- datetime: اگه از این نوع استفاده کنید، علاوه بر باکس انتخاب تاریخ، باکس اضافه شده امکان انتخاب زمان رو هم داره.
- email: برای دریافت ایمیل کاربر از این نوع استفاده کنید چون معتبر بودن ایمیل رو هم چک میکنه?.
- file: این امکان رو به فرم اضافه میکنه که کاربر بتونه یه فایل انتخاب کنه و این فایل به همراه اطلاعات فرم به سمت سرور ارسال بشه.
- hidden: یه فیلد مخفی به فرم اضافه میکنه. این فیلد میتونه حاوی یه مقدار داده باشه که کاربر سایت اون رو نمیبینه اما برنامه نویس میتونه از مقدار داده‌ای که داخل این فیلد مخفی هست استفاده کنه.
- image: امکان آپلود عکس رو فراهم میکنه.
- month: باکس انتخاب ماه(ماه‌های میلادی) رو به فرم اضافه میکنه.
- number: یه تکس باکس به فرم اضافه میکنه که فقط می‌تونید توش عدد وارد کنید. برای دریافت تعداد، کد ملی، کد پستی و… (کلا داده‌های عددی) خیلی مناسبه.
- password: یه تکس باکس به فرم اضافه میکنه که هرچی توش تایپ کنید به فرمت پسورد(*****) در میاد. توی فرم‌های ورود و عضویت برای دریافت رمز عبور انتخاب مناسبیه.
- radio: یه دکمه رادیویی به فرم اضافه میکنه. از اونجایی که دکمه رادیویی المان پر کاربردیه، در ادامه مفصل‌تر توضیحش میدم.
- range: امکان انتخاب بازه عددی رو به فرم اضافه میکنه. برای مثال سایت دیجی کالا توی قسمت فیلتر این امکان رو بهتون میده که بر اساس قیمت، محصولات رو فیلتر کنید و یه بازه قیمت انتخاب کنید. نوع range این قابلیت رو براتون فراهم میکنه?.
- reset: استفاده از این نوع معادل تگ button از نوع reset هست که قبلا توضیح دادم.
- submit: استفاده از این نوع معادل تگ button از نوع submit هست که قبلا توضیح دادم.
- tel: یه تکس باکس به فرم اضافه میشه که مختص وارد کردن شماره تلفنه و خوبیش اینه که اعتبار سنجی شماره تلفن رو هم براتون انجام میده?.
- text: با نوع text هم که همون ابتدای کار آشنا شدیم.
- time: یه باکس انتخاب زمان به فرم اضافه میشه.
- url: اگه قصد دارید آدرس یه سایت یا یه لینک از کاربر دریافت کنید، از این نوع استفاده کنید چون اعتبار سنجی آدرس وارد شده رو هم براتون انجام میده.
- week: یه باکس انتخاب هفته با توجه به تقویم به فرم اضافه میشه و البته که تقویم میلادی هست.
input از نوع checkbox:
اگه فرمی داشته باشید که بخواید کاربر از بین چند گزینه مشخص یک یا چند مورد رو انتخاب کنه می‌تونید از Checkbox استفاده کنید. برای مثال به کد زیر و خروجی اون توجه کنید.
<p>به کدام یک از مهارت‌های زیر تسلط دارید؟</p>
<form action=”/action_page.php”>
<input type=”checkbox” id=”skil1″ name=”skil1″ value=”wordpress”>
<label for=”skil1″> wordpress</label><br>
<input type=”checkbox” id=”skil2″ name=”skil2″ value=”php”>
<label for=”skil2″> php</label><br>
<input type=”checkbox” id=”skil3″ name=”skil3″ value=”MySQL “>
<label for=”skil3″> MySQL Server</label><br><br>
<input type=”submit” value=”ارسال اطلاعات”>
</form>
خروجی این تیکه کد به شکل زیر هست. همونطور که می‌بینید کاربر ممکنه در هیچ، یک، چند و یا همه مهارت ها تسلط داشته باشه و بتونه اونها رو انتخاب کنه.
input از نوع radio:
همونطور که قبلا گفتم استفاده از تگ input با نوع radio امکان استفاده از دکمه رادیویی رو توی فرم براتون فراهم میکنه. حالا دکمه رادیویی چی هست و کجاها استفاده میشه؟؟؟
حتما دیدید توی اکثر سایت‌ها وقتی می‌خواید ثبت نام کنید جنسیت شما رو می‌پرسه و دو انتخاب زن و مرد رو به شما پیشنهاد میده. در این حالت شما اجبار دارید که یکی از جنسیت‌ها رو انتخاب کنید. یعنی نه می‌تونید هر دو جنسیت رو انتخاب کنید و نه می‌تونید هیچ جنسیتی رو انتخاب نکنید. اگه با چنین حالتی مواجه شدید، دکمه‌های رادیویی بهترین انتخاب هستن. برای اینکه بهتر این موضوع رو درک کنید، به تیکه کد زیر و خروجی اون توجه کنید.
<p>متقاضی کدام یک از موقعیت‌های شغلی زیر هستید؟</p>
<form action=”/action_page.php”>
<input type=”radio” id=”monshi” name=”job” value=”monshi”>
<label for=”monshi”>منشی</label><br>
<input type=”radio” id=”tarah” name=”job” value=”tarah”>
<label for=”tarah”>طراح</label><br>
<input type=”radio” id=”hesabdar” name=”job” value=”hesabdar”>
<label for=”hesabdar”>حسابدار</label>
<br><br>
<input type=”submit” value=”ثبت درخواست”>
</form>
خروجی این کد به شکل زیر هست و همونطور که می‌بینید هر متقاضی تنها میتونه تقاضای یک شغل رو ثبت کنه. به همین دلیل از دکمه رادیویی استفاده شده. نگته مهم دیگه در کد بالا اینه که خصیصه name برای هر سه دکمه رادیویی برابر هست. این کار برای group شدن radio button ها (دکمه‌های رادیویی) هست. وقتی چند تا دکمه رادیویی گروپ (group) بشن، در آن واحد فقط یکی از اونها قابل انتخاب هست.
سخن آخر:
توی این مطلب تگ input، انواع مختلف اون و کاربرد هر کدوم رو یاد گرفتیم. توی جلسات بعدی با من همراه باشید تا بتونیم در کنار هم مفاهیم بیشتری رو یاد بگیریم?. دوستای گلم اگه دوست دارید بیشتر راجع به لینک‌ها بدونید می‌تونید به این سایت مراجعه کنید.
موفق و پیروز باشید?❤️.
