منو

کنترول ها در html(قسمت دهم)

کنترول ها در html
لیست جلسات
DatoosTech img Course

قسمت اول

مقدمه html

DatoosTech img Course

قسمت دوم

چهارچوب اصلی صفحه های وب

DatoosTech img Course

قسمت سوم

تگ های فراخوانی

DatoosTech img Course

قسمت چهارم

خواص استاندارد تگ های HTML

DatoosTech img Course

قسمت پنجم

تگ های قاب بندی متن

DatoosTech img Course

قسمت ششم

ایجاد لینک در html

DatoosTech img Course

قسمت هفتم

ایجاد جدول در html

DatoosTech img Course

قسمت هشتم

لیست ها در html

DatoosTech img Course

قسمت نهم

فرم ها در html

DatoosTech img Course

قسمت دهم

کنترول ها در html

DatoosTech img Course

قسمت یازدهم

تصاویر در html

DatoosTech img Course

قسمت دوازدهم

استایل در html

DatoosTech img Course

قسمت سیزدهم

آدرس های اینترنتی (url)

DatoosTech img Course

قسمت چهاردهم

اسکریپت ها در Html

DatoosTech img Course

قسمت پانزدهم

تقسيم بندی صفحه و متن در Html

DatoosTech img Course

قسمت شانزدهم

رويدادهای HTML

DatoosTech img Course

قسمت هفدهم

کنترل های ذاتی HTML

DatoosTech img Course

قسمت هجدهم

خواص جدید کنترل ها در HTML 5

DatoosTech img Course

قسمت نوزدهم

اجرای مدیا در Html

DatoosTech img Course

قسمت بیستم

قابلیت های پیشرفته Html 5

DatoosTech img Course

قسمت بیست و یکم

طراحی اشیای گرافیکی

DatoosTech img Course

قسمت بیست و دوم

لیست تگ های Html

مطالب این جلسه

تگ <input> :

تگ < input > برای ساختن انواع کنترل های HTML از قبيل کادر های متن ، ليست های بازشو ، دکمه های فرمان و انتخابی و ... درون فرم ها استفاده می شود . نوع کنترل توسط خاصيت Type در درون تگ input مشخص می شود .

نکته :برای ارتباط با سرور تگ < input > بايد در درون تگ < form > استفاده شود .

<input type="نوع کنترول" name="یک نام منحصر به فرد">
خواص مهم تگ input
نام خاصيت نوع خاصيت شرح
accept  
يک ليست از مجموعه قابل قبول برای اين کنترل است ، که سرور پردازش کننده فرم آنها را قبول می کند .هر يک از اين مقادير به وسيله يک کاما از هم جدا می شوند .
alt Text
متن
يک متن جايگزين را در صورت عدم نمايش کنترل توسط مرورگر ، نمايش می دهد .
checked checked مشخص می کند که اگر کنترل مورد نظر يک دکمه انتخابي ( radio button يا chechbox ) باشد ، به صورت پيش فرض انتخاب شده باشد يا خير .
disabled disabled چنانچه مقدار اين خاصيت بر روی disabled تنظيم شده باشد ، آن کنترل غير فعال بوده و کاربر عملا امکان استفاده از آن را نخواهد داشت .
نکته : با کنترل از نوع hidden به کار نمی رود .
maxlength عدد
number
جنانچه کنترل مورد نظر يک کادر متن ( textbox ) باشد ، حداکثر تعداد کاراکترهايی که می توان در آن کنترل وارد کرد را تعيين می کند .
name name
نام
يک نام منحصر به فرد برای کنترل در فرم در صفحه تعيين می کند .
نکته : تعيين و مقدار دهی اين خاصيت برای کنترل های button , checkbox , file , hidden , image , password , text و radio ضرروی است .
readonly readonly در اين حالت کنترل به صورت فقط خواندنی در می آيد . در صورتی که مقدار اين خاصيت برابر readonly تنظيم شده باشد ، کاربر مجاز به تغيير متن درون کادرهای متني ( textbox ) و يا تغيير وضعيت دکمه های انتخابی ( checkbox يا radiobutton ) نخواهد بود .
size عدد
تعداد کارکتر
سايز و اندازه کاراکترهای کنترل را تعيين می کند .
src URL
مسير فايل
اين خاصيت فقط در مورد کنتزل image به کار رفته و مسير عکس کنترل را مشخص می کند .
type button
checkbox
file
hidden
image
password
radio
reset
submit
text
اين خاصيت نوع کنترل را تعيين می کند که يکی از اين موارد زير می تواند باشد :
button : دکمه فرمان .
checkbox : کادر يا دکمه گزينشی .
file : يک فايل خارجی مثل يک صفحه اينترنتی و ... .
hidden : يک کنترل مخفی دلخواه را بر روی صفحه ايجاد می کند .
image : يک کنترل برای نمايش عکس يا تصوير ايجاد می کند .
password : يک کادر متن است که به جای نمايش اعداد يا حروف وارد شده ، ستاره يا دايره نمايش می دهد تا اطلاعات ورودی توسط کاربر مخفی بماند .
radio : دکمه انتخابی .
reset : يک دکمه فرمان است که با کليک بر روی آن ، محتويات درون کليه کنترل های فرم پاک می شود .
submit : يک دکمه فرمان است که با کليک بر روی آن ، اطلاعات درون کنترل های فرم به مقصد ارسال می شود .
text : يک کادر متن ايجاد می کند .
value مقدار اين خاصيت برای کنترل های مختلف ، حالت های زير را دارد :
  • در دکمه فرمان ها ( button , reset buttons , submit buttons ) :
    متن روی دکمه فرمان را تعيين می کند .
  • در تصاوير ( images ) :
    مقداری که در هنگام ارسال اطلاعات فرم به جای مقدار عکس می نشيند .
  • در دکمه های انتخابی ( radio buttons , checkbox ) :
    مقداری است که در صورت انتخاب کردن ( تيک زدن ) دکمه انتخابی در هنگام ارسال اطلاعات فرم به عنوان مقدار آن کنترل ارسال می شود .
  • در کادرهای متن يا کنترل های مخفی( textbox , password , hidden ) :
    مقدار پيش فرض کنترل را تعيين می کند .
