06 - Form and Inputs

به نام ایزد توانا

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

امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.

اگر سوال یا هر حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنید

Telegram, Twitter, Facebook & ... By : @ARiyou2000

با تشکر از همه شما دوستان، آریو جهان

دیگه بریم سر اصل مطلب

دوستان تا این جای کار من سعی کردم به جای این که بگم چه کدی بزنید و از کدوم تگ ها استفاده کنید، بهتون بگم چطور کد بزنید. در واقع سعی کردم بهتون دیدگاه(روش فکر کردن) بدم و نه دید(فکر).

خب دلیل هم این بود که مسائل بسیار ساده بودن و نیازی به گفتن من نبود. خودتون با یه سرچ ساده و استفاده از منابعی که پیوند همون صفحه می گفتم می تونید اونها رو هم بفهمید.

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

خب اگه بخواهیم خودمونی بخواهیم یک فرم را تعریف کنیم میگوییم به مجموعه ای از چندین فیلد (متنی ، انتخابی و..) در یک صفحه (کاغذ ، وب و..) که قرار است توسط یک شخص تکمیل شود را فرم میگوییم.

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

خب در صفحات اینترنتی هم فرم ها وجود دارند و ما میتونیم از آنها استفاده های بسیار زیادی را داشته باشیم، بفرض مثال یک فرم برای ثبت نام کاربران در وبسایت مان یا یک فرم برای ارسال پیام و دیگر مواردی که میتوانیم در یک صفحه ی وب از فرم ها استفاده نماییم.

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

با تشکر از سایت Free-Learn برای مطالب عالیشون.

کار با فرم ها یا Forms در HTML

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

شکل کلی برای استفاده از تگ <form> در HTML بصورت زیر می باشد :

<form>

      Iتگ های فرم در اینجا قرار میگیرند

</form>

خب گفتیم کار فرم ها اینه که توسط کاربر تکمیل شن. اما چطور ورودی بگیریم؟

برای گرفتن ورودی از کاربر عنصری تحت نام input در html طراحی شده که در ادامه اون رو هم برسی می کینم.

تگ Input در HTML

تگ input یا ورودی ( یا اینپوت ) تگی است که در تگ Form مورد استفاده قرار میگیرد و دارای طرح (نوع) های مختلفی می باشد که با استفاده از آن میتوان داده ها (اطلاعات) را از کاربر دریافت کرد.

تگ Input دارای نوع های مختلفی می باشد، که این نوع ها را میتوان با استفاده از صفت type مشخص نمود.

تعریف یک فرم در حالت کلی به شکل زیر است.

<input type=&quotیکی از انواع با توجه به لیست&quot>

گرچه با ننوشتن type هم یک input ساده یه نمایش در می آید، اما این کار کاملا اشتباه است و هرگز نباید انجام شود.

انواع ورودی یا type های input به شرح ذیل است:

color, checkbox, button, email, datetime-local, date, image, hidden, file, password, number, month, reset, range, radio, tel, submit, search, url, time, text, week

چندین مثال از نحوه استفاده از نوع های موجود در جدول بالا.

<input type=&quotbutton&quot>

<input type=&quotcolor&quot>

<input type=&quotdate&quot>

<input type=&quotemail&quot>

<input type=&quotfile&quot>

<input type=&quothidden&quot>

<input type=&quotimage&quot>

<input type=&quotpassword&quot>

<input type=&quotradio&quot>

<input type=&quotsubmit&quot>

<input type=&quottext&quot>

<input type=&quoturl&quot>

خب حالا بیایید با هم یکم عمیق تر به هر مورد نگاه کنیم و کار هر کدوم رو بگیم.

عنصر ورودی از نوع Text

اولین عنصر ورودی که میخواهیم باهاش آشنا شویم عنصر ورودی از نوع متن می باشد که البته در بخش های قبلی و در مثال هایی که بنده ارائه دادم ما به وضوح با این عنصر ورودی کار کردیم و نحوه استفاده از آن را نیز یاد گرفتیم.

این عنصر ورودی از نوع متن تنها میتواند یک فیلد متنی با قابلیت دریافت یک خط متن از کاربر را ایجاد نماید و یکی از پراستفاده ترین و مهمترین عنصر ورودی در فرم ها می باشد.

<input type="text">

امتحان کنید

عنصر ورودی از نوع Password

عنصر ورودی از نوع پسورد یا رمز عبور یکی دیگر از عناصر ورودی در فرم ها می باشد که با استفاده از این عنصر ما میتوانیم یک فیلد از نوع پسورد را ایجاد نماییم.

متنی که درون فیلد پسورد قرار میگیرد قابل مشاهده نیست و معمولا بصورت دایره های توپُر نمایش داده می شوند.

<input type="password">

امتحان کنید

عنصر ورودی از نوع Submit

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

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

امتحان کنید

عنصر ورودی از نوع Reset

همانطور که از اسم این عنصر ورودی هم مشخصه ما با استفاده از آن میتوانیم یک فرم را ریست نماییم، این عنصر نیز همانند عنصر Submit می باشد یعنی در واقع یک دکمه می باشد که با زدن آن تمامی اطلاعات وارد شده در فرم ها پاک می شوند.

<input type="reset" value="پاک کردن">

امتحان کنید

عنصر ورودی از نوع Radio

دکمه های رادیویی دکمه هایی هستند که کاربر فقط و فقط قادر است یکی از گزینه ها را انتخاب نماید و امکان انتخاب بیش از یک گزینه در این نوع عناصر وجود ندارد.

<input type="radio">

امتحان کنید

عنصر ورودی از نوع Checkbox

برخلاف دکمه های رادیویی ما یک عنصر ورودی داریم به اسم چک باکس یا Checkbox که کاربر قادر است بیش از چند گزینه را در این نوع عناصر انتخاب نماید.

