طراحی سایت و طراحی وب سایت حرفه ای را با گروه سایت سازان تجربه کنید !
02188471521 –– 02140881038 –– 09120199386

خصیصه type و مقادیر آن

خصیصه type و مقادیر آن

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

وردی های فرم

در جلسه دوازدهم آموزش HTML  دیدیم که یک فرم می تواند چندین ورودی داشته باشد که نوع ورودی را مقدار خصیصه type تعیین می کند. در این جلسه با مقادیری که خصیصه type می تواند اختیار کند آشنا می شویم.

ورودی متن

وقتی که می خواهیم ورودی را در فرم قرار دهیم که با چند کلمه پر شود، مانند ورودی های نام، نام خانوادگی، شهر و … مقدار خصیصه type را text می دهیم. در این صورت ورودی ایجاد می شود که می توان درون آن چند کلمه را تایپ کرد.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<form>
			: نام <br>
			<input type="text" name="firstname">
			<br>
			: نام خانوادگی <br>
			<input type="text" name="lastname">
			<br> <br>
			<input type="submit" value="ارسال">
		</form>
	</body>
</html>

آموزش HTML | آموزش HTML5

ورودی رمز

input type=”password”  ورودی رمز در یک فرم را ایجاد می کند. کاراکترهایی که در که در این ورودی تایپ می شوند، به صورت دایره های توپر مشکی و یا ستاره نمایش داده می شوند.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<form action="">
			: نام کاربری<br>
			<input type="text" name="userid">
			<br>
			: رمز عبور<br>
			<input type="password" name="psw">
			<br> <br>
			<input type="submit" value="ارسال">
		</form>
	</body>
</html>

آموزش HTML | آموزش HTML5

با کلیک بر روی دکمه ارسال، مقادیر نام کاربری و رمز عبور را که در فرم وارد می کنید، در آدرس بار نمایش داده خواهند شد چون متد پیش فرض ارسال، GET است.

دکمه تایید و ارسال

همانطور که می دانید input type=”submit”  دکمه تایید و ارسال را ایجاد می کند و کلمه ای را که می خواهیم بر روی دکمه نوشته شود را در خصیصه value می نویسیم.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<form action="">
			: نام <br>
			<input type="text" name="userid" value="نام">
			<br>
			: نام خانوادگی <br>
			<input type="text" name="psw" value="نام خانوادگی">
			<br> <br>
			<input type="submit" value="ارسال">
		</form>
	</body>
</html>

آموزش HTML | آموزش HTML5

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<form action="">
			: نام <br>
			<input type="text" name="userid" value="نام">
			<br>
			: نام خانوادگی <br>
			<input type="text" name="psw" value="نام خانوادگی">
			<br> <br>
			<input type="submit">
		</form>
	</body>
</html>

آموزش HTML | آموزش HTML5

دکمه بازنشانی

مقدار reset برای خصیصه type دکمه ای را ایجاد می کند که با کلیک بر روی آن تمام مقادیر ورودی ها حذف می شود و به مقادیر پیش فرض باز نشانی می شوند.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<form action="">
			: نام <br>
			<input type="text" name="userid" value="نام">
			<br>
			: نام خانوادگی <br>
			<input type="text" name="psw" value="نام خانوادگی">
			<br> <br>
			<input type="submit" value="ارسال">
			<input type="reset" value="حذف">
		</form>
	</body>
</html>

آموزش HTML | آموزش HTML5

دکمه رادیویی

کاربرد دکمه رادیویی زمانی است که می خواهیم کاربر از بین چند گزینه فقط یک گزینه را انتخاب کند. همان طور که دیدید type=”radio”  دکمه رادیویی را ایجاد می کند. علاوه بر این خصیصه، name و value را هم باید برای دکمه های رادیویی تنظیم کنیم.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<form action="">
			<input type="radio" name="name" value="any"> مورد 1
			<input type="radio" name="name" value="any"> مورد 2
			<input type="radio" name="name" value="any"> مورد 3
			<input type="radio" name="name" value="any"> مورد 4
		</form>
	</body>
</html>

آموزش HTML | آموزش HTML5

دکمه انتخاب

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<form action="">
			<input type="checkbox" name="name1" value="any"> مورد 1
			<input type="checkbox" name="name2" value="any"> مورد 2
			<input type="checkbox" name="name3" value="any"> مورد 3
			<input type="checkbox" name="name4" value="any"> مورد 4
		</form>
	</body>
</html>

آموزش HTML | آموزش HTML5

دکمه

برای ارسال داده های فرم از دکمه ها استفاده می کنیم که به دو صورت ایجاد می شوند. می توان از زوج تگ <button>  استفاده کرد و یا <input type=”button”>  را به کار ببریم.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<form action=" ">
<input type="button" onclick="alert(' hello friend!!! ' ) " value="کلیک کنید">
</form>
	</body>