نکته : اين خاصيت با کنترل file به کار نمی رود .

نمونه ای از چند کنترول input

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<input type="text" name="txt">
<br>
<input type="submit" name="submit">
<br>
<input type="reset" name="reset">
<br>
<input type="radio" name="radio">
<br>
<input type="password" name="password">
<br>
<input type="hidden" name="hidden">
<br>
<input type="file" name="file">
<br>
<input type="checkbox" name="checkbox">
<br>
<input type="button" name="button">
</body>
</html>
پیش نمایش

اگر در فرم یا پیچ چند رادیو داشته باشیم میتوانیم با دادن یک نام هم نام در نیم آنها را با هم همگروه کنیم

<span> خانم : </span> <input type="radio" name="gender">
<span> آقا : </span> <input type="radio" name="gender">

TextBox ها ابزارهايی هستند برای دريافت اطلاعات از کاربران .

از تمام کنترل های CheckBox موجود در يک فرم می توان هر تعداد دلخواه را انتخاب کرد ، ولي از ميان کنترل های Radio Buuton در هر لحظه می توان فقط يک دکمه را انتخاب کرد و با انتخاب يک دکمه بقيه دکمه ها از حالت انتخاب خارج می شوند . در اين حالت بايد Name کنترل هايي که می خواهيد در يک گروه باشند را يکسان تعيين کرده ولی Value آنها با هم متفاوت باشند .

دکمه فرمان Submit برای ارسال اطلاعات به مقصد و دکمه فرمان Reset برای پاک کردن کليه کنترل های فرم به کار می رود .

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

کنترول های جدید در html5

کنترول <color> :

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

شکل کلی استفاده از این کنترل به صورت زیر است :

<input type="color">

در مثال زیر یک کنترل < input > از نوع "type="color ، را بر روی صفحه قرار داده ایم . به وسیله این کنترل یک رنگ دلخواه را انتخاب کرده و سپس با کلیک بر روی دکمه فرمان set color ، رنگ پس زمینه تگ div مثال را تغییر دهید :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<input type="color" id="inputColor">
<br>
<input type="button" id="btn1" value="set color" onclick="changeColor()" >
<div id="MyDiv"> Web Developer Web Site </div>
<script type="text/javascript">
function changeColor() {
document.getElementById("MyDiv").style.backgroundColor = document.getElementById("inputColor").value;
}
</script>
</body>
</html>
پیش نمایش

کنترول <date> :

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

شکل کلی استفاده از این کنترل به صورت زیر است :

<input type="date">

در مثال زیر یک کنترل < input > از نوع "type="date ، را بر روی صفحه قرار داده ایم . به وسیله این کنترل یک تاریخ دلخواه را انتخاب کرده و سپس با کلیک بر روی دکمه فرمان set date ، تاریخ انتحاب شده را بر روی صفحه نمایش دهید :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<input type="date" id="inputDate">
<br>
<input type="button" id="btn1" value="set date" onclick="changedate()">
<br>
<div id="MyDiv"> </div>
<script type="text/javascript">
function changedate() {
document.getElementById("MyDiv").innerHTML = "Time is : " + document.getElementById("inputDate").value;
}
</script>
</body>
</html>
پیش نمایش

