کار با عناصر ورودی یا Input Elements در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با عناصر ورودی یا Input Elements در HTML با من همراه باشید.

کار با عناصر ورودی یا Input Elements در HTML

Free-Learn

عناصر ورودی یا Input Elements در HTML

در بخش قبلی ما با عناصر قابل استفاده در تگ Form آشنا شدیم و اشاره کردم که در بخش بعدی یعنی همین بخش ما بطور کامل با نوع های مختلف عناصر ورودی از نوع Input در HTML آشنا خواهیم شد.

حال در این بخش بطور کامل میخواهیم با عناصر ورودی یا Input Elements ها در فرم ها و بطور کلی در HTML آشنا شویم و با آنها کار کنیم. لطفا در ادامه و تا پایان با من همراه باشید.

Free-Learn

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

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

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

امتحان کنید

Free-Learn

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

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

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


امتحان کنید

Free-Learn

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

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

امتحان کنید

Free-Learn

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

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

امتحان کنید

Free-Learn

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

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

امتحان کنید

Free-Learn

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

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

امتحان کنید

Free-Learn

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

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

امتحان کنید

Free-Learn

عناصر ورودی اضافه شده در HTML5

در ادامه و عناصری که معرفی میکنم عناصری هستند که در HTML5 اضافه شده اند.

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
  • file
  • image
  • hidden

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

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

امتحان کنید

Free-Learn

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

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

Free-Learn

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

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

Free-Learn

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

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

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


امتحان کنید

Free-Learn

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

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

Free-Learn

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

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

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

امتحان کنید

Free-Learn

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

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

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

امتحان کنید

Free-Learn

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

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

Free-Learn

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

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

Free-Learn

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

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

Free-Learn

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

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

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


امتحان کنید

Free-Learn

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

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

Free-Learn

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

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

امتحان کنید

Free-Learn

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

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

امتحان کنید

Free-Learn

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

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

امتحان کنید

خب دوستان خسته نباشید اینم از آموزش کار با عناصر ورودی یا Input Elements در HTML – لطفا در بخش های بعدی نیز با بنده همراه باشید.

Free-Learn