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

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

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

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

خصیصه formaction

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

در مثال زیر یک فرم داریم که دارای دو دکمه است. دکمه 1 فرم را برای آدرسی که در خصیصه action در تگ <form>  تعیین کرده ایم می فرستد و دکمه 2 فرم را برای آدرس تعیین شده در خصیصه formaction ارسال خواهد کرد.

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

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

آموزش html

خصیصه formenctype

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

روش دیگری برای رمز نگاری داریم بدین ترتیب که از خصیصه enctype در تگ <form>  استفاده کنیم. تفاوت این دو روش در این است که خصیصه formenctype در تگ دکمه تایید و ارسال نوشته می شود ولی خصیصه enctype در تگ <form>  نوشته می شود و اگر همزمان به کار برده شوند، خصیصه formenctype اثر خصیصه enctype را از بین می برد.

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<p> در فرم زیر هر دکمه فرم را با روشی خاص رمز نگاری می کند. </p>
		<form action="" method="post">
			نام : <input type="text" name="fname" value="نام"> <br> <br>
			نام خانوادگی : <input type="text" name="lname" value="نام خانوادگی"> <br> <br>
			<input type="submit" value="دکمه1">
			<input type="submit" formenctype="multipart/form-data" value="دکمه2">
		</form>
	</body>
</html>

آموزش html

خصیصه formmethod

خصیصه formmethod برای تعیین متد ارسال اطلاعات فرم است و در تگی که دکمه تایید و ارسال را می سازد به کار می رود. تاکنون متد ارسال را با استفاده از خصیصه method در تگ <form>  تعیین می کردیم زمانی که این دوخصیصه با هم استفاده می شوند، خصیصه formmethod خصیصه method را بی اثر می کند و همراه آن خصیصه formaction به کار می رود.

در مثال زیر دکمه 1 فرم را با متد GET که در تگ <form>  تعیین شده است ارسال می کند و دکمه 2 فرم را با متد post ارسال می کند.

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<p> در فرم زیر هر دکمه فرم را با متد متفاوت رمز نگاری و ارسال می کند  </p>
		<form action="" method=" GET ">
			نام : <input type="text" name="fname" value="نام"> <br> <br>
			نام خانوادگی : <input type="text" name="lname" value="نام خانوادگی"> <br> <br>
			<input type="submit" value="دکمه1">
			<input type="submit" formaction="#" formmethod="post" value="دکمه2">
		</form>
	</body>
</html>

آموزش html

خصیصه formnovalidate

این خصیصه اثر خصیصه novalidate در تگ <form>  را از بین می برد. این خصیصه را برای دکمه تایید و ارسال می نویسیم در حالی که خصیصه novalidate را برای تگ <form>  نوشته می شود.

در مثال زیر دکمه 1 فرم را با بررسی اطلاعات ارسال می کند و اگر ای میل نامعتبر وارد شود فرم را ارسال نمی کند. در مقابل دکمه 2 فرم را بدون بررسی ارسال خواهد کرد.

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<p> دکمه 1 فرم را ابتدا اعتبار سنجی و بعد ارسال می کند و دکمه 2 فرم را بدون اعتبار سنجی ارسال می کند </p>
		<form action="" method="get">
			نام : <input type="text" name="fname" value="نام"> <br> <br>
			نام خانوادگی : <input type="text" name="lname" value="نام خانوادگی"> <br> <br>
			e-mail : <input type="email" name="mail" value="your email"> <br> <br>
			<input type="submit" value="دکمه1">
			<input type="submit" formnovalidate value="دکمه2">
		</form>
	</body>
</html>

آموزش html

خصیصه formtarget

با خصیصه target برای یک لینک آشنا هستیم و می دانیم که این خصیصه را می توان با دو مقدار _blank و _self برای لینک ها به کار برد تا لینک در برگه جدید و یا در همان برگه باز شود.

