:: آموزش HTML ، جلسه دوازدهم ::

سپیده 313

پنجشنبه ۱۹ دی ۱۳۹۲ ۰۹:۵۵ بعد از ظهر

آموزش HTML ، جلسه دوازدهم

آشنایی با نحوه ایجاد Form

یکی از المان های مهم form ، html ها می باشند که توسط آنها می توان یک رابطه تعاملی بین کاربر و وب سایت ایجاد نمود.

می خواهیم همانند تصویر زیر، یک فرم که شامل امکان درج متن، دکمه هایی رادیویی، چک باکس ها، کادر متن برای متون طولانی و دکمه submit ایجاد نمائیم.

برای ایجاد یک فرم از تگ <form> استفاده شده و اجزای فرم در داخل این تگ قرار می گیرند. این تگ دارای دو صفت به نام های method و action می باشد. برای method دو مقدار get و post قابل انتخاب می باشد.

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

Method : این شناسه طریقه ارسال اطلاعات را به فایل action مشخص می کند و شامل دو مقدار زیر است:

get : در این روش اطلاعات از طریق آدرس صفحه (نوار آدرس) ارسال می شوند. به این صورت که اطلاعات وارد شده در فرم پس از یک علامت سؤال بعد از آدرس صفحه action قرار می گیرند و ارسال می شوند. از این روش نمی توان برای اطلاعات طولانی یا کاراکترهای غیر ASCII استفاده کرد. همچنین بهتر است برای اطلاعات مهم از قبیل نام کاربری و کلمه عبور هم از این روش استفاده نشود. چون در این صورت این اطلاعات در نوار آدرس مرورگر نمایش داده می شوند.

post : این روش برای ارسال اطلاعات از آدرس صفحه استفاده نمی کند. مزیت این روش نسبت به روش قبل امنیت بیشتر به دلیل عدم نمایش اطلاعات ارسالی به کاربر و همچنین امکان ارسال اطلاعات طولانی تر است.

در صورتی که از صفت method استفاده نشود از مقدار پیش فرض آن یعنی get استفاده می شود.

برای اضافه نمودن فیلد متنی، دکمه رادیویی و چک باکس از تگ <input> استفاده می شود. با استفاده از صفت type ماهیت جزء موردنظر را می توان تعیین نمود. در این مثال 2 فیلد متنی(text)، 2 دکمه رادیویی(radio) و 4 چک باکس (checkbox) موجود می باشد.

از تگ <textarea> به منظور ایجاد کادر متنی استفاده می شود.

دکمه submit با استفاده از تگ <input> و مقدار submit برای صفت value به انتهای فرم اضافه شده است.

دکمه submit جهت ارسال اطلاعات فرم می باشد. در صورت کلیک بر روی این دکمه اطلاعات درج شده، به وب سرور منتقل خواهد شد. سپس برنامه ای در وب سرور این داده ها را دریافت نموده و آنها را پردازش خواهد کرد. به این منظور از پروتکلی به نام CGI که مخفف Common Gateway Interface می باشد، استفاده می شود. این پروتکل ارتباط بین مرورگر و سرور را برای انتقال اطلاعات فرم برقرار می کند. ایجاد اجزای فرم با استفاده از کدهای html انجام شده و پردازش اطلاعات فرم در وب سرور به وسیله کدهای server side مانند php ، asp و... انجام می شود.



	

	

	
		<html>
	
		<head>
	
		<title>form page</title>
	
		</head>
	
		 
	
		<body bgcolor="#ddf">
	
		 
	
		<h3>contact form</h3>
	
		 
	
		<form  method="post" action="test.php">
	
		 
	
		<p>first name: <input name="name" type="text" /></p>
	
		<p>last name:<input name="lastname" type="text" /></p>
	
		<p>Customer:<input name="radio" type="radio" value="" />
	
		New Customer:<input name="radio" type="radio" value="" /></p>
	
		<p>Select your favorite products:</p>
	
		 
	
		Product 1<input name="check" type="checkbox" value="" />
	
		Product 2<input name="check" type="checkbox" value="" />
	
		Product 3<input name="check" type="checkbox" value="" />
	
		Product 4<input name="check" type="checkbox" value="" />
	
		 
	
		<p>
	
		<textarea name="tx" cols="30" rows="5"></textarea></p>
	
		<input type="submit" value="Submit" />
	
		</form>
	
		 
	
		</body>
	
		</html>

دوستای خوبم این آخرین بخش از آموزش HTML بود؛ البته بخش فریم ها هم هست ولی احساس کردم کمی سخته (اگه کسی از شما عزیزان مایل باشه حتما آموزش فریم ها را هم قرار میدم)
اگه بشه به زودی آموزش CSS را قرار خواهم داد به لطف خدای مهربون