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

خصیصه های ورودی های فرم – بخش اول

خصیصه های ورودی های فرم – بخش اول

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

خصیصه های ورودی های فرم

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

خصیصه value

در مثال هایی که تا کنون با هم بررسی کردیم دیدیم که در اکثر ورودی ها خصیصه value وجود دارد که با استفاده از آن مقداری پیش فرض را می توان برای ورودی ها تعیین کرد.

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

آموزش HTML

خصیصه readonly

این خصیصه ورودی هایی را ایجاد می کند که مقدار آنها از پیش تعیین شده است و قابل تغییر نیستند. توجه کنید که در این ورودی ها می توان کلیک کرد ولی مقدار ورودی تغییر داده نمی شود و به همان صورت برای سرور ارسال می گردد.

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

آموزش HTML

خصیصه disabled

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

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

آموزش HTML

در مثال بالا اگر بر روی دکمه ارسال کلیک کنید، مقادیر نام ( که خودتان باید تعیین کنید ) و مقدار نام خانوادگی ( که غیر قابل تغییر است ) در آدرس بار نمایش داده می شوند. پس برای سرور ارسال می شوند. اما مقدار ورودی disabled نه در آدرس بار نمایش داده می شود و نه برای سرور ارسال می شود.

خصیصه size

وقتی اندازه ای برای کادر ورودی ها تعیین نشود، مرورگر اندازه پیش فرضی را برای عرض ورودی ها در نظر می گیرد. که با استفاده از خصیصه size می توان عرض ورودی ها را تغییر داد. مقدار این خصیصه مقدار عددی است و نیاز به تعیین واحد ندارد چرا که واحد آن کاراکتر است. بنابراین مقدار مثلا 10 معادل 10 کاراکتر است.

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

آموزش HTML

خصیصه maxlength

خصیصه maxlength برای ایجاد محدودیت تعداد کاراکترهای قابل تایپ در یک ورودی به کار می رود. این خصیصه بیشترین تعداد کاراکتری را که کاربر می تواند در ورودی تایپ کند را تعیین می کند. در مثال زیر، در ورودی نام حداکثر 10 کاراکتر و در ورودی نام خانوادگی حداکثر 25 کاراکتر را می توان تایپ کرد.

وقتی که خصیصه size به کار برده شد، مرورگرها هیچ اطلاعاتی را در مورد آن به کاربر نمایش نمی دهد. پیغام محدودیت های ورودی ها را از طریق اسکریپت ها ( جاوا اسکریپت و یا PHP )  به کاربر نمایش می دهیم.

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

آموزش HTML

برای امنیت بیشتر، بهتر است محدودیت ورودی ها را در سمت سرور نیز چک کنیم. این کار را با یک زبان سمت سرور انجام می دهیم که در آموزش های PHP به این موضوع نیز خواهیم پرداخت.

حال به سراغ خصیصه های افزوده شده به HTML5 میرویم.

خصیصه های اضافه شده به فرم در HTML5

خصیصه هایی که به HTML5 اضافه شده اند عبارتند از:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

خصیصه های بالا را برای ورودی ها می توان به کار برد. همچنین خصیصه های زیر نیز برای تگ <form>  به کار می روند:

  • autocomplete
  • novalidate

حال به بررسی این خصیصه ها می پردازیم.

خصیصه autocomplete

autocomplete خصیصه ای برای تگ <form>  و ورودی های فرم است و مقادیری که این خصیصه می گیرد عبارت است از on و off.

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

توجه کنید که این خصیصه با مقدار on یا off می تواند هم برای تگ <form>  و هم برای ورودی های فرم به کار رود. یعنی اگر برای تگ <form>  مقدار on داشته باشد، می تواند برای یک ورودی خاص مقدار off داشته باشد و برعکس؛ برای یک ورودی مقدار on داشته باشد و برای تگ <form>  مقدار off.

در بعضی از مرورگرها باید قابلیت autocomplete فعال باشد تا این خصیصه به درستی کار کند. ورودی هایی که این خصیصه را می توانند داشته باشند عبارتند از: ورودی متن، جستجو، URL، تلفن، ای میل، رمز عبور، انتخاب کننده بازه ای، رنگ و انتخاب تاریخ.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<form action="" autocomplete="on">
			 نام : <input type="text" name="firstname" value="نام" size="20" maxlength="10"> <br> <br>
			 نام خانوادگی : <input type="text" name="lastname" value="نام خانوادگی" size="30" maxlength="25"> <br> <br>
			 email : <input type="email" name="email" value="your email" autocomplete="off" maxlength="50"> <br> <br>
			<input type="submit" value="ارسال"> 
		</form>
	</body>
</html>

آموزش html

توجه کنید که در مثال بالا مقدار خصیصه autocomplete برای تگ فرم on و برای ورودی ای میل، off می باشد. اگر یک بار فرم را پر کنید و بعد صفحه را ببندید و باز کنید و مجددا فرم را پر کنید، خواهید دید که مقداری را که از قبل برای ورودی های نام و نام خانوادگی وارد کرده اید، با دو بار کلیک درون ورودی و یا تایپ حرف اول متن هایی که وارد کرده بودید، برایتان نمایش داده می شوند.