بعد از ارسال هر فرم، پاسخی از سمت سرور برای کاربر ارسال می شود. این پاسخ را می توان در یک برگه جدید و یا در همان برگه به کاربر نمایش داد. برای تعیین برگه نمایش پیغام، در ورودی دکمه تایید و ارسال خصیصه formtarget را نوشته و مقدار _blank یا _self را برای آن تنظیم می کنیم. این خصیصه، خصیصه target در تگ <form>  را بی اثر خواهد کرد.

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> عنوان صفحه </title>
    </head>
    <body style="direction: rtl;">
        <p>با کلیک بر روی دکمه 2 پنجره جدید باز می شود</p>
        <form action="" method="get">
            نام : <input type="text" name="fname" value="نام"> <br> <br>
            نام خانوادگی : <input type="text" name="lname" value="نام خانوادگی"> <br> <br>
            e-mail : <input type="email" name="mail" value="your email"> <br> <br>
            <input type="submit" value="دکمه1">
            <input type="submit" formtarget="_blank" value="دکمه2">
        </form>
    </body>
</html>

آموزش html

خصیصه های height و width

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

نحوه قرار دادن عکس جهت جایگزینی برای دکمه ارسال بدین ترتیب است که در تگ input مقدار خصیصه type را image داده و خصیصه های src، alt، width و height را برای آن می نویسیم.

در مثال زیر وقتی فرم را پر کردید بر روی عکس کلیک کنید و آدرس بار مرورگر را مشاهده کنید. علاوه بر اطلاعات وارد شده در فرم، مقدار x و y را مشاهده خواهید.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<p> با کلیک بر روی عکس مقادیری را که در فرم وارد می کنید همرا با مقادیر اندازه عکس نمایش داده می شوند. توجه کنید که این مقادیر که در آدرس بار نمایش داده می شوند، با مقادیری که شما تعیین کرده اید برابر نیست </p>
		<form action="" method="get">
			نام : <input type="text" name="fname" value="نام"> <br> <br>
			نام خانوادگی : <input type="text" name="lname" value="نام خانوادگی"> <br> <br>
			e-mail : <input type="email" name="mail" value="your email"> <br> <br>
			<input type="image" src="images/sitesazan.jpg" width="55" height="45" alt="ارسال"> 
		</form>
	</body>
</html>

آموزش html

خصیصه list

همانطور که در جلسه دوازدهم آموزش HTML دیدیم، این خصیصه برای اتصال ورودی به لیست کشویی ( که با المان <datalist>  ایجاد می شد) به کار میرود.

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		
		<form action="" method="get">
			نام : <input type="text" name="fname" value="نام"> <br> <br>
			نام خانوادگی : <input type="text" name="lname" value="نام خانوادگی"> <br> <br>
			e-mail : <input type="email" name="mail" value="your email"> <br> <br>
			لیست کشویی : <input list="name" name="name"> 
			<datalist id="name">
				<option value="مورد 1">
				<option value="مورد 2">
				<option value="مورد 3">
				<option value="مورد 4">
				<option value="مورد 5">
			</datalist> <br> <br>
			<input type="submit" value="ارسال">
		</form>
	</body>
</html>

آموزش html

خصیصه های max و min

خصیصه های min و max برای تعیین بیشترین و کمترین مقدار مجاز برای ورودی هایی است که مقدار خصیصه type آنها عبارت است از: number، range، date، datetime-local، month، time و week.

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		
		<form action="" method="get">
			نام : <input type="text" name="fname" value="نام"> <br> <br>
			نام خانوادگی : <input type="text" name="lname" value="نام خانوادگی"> <br> <br>
			e-mail : <input type="email" name="mail" value="your email"> <br> <br>
			تاریخ تولد : <input type="date" value="تاریخ تولد" max="2020-12-31" min="2000-01-01"> <br> <br>
			مقداری بین 1 تا 20 انتخاب نمایید : <input type="number" name="numb" value="10" max="20" min="1"> <br> <br>
			<input type="submit" value="ارسال">
		</form>
		<p> در این آموزشها تاریخ تولد را به می لادی انتخاب کنید. در آموزشهای بعدی راجع به نحوه قرار دادن تاریخ و تقویم شمسی صحبت خواهیم کرد </p>
	</body>