</html>

آموزش HTML | آموزش HTML5

در مورد خصیصه onclick توضیح اینکه یک رویداد است و به مرورگر می گوید با کلیک بر روی دکمه عبارت درون alert را نمایش بده که پنجره اخطار مروگر باز می شود عبارت نمایش داده می شود. با رویدادها در جاوااسکریپت آشنا خواهیم شد.

ورودی های افزوده شده به فرم ها در HTML5

ورودی های مختلفی در HTML5 اضافه شده است که در ادامه این بخش به آن ها می پردازیم. اگر مرورگر از ورودی خاصی پشتیبانی نکند، آن را ورودی متن در نظر می گیرد.

 ورودی عدد

input type=”number”  ورودی انتخاب عدد را در فرم ایجاد می کند. دو خصیصه را دیگر را می توان برای ورودی عدد به کار برد که عبارتند از max که بیشتر عدد مجاز و min که کمترین عدد مجاز را تعیین می کند.

این ورودی در تمام مرورگرها پشتیبانی می شود.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> عنوان صفحه </title>
</head>
<body>
 <form action="">
	 <p> ورودی زیر مقدار از پیش تعیین شده ندارد </p>
	 <br>
	 <input type="number" name="name" max="50" min="0"> 
	 <br> <br>
	 <p> در وردی زیر مقدار اولیه 25 تعیین شده است </p>
	 <input type="number" name="name" max="50" min="0" value="25">
 </form>
</body>
</html>

آموزش HTML | آموزش HTML5

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<p> در فیلد زیر اعداد 5 تا 5 تا کم و یا زیاد می شوند </p>
		<form action="">
			<input type="number" name="name" min="0" max="200" step="5" value="100">
		</form>
	</body>
</html>

آموزش HTML | آموزش HTML5

ورودی انتخاب تاریخ

type=”date”  ورودی انتخاب تاریخ را ایجاد می کند. این ورودی در مروگر فایرفاکس پشتیبانی نمی شود.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<form>
		  Birthday:
		  <input type="date" name="bday">
		  <input type="submit">
		</form>
	</body>
</html>

آموزش HTML | آموزش HTML5

برای محدود کردن تاریخ از خصیصه های max و min استفاده می کنیم.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<form>
		  Birthday:
		  <input type="date" name="bday" min="2000-01-01" max="2017-12-31">
		  <input type="submit">
		</form>

	</body>
</html>

آموزش HTML | آموزش HTML5

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

 ورودی انتخاب رنگ

<input type=”color”>  ورودی انتخاب رنگ را ایجاد می کند. نحوه نمایش پنجره انتخاب رنگ به مرورگر بستگی دارد.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<p> با کلیک بر روی دکمه زیر، پنجره انتخاب رنگ باز می شود. کدهای هر رنگ نیز در اختیار کاربر قرار می گرد. </p> 
		<br> <br>
		<form action="">
			<input type="color" name="favcol" name="favcol">
		</form>
	</body>
</html>

آموزش HTML | آموزش HTML5

انتخابگر محدوده ای

input type=”range”  ورودی را برای انتخاب مقداری عددی در یک بازه تعیین شده و توسط یک دکمه لغزنده را ایجاد می کند. بازه پیش فرض عدد 0 تا 100 است که می توان این بازه را به دلخواه تغییر داد. با خصیصه های max ، min ، step و value آشنا شدیم که در این ورودی نیز به کار می روند.

max بیشترین عددی را که می توان انتخاب کرد را تعیین می کند.

min کمترین عددی که می توان انتخاب کرد را تعیین می کند.

step برای تعیین میزان افزایش یا کاهش با جابجا کردن دکمه.

valueمقدار اولیه ورودی را تعیین می کند.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8"> 
 <title> عنوان صفحه </title>
 <style>
     body {direction: rtl;}
 </style>
</head>
<body>
 <p> با جا بجایی دکمه به سمت چپ و راست مقداری عددی انتخاب می شود که با کلیک بر روی دکمه ارسال، این مقدار را در آدرس بار مرورگر خواهید دید.</p> 
 <br> <br>
 <form action="">
  <input type="range" name="point" max="50" min="1" value="25" step="3"> <br>
  <input type="submit" value="ارسال">
 </form>
</body>
</html>
</html>

آموزش HTML | آموزش HTML5

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

input type=”month”  ورودی را ایجاد می کند که با آن می توان فقط ماه و سال را انتخاب کرد.

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<p> با کلیک در ورودی زیر، منویی باز می شود که می توان ماه و سال را انتخاب کرد. دکمه های کوچک درون کادر برای عقب و یا جلو کردن ماه و یا سال است. همچنین می توان با کلیک بر روی دکمه مثلثی شکل بزرگ درون کادر، منو را باز کرد و تاریخ مورد نظر را انتخاب کرد. </p> 
		<br> <br>
		<form action="">
			<input type="month" name="bdmonth" > <br>
			<input type="submit" value="ارسال">
		</form>
	</body>
