سه شنبه , خرداد ۲۹ ۱۳۹۷
صفحه اصلی / مقالات / زبانهای برنامه نویسی / وب / HTML / انواع ورودی در HTML کدامند؟

انواع ورودی در HTML کدامند؟

 

انواع ورودی متنی در HTML

(بخشی از کتاب خودم درباره ی اموزش زبان html )

لیست افتادنی

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

یک تگ option اضافه کنید مقدار نمایشی هر ایتم بین تگ باز و بسته ی option نوشته میشود و مقدار ارسالی ان رش خاصیت value ان option نوشته میشود

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

باید از خاصیت SELECTED استفاده کنیم مانند مثال زیر

 

 

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

باید خاصیت multiple را در تگ select قرار دهیم با فشردن کلید کنترل میتوانیم چند گزینه انتخاب کنیم

<select name="dropdown" multiple>

    <option value="1">تهران</option>

    <option value="2" >مشهد</option>

    <option value="3">اصفهان</option>

    <option value="4">شیراز</option>

  </select>

کادر متنی بزرگ    

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

این تگ را مانند مثال زیر باز و بسته نمایید خاصیت های جالب این کادر متنی بزرگ این است که میتوانید

ارتفاع و عرض ان را با تعداد سطر ها و تعداد ستون ها تعین نمایید rows برای سطر ها و cols برای ستون ها

<textarea rows="8" cols="50" name="text">

 متن پیش فرض را میتوانید در این قسمت وارد کنید

 </textarea>

 

 

دکمه ها            

برای ساخت دکمه ها به این ۲  شکل معمولا عمل میکنیم یا دکمه با type ارسال است

(submit) یا به شکل دکمه است (button) که کار خاصی به صورت پیش فرض انجام نمیدهد

و باید برای ان با جاوا اسکریپت فرمان هایی نوشته شود

حالت اول کافیست در تگ input  خاصیت type را به submit تغییر دهید مانند این مثال

<input type="submit" value="ثبت">

 

در این مثال عنوانی که روی دکمه نمایش داده میشود ثبت است زیرا value دکمه را ثبت قرار دادید

با فشردن نوع دکمه ی   submit  خود به خود اطلاعات فرم ارسال میشوند

حالت دوم مانند حالت اول است فقط type را باید از نوع button قرار دهید

 

  <input type="button" value="ثبت">

 

 

 

 

 

 

 

چک باکس ها و رادیو باکس ها

میتوانیم در فرم خود از چک باکس ویا از رادیو باکس ها استفاده کنیم در زمانی که میخواهید

از میان گزینه های موجود کاربر فقط بتواند یکی را تیک بزند باید از رادیوباکس استفاده کنید

مثل فرم های هویت زن یا مرد بودن مجرد یا متاهل بودن  و… اما زمانی که کاربر میتواند چند گزینه را انتخاب کند

مثل دارا بودن چند مدرک مختلف و… باید از جک باکس استفاده کنید برای استفاده از چک باکس در فرم خود به این صورت عمل میکنیم

<b>از کتاب های زیر کدام را مطالعه کرده‌اید؟</b>

 <br>

<input type="checkbox" name="PHPBOOK" value="php">کتاب آموزش زبان php برای برنامه نویسان

<br>

<input type="checkbox" name="HTMLBOOK" value="HTML">کتاب اموزش HTML

<br>

<input type="checkbox" name="PHPBOOK" value="YII FRAMEWORK">کتاب آموزش  YII برای برنامه نویسان

<br>

<input type="checkbox" name="HTMLBOOK" value="C#">کتاب اموزش C#

 

تگ input  خاصیت type را مانند مثال قبل checkbox قرار میدهیم نام را به دلخواه انتخاب کرده

مقدار ارسالی هر چک باکس را هم در خاصیت value قرار میدهیم  مقدار نمایشی را هم کنار تک مینویسیم

 

حال برای رادیو باکس به این شکل عمل کنید

<input type="radio" name="marriage" value="male" checked> مجرد<br>

  <input type="radio" name="marriage" value="female"> متاهل<br>

 

باید خاصیت type را به radio تغییر دهید و در این حالت باید نام ها یکی باشد تا با انتخاب یکی از خانه ها خانه های دیگرغیر فعال شوند

 

 

 

 

 

datalist

تا بحال دقت کرده اید برخی ورودی های متنی وقتی داخلشان شروع به تایپ کردن میکنید خود به خود مقادیری مرتبط  به شما پیشنهاد داده میشود

برای ساخت چنین ورودی هایی فقط کافیست یک input بسازید بدون type فقط یک نام به ان بدهید و یک لیست به ان معرفی کنید با list میتوانید id لیست دلخواه را به ان معرفی کنید

به این شکل

  <input list="listid" name="browser">

 

حال برای ساختن لیست از تگ datalist  استفاده میکنیم فقط باید id این تگ برابر با مقداری باشد که در تگ input به list داده اید

 

 

 

 

میبینید که هر دو مقدار برابر با listid قرار گرفته است هر نامه دیگری که خواستید به دلخواه میتوانید قرار دهید

مقادیر داخل لیست را هم با تگ option میتوانید مشخص کنید و value هر option مقدار داخل ان option را مشخص میکند

  <datalist id="listid">

     <option value="Firefox">

    <option value="Chrome">

    <option value="Opera">

    <option value="IE">

     <option value="Safari">

  </datalist>

 