</html>

آموزش html

خصیصه multiple

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

همراه با ورودی های email و آپلود فایل این خصیصه به کار می رود.

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

آموزش html

خصیصه pattern

در بعضی از ورودی ها نیاز است که کاربر اطلاعات را مطابق الگویی خاص وارد کند. این الگو را با استفاده از خصیصه pattern تعیین می کنیم. همچنین می توان با استفاده از خصیصه title می توان راهنمای تکمیل فرم را به کاربر نمایش داد.

الگو را در کروشه و تعداد حروف و یا اعداد را درون آکولاد می نویسیم. مثلا در مثال زیر الگو بدین ترتیب است: [a]{3} . یعنی در ورودی باید 3 تا حرف لاتین و کوچک نوشته شود. می توان هر الگویی را وارد کرد که بررسی کامل الگو را در جاوا اسکریپت انجام خواهیم داد.

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		
		<form action="" method="get">
			نام : <input type="text" name="fname" value="نام"> <br> <br>
			نام خانوادگی : <input type="text" name="lname" value="نام خانوادگی"> <br> <br>
			e-mail : <input type="email" name="mail" value="your email"> <br> <br>
			تاریخ تولد : <input type="date" value="تاریخ تولد" max="2020-12-31" min="2000-01-01"> <br> <br>
			انتخاب عکس : <input type="file" name="img" multiple> <br> <br>
			<p> در ورودی زیر الگویی برای وارد کردن اطلاعات قرار داده ایم </p>
			<input type="text" name="name1" pattern="[a]{5}" title="پنج حرف به صورت لاتین و کوچک وارد کنید"> <br> <br>
			<input type="submit" value="ارسال">
		</form>
		<p> برای نمایش اطلاعات راهنمای کاربر برای تکمی ل فرم از جاوا اسکریپت استفاده می نیم که در آموزشهای جاوا اسکریپت به طور کامل بررسی می گردد. </p>
	</body>
</html>

آموزش html

خصیصه placeholder

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

خصیصه placeholder همراه با ورودی های text، search، url، tel، email و password به کار می رود.

این موضوع را مثال زیر بررسی خواهیم کرد.

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
		<style>
		form { float: left; }
		</style>
	</head>
	<body>
		
		<form action="" method="get">
		 <fieldset>
		 	<legend> form 1 with value attribute </legend>
			نام : <input type="text" name="fname" value="نام"> <br> <br>
			نام خانوادگی : <input type="text" name="lname" value="نام خانوادگی"> <br> <br>
			e-mail : <input type="email" name="mail" value="ای میل"> <br> <br>
			تاریخ تولد : <input type="date" value="تاریخ تولد" max="2020-12-31" min="2000-01-01"> <br> <br>
			انتخاب عکس : <input type="file" name="img" multiple> <br> <br>
			<p> ورودی زیر را طبق الگو تکمیل کنید</p>
			<input type="text" name="name1" pattern="[a]{5}" title="پنج حرف به صورت لاتین و کوچک وارد کنید" value="the field with pattern"> <br> <br>
			<input type="submit" value="ارسال">
		</fieldset>
		</form>
		<form action="" method="get">
		 <fieldset>
		 	<legend> form 1 with placeholder attribute </legend>
			نام : <input type="text" name="fname" placeholder="نام"> <br> <br>
			نام خانوادگی : <input type="text" name="lname" placeholder="نام خانوادگی"> <br> <br>
			e-mail : <input type="email" name="mail" placeholder="ای میل"> <br> <br>
			تاریخ تولد : <input type="date" placeholder="تاریخ تولد" max="2020-12-31" min="2000-01-01"> <br> <br>
			انتخاب عکس : <input type="file" name="img" multiple> <br> <br>
			<p> ورودی زیر را طبق الگو تکمیل کنید </p>
			<input type="text" name="name1" pattern="[a]{5}" title="پنج حرف به صورت لاتین و کوچک وارد کنید" placeholder="the field with pattern"> <br> <br>
			<input type="submit" value="ارسال">
		</fieldset>
		</form>
	
	</body>
