انواع ورودی در 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>

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

کادر متنی بزرگ (تکست باکس در html)   

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

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

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

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

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

</textarea>

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

دکمه ها            

برای ساخت دکمه ها به این 2  شکل معمولا عمل میکنیم یا دکمه با 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">کتاب آموزش&nbsp; 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>

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

گرفتن ورودی در html یا دریافت اطلاعات در html همانطور که میبینید بسیار ساده است با مطالعه ادامه این مقاله میتوانید به تمام ورودی ها مسلط شوید

خوب با قدرت ادامه دهید

ورودی متن

برای ورودی های ساده از همان تگ 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 استفاده کنید که کاربر نتواند جز عدد داخل ورودی قرار دهد

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

گام های بین اعداد را نیز مشخص کنید مثلا اگر خواست عدد را کاهش دهد یکی یکی یا 5 تا 5 تا کم شود کافیست اندازه ی هر کام را در خاصیت 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 است مقدار پیش فرض ان را 50 قرار دادیم

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

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

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

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

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

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

<input type="range" id="a" value="50" min="0" max="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  قرار دارد)

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

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

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

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

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

<br>

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

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

</form>

الزامی کردن ‍پر کردن یک فیلد یا فیلد * دار

با استفاده از دستور required میتوانید کاربر را مجبور کنید که حتما آن فیلد را پر کند و در صورت پر نشدن یک پیغام نمایش داده میشود

<input type="text" name="name" required placeholder="مثلا:فرخ ابراهیمی نژاد">

برای تغییر متن پیشفرض نمایش داده شده که به انگلیسی است از کد جاوا اسکریپت زیر استفاده کنید

<script>
document.addEventListener("DOMContentLoaded", function() {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("متن مورد نظر را اینجا وارد کنید");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})
</script>

این دو را به شما همراه عزیز سایت ابراهیمی نژاد پیشنهاد میکنم

دوره ی php این دوره با php و mysql اشنا میشوید و پروژه انجام میدهید از پایه تا پیشرفته و در کنار ان html css bootstrap نیز اشنا خواهید شد و پروژه خواهید زد

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

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

ورودی های فرم در بوت استرپ4

فرم ها در بوت استرپ4