کنترول <email> :

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

شکل کلی استفاده از این کنترل به صورت زیر است :

<input type="email">

در مثال زیر یک کنترل < input > از نوع "type="email ، را بر روی صفحه قرار داده ایم . به وسیله این کنترل آدرس ایمیل خود را وارد کرده و سپس با کلیک بر روی دکمه فرمان show email ، آن را بر روی صفحه نمایش دهید :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<input type="email" id="inputEmail">
<br>
<input type="button" id="btn1" value="show email" onclick="showEmail()">
<br>
<div id="MyDiv"> </div>
<script type="text/javascript">
function showEmail() {
document.getElementById("MyDiv").innerHTML = "Your Email is : " + document.getElementById("inputEmail").value;
}
</script>
</body>
</html>
پیش نمایش

کنترول <month> :

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

شکل کلی استفاده از این کنترل به صورت زیر است :

<input type="month">

در مثال زیر یک کنترل < input > از نوع "type="month، را بر روی صفحه قرار داده ایم . به وسیله این کنترل ماه مورد نظر خود را وارد کرده و سپس با کلیک بر روی دکمه فرمان show month ، آن را بر روی صفحه نمایش دهید :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<input type="Month" id="inputMonth">
<br>
<input type="button" id="btn1" value="show month" onclick="showMonth()">
<br>
<div id="MyDiv"> </div>
<script type="text/javascript">
function showMonth() {
document.getElementById("MyDiv").innerHTML = "Month is : " + document.getElementById("inputMonth").value;
}
</script>
</body>
</html>
پیش نمایش

کنترول <search> :

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

شکل کلی استفاده از این کنترل به صورت زیر است :

<input type="search">

در مثال زیر یک کنترل < input > از نوع "type="search ، را بر روی صفحه قرار داده ایم . به وسیله این کنترل می توانید عملیات جستجو را انجام دهید :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<input type="search" id="nputSearch">
<br>
<input type="submit" id="btn1" value="Search">
</body>
</html>
پیش نمایش

کنترول <number> :

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

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

شکل کلی استفاده از این کنترل به صورت زیر است :

<input type="number" min="value" max="value" value="value" >

در مثال زیر یک کنترل < input > از نوع "type="range، را بر روی صفحه قرار داده ایم . به وسیله این کنترل باید عددی بین 1 و 10 را انتخاب نمایید . مقادیر بزرگتر و یا کوچکتر را کنترل error داده و قبول نمی کند ..سپس با کلیک بر روی دکمه فرمان show number ، می توانید عدد انتخاب شده را بر روی صفحه نمایش دهید ( مقدار پیش فرض کنترل 5 است ) :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<input type="number" id="inputNumber" min="1" max="10" value="5">
<br>
<input type="button" id="btn1" value="show namber" onclick="showNumber()">
<br>
<div id="MyDiv"> </div>
<script type="text/javascript">
function showNumber() {
document.getElementById("MyDiv").innerHTML = "Number is: " + document.getElementById("inputNumber").value;
}
</script>
</body>
</html>
پیش نمایش

کنترول <time> :

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

شکل کلی استفاده از این کنترل به صورت زیر است :

<input type="time" >

در مثال زیر یک کنترل < input > از نوع "type="time ، را بر روی صفحه قرار داده ایم . به وسیله این کنترل یک زمان دلخواه را انتخاب کرده و سپس با کلیک بر روی دکمه فرمان set time ، تاریخ انتحاب شده را بر روی صفحه نمایش دهید :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<input type="time" id="inputTime">
<br>
<input type="button" id="btn1" value="set time" onclick="changeTime()">
<br>
<div id="MyDiv"> </div>
<script type="text/javascript">
function changeTime() {
document.getElementById("MyDiv").innerHTML = "Time is: " + document.getElementById("inputTime").value;
}
</script>
</body>
</html>
پیش نمایش

کنترول <url> :

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

شکل کلی استفاده از این کنترل به صورت زیر است :

<input type="url" >

در مثال زیر یک کنترل < input > از نوع "type="url، را بر روی صفحه قرار داده ایم . بایستی در کادر متن کنترل یک آدرس اینترنتی ، با فرمت صحیح را وارد نماید . در صورت وارد کردن مقدار اشتباه کنترل error می دهد :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان سایت</title>
</head>
<body>
<input type="url" id="inputUrl">
<br>
<input type="button" id="btn1" value="show url" onclick="showUrl()">
<br>
<div id="MyDiv"> </div>
<script type="text/javascript">
function showUrl() {
document.getElementById("MyDiv").innerHTML = "Url is: " + document.getElementById("inputUrl").value;
}
</script>
</body>
</html>
پیش نمایش