</html>

آموزش html

خصیصه required

در فرم ها ورودی هایی هستند که پر کردن آنها توسط کاربر ضروری است. برای این ورودی ها خصیصه required را استفاده می کنیم. اگر کاربر این ورودی ها را پر نکند، پیغامی در صفحه ظاهر می شود و پر کردن ورودی را به کاربر اخطار می دهد. با ورودی هایی از نوع  text، search، url ، tel، email، password، date pickers، number، checkbox، radio و  file خصیصه required به کار می رود.

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<form action="" method="get">
		 <fieldset>
		 	<legend> فرم 1 </legend>
			نام : <input type="text" name="fname" placeholder="نام" required> * <br> <br>
			نام خانوادگی : <input type="text" name="lname" placeholder="نام خانوادگی" required> * <br> <br>
			e-mail : <input type="email" name="mail" placeholder="your email" required> * <br> <br>
			تاریخ تولد : <input type="date" placeholder="تاریخ تولد" max="2020-12-31" min="2000-01-01" required> * <br> <br>
			انتخاب عکس : <input type="file" name="img" multiple required> <br> <br>
			<input type="submit" value="ارسال">
		</fieldset>
		</form>
	
	</body>
</html>

آموزش html

خصیصه step

این خصیصه را که در جلسات گذشته دیدیم، تعداد واحد افزایش یا کاهش ورودی های number، range، date، datetime-local، month، time و  week را تعیین می کند.

نکته مهمی  که باید در نظر گرفت این است که این خصیصه حتما همراه با خصیصه های max و min به کار می رود. یعنی در یک ورودی ابتدا بیشترین مقدار و کمترین مقدار مجاز را تعیین کنید و بعد خصیصه step را تنظیم کنید.

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<form action="" method="get" oninput="x.value=parseInt(a.value)">
			<p> در ورودی زیر با کلیک بر روی دکمه های درون فیلد، اعداد 5 تا 5 تا افزایش یا کاهش می یابند </p>
			 ورودی عدد : <input type="number" name="point" placeholder="50" max="100" min="0" step="5"> 
			 <br> <br>
			 ورودی رنج : <input type="range" name="rng" id="a" placeholder="50" max="100" min="0" step="5"> = <output name="x" for="a"> 0 </output> 
			 <br> <br>
			 <p> اگر هر کدام از ورودی های زیر مطابق با محدودیتهای تعیین شده پر نشوند، مرورگر پیغام خطایی را به کاربر می دهد. </p>
			 <p> در ورودی زیر فقط روزهای زوج قابل انتخابند </p>
			 ورودی تاریخ : <input type="date" name="date" placeholder="mm/dd/yyyy" min="2000-01-01" max="2020-12-31" step="2"> 
			 <br> <br>
			 <p> در ورودی زیر فقط روزهای زوج قابل انتخابند </p>
			 ورودی تاریخ و ساعت : <input type="datetime-local" name="dtl" min="2000-01-01" max="2020-12-31" step="2"> 
			 <br> <br>
			 <p> در ورودی زیر فقط ماه های با شماره زوج قابل انتخابند </p>
			 ورودی ماه و سال: <input type="month" name="mnh" min="2000-01-01" max="2020-12-31" step="2"> 
			 <br> <br>
			 <p> در ورودی زیر فقط هفته های با شماره زوج قابل انتخابند </p>
			 ورودی شماره هفته : <input type="week" name="week" min="2000-01-01" max="2020-12-31" step="2"> 
			 <br> <br>
			 <input type="submit" value="ارسال">
		</form>
	
	</body>
</html>

آموزش html
امیدواریم که مطالب گفته شده نظر شما دوستان و همراهان گرامی را جلب کرده باشد. قسمت نظرات برای شما دوستان ارجمند در نظر گرفته شده است تا با پیشنهادات خود ما را در ارائه مطالب بهتر و مفیدتر یاری نمایید. همچنین کارشناسان سایت سازان آماده پاسخگویی به سوالات شما کاربران عزیز می باشند.

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