خصیصه novalidate

خصیصه novalidate که برای تگ <form>  نوشته می شود، درست و مانع از اعتبار سنجی ورودی ها توسط مرورگر می شود.

می دانید که یک ای میل دارای الگویی به این شکل است: yourmail@domine.com . مرورگرها، از این الگو پیروی می کنند و اگر ای میل وارد شده مطابق این الگو نباشد، پیغام اخطار را به کاربر نمایش می دهد. حال وقتی که این خصیصه برای فرم فعال باشد، صحت ای میل وارد شده  ( و یا هر ورودی دیگر ) بررسی نمی شود.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<form action="" autocomplete="on">
			<fieldset>
			 <legend> فرم شماره 1 </legend>
			 	<p> در این فرم درست و غلط بودن ورودی ها چک می شود </p>

				 نام : <input type="text" name="firstname" value="نام" size="20" maxlength="10"> <br> <br>
				 نام خانوادگی : <input type="text" name="lastname" value="نام خانوادگی" size="30" maxlength="25"> <br> <br>
				 email : <input type="email" name="email" value="your email" autocomplete="off" maxlength="50"> <br> <br>
				<input type="submit" value="ارسال"> 
			</fieldset> 
		</form>
		<br> <br>
		<form action="" autocomplete="on" novalidate="">
			<fieldset>
			 <legend> فرم شماره 2 </legend>
			 	<p> در این فرم درست و غلط بودن ورودی ها چک نمی شود </p>
				 نام : <input type="text" name="firstname" value="نام" size="20" maxlength="10"> <br> <br>
				 نام خانوادگی : <input type="text" name="lastname" value="نام خانوادگی" size="30" maxlength="25"> <br> <br>
				 email : <input type="email" name="email" value="your email" autocomplete="off" maxlength="50"> <br> <br>
				<input type="submit" value="ارسال"> 
			</fieldset> 
		</form>
	</body>
</html>

آموزش html

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

خصیصه autofocus

این خصیصه برای ورودی نوشته می شود که می خواهیم با بارگذاری صفحه حاوی فرم، نشانگر در آن ورودی قرار گیرد.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<form action="" autocomplete="on">
			<fieldset>
			 <legend> فرم شماره 1 </legend>
			 	<p> در فرم زیری پوینتر تایپ متن در ورودی نام قرار خواهد گرفت. </p>

				 نام : <input type="text" name="firstname" value="نام" size="20" maxlength="10" autofocus> <br> <br>
				 نام خانوادگی : <input type="text" name="lastname" value="نام خانوادگی" size="30" maxlength="25"> <br> <br>
				 email : <input type="email" name="email" value="your email" autocomplete="off" maxlength="50"> <br> <br>
				<input type="submit" value="ارسال"> 
			</fieldset> 
		</form>
	</body>
</html>

آموزش html

خصیصه form

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

نحوه استفاده بدین شکل است که برای هر فرم یک id تعریف می کنیم. حال برای ورودی یک فرم که خارج از آن است، خصیصه form را می نویسیم و مقدار آن را شناسه ای که برای فرم اصلی تعیین کرده ایم می دهیم. توجه کنید که ورودی که خارج از فرم است، نیازی به تگ <form>  ندارد. برای درک بهتر مثال زیر را بررسی می کنیم.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<form action="" autocomplete="on" id="form1">
			<fieldset>
			 <legend> فرم شماره 1 </legend>
			 	<p> در این فرم درست و غلط بودن ورودی ها چک می شود </p>

				 نام : <input type="text" name="firstname" value="نام" size="20" maxlength="10"> <br> <br>
				 نام خانوادگی : <input type="text" name="lastname" value="نام خانوادگی" size="30" maxlength="25"> <br> <br>
				 email : <input type="email" name="email" value="your email" autocomplete="off" maxlength="50"> <br> <br>
				<input type="submit" value="ارسال"> 
			</fieldset> 
		</form>
		<br> <br>
		<form action="" autocomplete="on" id="form2" novalidate>
			<fieldset>
			 <legend> فرم شماره 2 </legend>
			 	<p> در این فرم درست و غلط بودن ورودی ها چک نمی شود </p>
				 نام : <input type="text" name="firstname" value="نام" size="20" maxlength="10"> <br> <br>
				 نام خانوادگی : <input type="text" name="lastname" value="نام خانوادگی" size="30" maxlength="25"> <br> <br>
				 email : <input type="email" name="email" value="your email" autocomplete="off" maxlength="50"> <br> <br>
				<input type="submit" value="ارسال"> 
			</fieldset> 
		</form> <br> <br> <hr>
		<p> ورودی زیر مربوط به فرم 1 است </p> 
		سن : <input type="text" name="f1" value="مربوط به فرم 1"> <hr>
		<p> ورودی زیر مربوط به فرم 2 است </p>
		 : سن<input type="text" name="f2" value="مربوط به فرم 2">
	</body>
</html>

آموزش html

این خصیصه در مرورگر اینترنت اکسپلورر پشتیبانی نمی شود.

دیگر خصیصه ها را در جلسه پانزدهم آموزش HTML بررسی خواهیم نمود. با ما همراه باشید.

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