دورهی نخبهی طراحی و برنامه نویسی وب
دوره ی آموزشی 0 تا 100 php و mysql
دورهی Web Design فشرده
آموزش برنامه نویسی برای نوجوانان دوره از راه دور و آنلاین
برای ورود به جشنواره
کلیک کنید
انواع ورودی در 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">کتاب آموزش 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 را مطالعه بفرمایید چون احتمالا موارد جدیدی را بتوانید یاد بگیرید
این مقالات نیز مربوط هستند
مطالب زیر را حتما مطالعه کنید
دوره های آموزشی مرتبط
کتاب نقشه گنج بیتکوین
مینی دوره قدم صفر برنامه نویسی
دوره خصوصی و نیم خصوصی – حضوری
دوره ی آموزشی 0 تا 100 php و mysql
آموزش برنامه نویسی برای نوجوانان دوره از راه دور و آنلاین
3 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
دیدگاهتان را بنویسید لغو پاسخ
برای نوشتن دیدگاه باید وارد بشوید.
اقا خیلی وبسایتتون عالیه
سلام
ممنون از آموزش های خوبتون فقط این آموزش هارو در انتهای هر صفحه به صورت فایل قرار بدید تا در صورت نیاز دانلود کنیم
سلام حتما
ایدهی بسیار خوبیست
حتما پیگیری میکنم
که برای شما دوستان عزیز دسترسی باز هم راحتتر باشد
بسیار پیشنهاد مفیدی دادید ممنونم