<input type="checkbox">

امتحان کنید

عنصر ورودی از نوع Button

یک عنصر ورودی از نوع دکمه با قابلیت کلیک شدن توسط کاربر می باشد که ما میتوانیم در این نوع دکمه ها یک محتوا (تصویر،متن و..) را قرار دهیم و در واقع تفاوت اصلی این نوع دکمه با دکمه های Submit در همین است.

<input type="button" ="alert('سلام خوبی؟')" value="کلیک کن">

امتحان کنید

عنصر ورودی از نوع Color

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

<input type="color">

امتحان کنید

عنصر ورودی از نوع Date

با استفاده از این عنصر میتوان یک مقدار بصورت تاریخ (سال/ماه/روز) را دریافت کرد.

<input type="date">

امتحان کنید

عنصر ورودی از نوع Datetime-local

با استفاده از این عنصر میتوان یک تاریخ (سال/ماه/روز) و زمان (ساعت/دقیقه) را بهمراه منطقه زمانی از کاربر دریافت کرد.

<input type="datetime-local">

امتحان کنید

عنصر ورودی از نوع Email

با استفاده از این عنصر میتوان یک مقدار بصورت ایمیل را از کاربر دریافت کرد.

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

<input type="email">

امتحان کنید

عنصر ورودی از نوع Month

با استفاده از این عنصر میتوان مقدار ماه و سال را از کاربر دریافت کرد.

<input type="month">

امتحان کنید

عنصر ورودی از نوع Number

با استفاده از این عنصر میتوان یک مقدار بصورت عددی را از کاربر دریافت کرد و همچنین از صفات زیر میتوان در این عنصر استفاده کرد:

• min : کمترین مقداری که میتوان وارد کرد
• max : بیشترین مقداری که میتوان وارد کرد
• value : یک مقدار از قبل تعریف شده را مشخص میکند
• step : فاصله ی بین حرکت اعداد را مشخص میکند

<input type="number" min="1" max="10" step="3" value="1">

امتحان کنید

عنصر ورودی از نوع Range

با استفاده از این عنصر میتوان یک مقدار از طریق یک میله ی لغزان را از کاربر دریافت کرد و همچنین از صفات زیر میتوان در این عنصر استفاده کرد:

• min : کمترین مقداری که میتوان وارد کرد
• max : بیشترین مقداری که میتوان وارد کرد
• value : یک مقدار از قبل تعریف شده را مشخص میکند
• step : فاصله ی بین حرکت اعداد را مشخص میکند

<input type="range" min="0" max="50" step="5" value="25">

امتحان کنید

عنصر ورودی از نوع Search

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

<input type="search">

امتحان کنید

عنصر ورودی از نوع Tel

با استفاده از این عنصر میتوان یک مقدار بصورت شماره تلفن را از کاربر دریافت کرد.

<input type="tel">

امتحان کنید

عنصر ورودی از نوع Time

با استفاده از این عنصر میتوان یک مقدار بصورت زمان را از کاربر دریافت کرد.

<input type="time">

امتحان کنید

عنصر ورودی از نوع URL

با استفاده از این عنصر میتوان یک مقدار بصورت آدرس اینترنتی دریافت کرد.

توجه داشته باشید که باید در ابتدای آدرس حتما //:http وجود داشته باشد.

<input type="url">

امتحان کنید

عنصر ورودی از نوع Week

با استفاده از این عنصر میتوان یک مقدار بصورت هفته در سال را از کاربر دریافت کرد.

<input type="week">

امتحان کنید

عنصر ورودی از نوع File

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

<input type="file">

امتحان کنید

عنصر ورودی از نوع Image

با استفاده از این عنصر میتوان یک دکمه تصویری، دکمه ای که از تصویر ایجاد شده است را ایجاد کرد.

<input type="image" src="image.jpg">

امتحان کنید

عنصر ورودی از نوع Hidden

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

<input type="hidden">

امتحان کنید

تا اینجای کار با فرم ها آشنا شدیم.

از اونجا که فرم ها باید توسط کاربر تکمیل شن، با عناصر اصلی فرم ها یعنی انواع input یا ورودی هم آشنا شدیم و تا حد مورد نیاز برسی شون کردیم.

حالا وقت اونه که یه فرم ساده طراحی کنیم.

برای مثال دستورات زیر یک فرم را ایجاد میکنند که برای مشاهده خروجی دستورات زیر لطفا بروی دکمه (امتحان کنید) کلیک نمایید.

<form>

name : <br>

<input type=&quottext&quot name=&quotfirstname&quot value=&quotSadegh&quot>

<br>

family : <br>

<input type=&quottext&quot name=&quotlastname&quot value=&quotAsadi&quot>

<br><br>

<input type=&quotsubmit&quot value=&quotارسال&quot>

</form>

امتحان کنید

اگر بروی دکمه امتحان کنید کلیک نمایید، شما در خروجی شکل کلی یک فرم را میتوانید مشاهده نمایید ،یک فرم ساده با ۲ دکمه و ۲ باکس متنی برای دریافت و ارسال داده ها .

بعدها اگه درخواست یا یاداوری بود به این پست متدهای فرم و صفاتش هم اضافه میشه. اما فعلا می تونید این مباحث رو در Free-Learn دنبال کنید.

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

نظراتتون بینهایت دلگرم کنندست. انتقاداتتون هم در درجه اول باعث بهبود شخصیت اجتماعیم و بعدش کارم و نوشته هام میشه، پس بازم بینهایت ممنونم.

مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️

شب و روزگار بر شما خوش.

بدرود.

ARiyou Jahan ‏12/01‏/2019‏ 10:34 ب.ظ