</html>

آموزش HTML | آموزش HTML5

ورودی انتخاب هفته و سال

ورودی با خصیصه type=”week”  به کاربر این امکان را می دهد که شماره هفته و سال را انتخاب کند. مثلا هفته 25 سال 2015. نحوه نمایش منو انتخاب تاریخ به مرورگر بستگی دارد.

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<p> با کلیک در ورودی زیر، منویی باز می شود که می توان هفته و سال را انتخاب کرد. دکمه های کوچک درون کادر برای عقب و یا جلو کردن هفته و یا سال است. همچنین می توان با کلیک بر روی دکمه مثلثی شکل بزرگ درون کادر، منو را باز کرد و تاریخ مورد نظر را انتخاب کرد. </p> 
		<br> <br>
		<form action="">
			<input type="week" name="week_year" > <br>
			<input type="submit" value="ارسال">
		</form>
	</body>
</html>

آموزش HTML | آموزش HTML5

ورودی زمان

مقدار time ورودی زمان را ایجاد می کند که به کاربر این امکان را می دهد که ساعت و دقیقه را بدون توجه به ناحیه زمانی تعیین کند.

در فایرفاکس و اکسپلورر نسخه 12 و قدیمی تر این ورودی پشتیبانی نمی شود.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<p> در کادر زیر کلیک کنید و ساعت و دقیقه را تغییر داده و بر روی دکمه ارسال کلیک کنید و آدرس بار را مشاهده نمایید. قسمت سوم برای تعیین صبح و یا بعد از ظهر است </p> 
		<br> <br>
		<form action="">
			<input type="time" name="time" > <br> <br>
			<input type="submit" value="ارسال">
		</form>
	</body>
</html>

آموزش HTML | آموزش HTML5

ورودی دیگری با مقدار datetime-local برای خصیصه type وجود دارد که ورودی را ایجاد می کند که در آن همزمان تاریخ و ساعت انتخاب می شوند.

این ورودی در اینترنت اکسپلورر 12 و قدیمی تر و همچنین فایر فاکس پشتیبانی نمی شود.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<p> در فیلد زیر می توانید هم زمان و هم تاریخ را انتخاب و همزمان برای سرور ارسال کنید.  </p> 
		<br> <br>
		<form action="">
			<input type="datetime-local" name="datetime" > <br> <br>
			<input type="submit" value="ارسال">
		</form>
	</body>
</html>

آموزش HTML | آموزش HTML5

ورودی ای میل

input type=”email”  ورودی ای میل را ایجاد می کند که بعضی از مرورگر ها ای میل وارد شده را اعتبار سنجی می کنند. بعضی از تلفن های هوشمند بر روی صفحه کلید دکمه .com را برای تکمیل آدرس های ای میل دارند.

این ورودی در مرورگر سافاری پشتیبانی نمی شود.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
 		<style>
     		  body {direction: rtl;}
 		</style>
	</head>
	<body>
		<p> در ورودی زیر آدرس ای میل را وارد کنید. یک بار هم به آدرس ایمیل را بدون دامنه و @ وارد کنید و دکمه ارسال را کلیک کنید.  </p> 
		<br> <br>
		<form action="">
			<input type="email" name="email" > <br> <br>
			<input type="submit" value="ارسال">
		</form>
	</body>
</html>

آموزش HTML | آموزش HTML5

ورودی جستجو

input type=”search”  ورودی جستجو را ایجاد می کند.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<p> در ورودی زیر متنی را برای جستجو وارد نمایید. </p> 
		<br> <br>
		<form action="">
			<input type="search" name="searched" > <br> <br>
			<input type="submit" value="جستجو">
		</form>
	</body>
</html>

آموزش HTML | آموزش HTML5

ورودی دریافت URL

Type=”url”  خصیصه ایست که ورودی را برای دریافت یک آدرس URL از کاربر ایجاد می کند. همانند ورودی ای میل، مرورگرها صحیح و یا غلط بودن آدرس را بررسی کنند. اگر آدرس URL را مطابق الگوی آن وارد نکنید، مرورگر پیغام خطا می دهد.

یادآوری: یک آدرس URL بدین صورت است : https://www.yourdomine .

این ورودی در مرورگر سافاری پشتیبانی نمی شود

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<p> در فیلد زیر یک آدرس کامل را وارد کنید و دکمه ارسال را کلیک کنید و آدرس بار را مشاهده نمایید </p> 
		<br> <br>
		<form action="">
			<input type="url" name="homepage"> <br> <br>
			<input type="submit" value="ارسال">
		</form>
	</body>
</html>

آموزش HTML | آموزش HTML5

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

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

دیدگاه ‏خود را بنویسید