انواع ورودی ها کدام اند؟

ورودی متن

برای ورودی های ساده از همان تگ input استفاده میکنیم و خاصیت type را به text تغییر میدهیم به این صورت

<input type="text" >

 

ورودی پسورد

 

برای ورودی های متنی که برای پسوردها استفاده میشوند و معمولا نمیخواهیم متن داخلش نمایش داده شود از type پسورد password استفاده میکنیم به این شکل

<input type="password">

 

 

 

 

 

ایمیل

برای ایمیل کافی است که type را به email تغییر دهید

<input type="email">

 

رنگ

میتوانید رنگ موردنظر را از کاربر دریافت کنید به این شکل

<input type="color">

 

 

انواع زمان (بیشتر برای تاریخ میلادی کاربرد دارند)

میتوانید یک ورودی برای گرفتن زمان بصورت ساعت دقیقه AM و PM از کاربر با TYPE مربوط به زمان یعنی time بگیرید به این صورت

<input type="time">

 

 

برای گرفتن سال ماه و روز میتوانید از این type یعنی date  استفاده کنید

<input type="date" name="date">

 

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

<input type="month" >

 

برای دریافت کردن شماره ی هفته از یک سال میتوانید از type مریبوط یعنی week استفاده کنید

<input type="week" >

 

 

عدد  

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

حتی میتوانید کمترین عدد ورودی و بیشترین عدد را هم در صورت لزوم مشخص کنید که مثلا کار بر نتواند کمتر از ۱ و بیشتر از ۱۲ را برای ماه های یک سال وارد کند یا حتی میتوانید

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

<input type="number" min="0" max="20" step="2">

 

 

 

رنج عددی (دکمه ی میله ای)

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

عدد دلخواه را درون بازه داده شده مشخص کنیم

باید از type مخصوص به اینکار یعنی range استفاده کنیم

تمام خواص نوع ورودی عددی را دارد همجون step و max و min پیشنهاد میشود روی کروم تست کنید

۰<input type="range" id="a" value="50" min="0" max="100">100

 

با این کد یک دکمه ی میله ای بوجود اوردید

که سمت چپ ان عدد صفر و سمت راست ان عدد ۱۰۰ است مقدار پیش فرض ان را ۵۰ قرار دادیم

یعنی نشانگر روی مرکز قرار میگیرد با حرکت ان به راست یا چپ مقدار ان تغییر میکند

اما ما این تغییر را نمیبینیم این امکان وجود دارد در HTML5 که مقادیر ورودی کار کنیم

در ادامه مقادیر همین دکمه ی میله ای را استفاده خواهیم کرد

 

 

 

کار با ورودی ها در HTML5

در HTML 5 این امکان وجود دارد که شما بر روی مقادیر کار کنید به مثال زیر توجه کنید

<form oninput="num.value=parseInt(a.value) ">

۰<input type="range" id="a" value="50" min="0" max="100">100

<br>

<output name="num" ></output>

</form>

 

کافیست در زمان تعریف فرم oninput را مانند مثال بالا استفاده کنید در خط اول کد مشاهده میکنید

مقدار output که در خط ماقبل آخر اورده شده است و name (یا id) ان در این مثال  num قرار داده شده برابر است

با مقدار ورودی در دکمه ی میله ای (range) با این دستور parseInt چون مقدار عددی است باید استفاده شود

oninput="num.value=parseInt(a.value) "

 

 

 a.value هم مشخص میکند مقدار a  که id یا name  برای input اول ماست باید گرفته شود حال با حرکت دادن نشانگر مقدار داخل ان در زیر نشانگر در همان لحظه چاپ میشود(در جایی که تگ output  قرار دارد)

مثال قبل را انجام دهید

حال اگر بخواهیم ۲ عدد را با هم جمع کنیم چه میکنیم؟

به صورت زیر عمل کنید

<form oninput="num.value=parseInt(a.value)+parseInt(b.value) ">

۰<input type="range" id="a" value="50" min="0" max="100">100

<br>

<input type="number" id="b" value="0" ><br>

<output id="num" ></output>

</form>

 

پیشنهاد میکنم مقاله ی جداول در html را مطالعه بفرمایید

درباره فرخ ابراهمی نژاد

فرخ ابراهمی نژاد
نویسنده‌ی کتاب yii framework برای برنامه نویسان php برنده‌ی دو دوره جشنواره‌ی وب ایران برای سایت linkpad.ir نویسنده, مدرس, مشاور و تولید کننده‌ی نرم افزار فرخ فوق‌لیسانس و لیسانس نرم‌افزار خوانده اما اعتقاد دارد برای موفقیت و رسیدن به درآمد وکسب‌وکار آنلاین نیاز به تحصیلات در دانشگاه ندارید.

این مطالب را نیز ببینید!

جداول در HTML از ۰ تا ۱۰۰ از کتاب خودم

جدول در HTML از ۰ تا ۱۰۰ تگ‌های اصلی یک جدول کدامند؟   <table> <tr> …

2 دیدگاه‌ها

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

    • فرخ ابراهمی نژاد

      سلام حتما
      ایده‌ی بسیار خوبیست
      حتما پیگیری میکنم
      که برای شما دوستان عزیز دسترسی باز هم راحت‌تر باشد
      بسیار پیشنهاد مفیدی دادید ممنونم

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *