0

فرم ها در html

07 خرداد 1393

فرم ها در html

ایجاد فرم در اچ تی ام ال

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

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

تگ form

فرم ها با این تگ آغاز می شوند و تمام فیلدهای ورود اطلاعات و دکمه ارسال در داخل این تگ قرار می گیرند:

html
<!doctype html>
<html>
<head>
	<title>form</title>
</head>
<body>
	<form action="demo_form.asp" method="get">
		 First name: <input type="text" name="fname"><br>
		 Last name: <input type="text" name="lname"><br>
  		<input type="submit" value="Submit">
	</form> 
</body> 
</html>
 

نتیجه

 صفت های تگ form

صفت action

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

صفت method

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

1. get
در این روش اطلاعات فرم در داخل url به صورت دو تایی (نام و مقدار) قرار می گیرند.
طول url محدود بوده حدود 3000 کارکتر
هرگز برای ارسال اطلاعات محرمانه (مانند یوزر و پسورد) از این روش استفاده نکنید (اطلاعات در url نمایش داده می شوند).

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

2. post
در این روش اطلاعات در بدنه در خواست http نگه داری  میشوند.
محدودیت سایز وجود ندارد.

اطلاعات در این روش بوکمارک نمی شوند.

 صفت name

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

 صفت target

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

1. _blank

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

2. _self

این مقدار تعیین می کند که پاسخ دریافتی درهمان پنجره نمایش داده شود.(این مقدار پیش فرض می باشد).

3. _parent

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

4. _top

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

5. framename

این مقدار تعیین می کند که پاسخ دریافتی در یک آی فریم دارای اسم نمایش داده شود.

 تگ input

 تگ input یکی از مهمترین عناصر در فرم ها می باشد که با توجه به صفت type  آن دارای اشکال متفاوتی نیز می باشد.

صفات تگ input

صفت type

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

1. button

با این مقدار عنصر input تبدیل به یک دکمه خواهد شد.

html
<!doctype html>
<html>
<head>
	<title>form</title>
</head>
<body>
	<form action="#" method="get">
		<input type="button" value="کلیگ کنید" onclick="msg()"> 
	</form> 
</body> 
</html>
 

نتیجه

2. checkbox

با این مقدار عنصر input به صورت checkbox نمایش داده می شود(input هایی که دارای name یکسان باشند یک گروه حساب می شوند).

html
<!doctype html>
<html>
<head>
	<title>form</title>
</head>
<body>
	<form action="#" method="get">
		<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
		<input type="checkbox" name="vehicle" value="Car"> I have a car 
	</form> 
</body> 
</html>
 

نتیجه

3. color

این مقدار input را به یک پنل انتخاب رنگ تبدیل خواهدکرد.(این حالت در ie   پشتیبانی نمی شود).

html
<!doctype html>
<html>
<head>
	<title>form</title>
</head>
<body>
	<form action="#" method="get">
		Select your favorite color: <input type="color" name="favcolor">
	</form> 
</body> 
</html>
 

نتیجه

4. email

این مقدار عنصر input را به ورودی ایمیل تبدیل می کند و در هنگام ارسال فرم اعبتار سنجی خواهد شد (این حالت در ie9 به پایین پشتیبانی نمی شود).

html
<!doctype html>
<html>
<head>
	<title>form</title>
</head>
<body>
	<form action="#" method="get">
		E-mail: <input type="email" name="usremail">
	</form> 
</body> 
</html>
 

نتیجه

5.file

این مقدار عنصر input را به ورودی فایل برای ارسال فایل تبدیل می کند.

html
<!doctype html>
<html>
<head>
	<title>form</title>
</head>
<body>
	<form action="#" method="get">
		 Select a file: <input type="file" name="img"> 
	</form> 
</body> 
</html>
 

نتیجه

6. hidden

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

html
<!doctype html>
<html>
<head>
	<title>form</title>
</head>
<body>
	<form action="#" method="get">
		  <input type="hidden" name="country" value="Norway"> 
	</form> 
</body> 
</html>
 7. image

با این مقدار عنصر input به یک دکمه تبدیل خواهد شد که تصویر می باشد.

html
<!doctype html>
<html>
<head>
	<title>form</title>
</head>
<body>
	<form action="#" method="get">
		  <input type="image" src="/closebox.gif" alt="Submit">
	</form> 
</body> 
</html>
 

نتیجه

8. number

این مقدار عنصر input را به یک ورودی عدد تبدیل می کند که می توان حداقل و حداکثر آن را تعیین نمود.(این حالت در ie9 به پایین پشتیبانی نمی شود).

html
<!doctype html>
<html>
<head>
	<title>form</title>
</head>
<body>
	<form action="#" method="get">
		  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
	</form> 
</body> 
</html>
 

نتیجه

9. password

این مقدار عنصر input را به یک ورودی پسورد تبدیل می کند و کاراکترها رو به صورت * نمایش خواهد داد.

html
<!doctype html>
<html>
<head>
	<title>form</title>
</head>
<body>
	<form action="#" method="get">
		  <input type="password" name="pwd"> 
	</form> 
</body> 
</html>
 

نتیجه

10. radio

این مقدار عنصر input را به radio تبدیل می کند و از بین عناصر همنام فقط یکی از آن ها قابل انتخاب خواهد بود.

html
<!doctype html>
<html>
<head>
	<title>form</title>
</head>
<body>
	<form action="#" method="get">
		<input type="radio" name="gender" value="male"> Male<br>
		<input type="radio" name="gender" value="female"> Female 
	</form> 
</body> 
</html>
 

نتیجه

11. range

این مقدار عنصر input را به یک میله انتخاب رنج عدد تبدیل خواهد کرد و می توان حداقل و حداکثر آن را تعیین کرد (این حالت در ie9 به پایین پشتیبانی نمی شود).

html
<!doctype html>
<html>
<head>
	<title>form</title>
</head>
<body>
	<form action="#" method="get">
		<input type="range" name="points" min="1" max="10">
	</form> 
</body> 
</html>
 

نتیجه

12.reset

این مقدار عنصر input را تبدیل به یک دکمه reset تبدیل خواهد کرد که تمامی مقادیر فرم رو به مقدار اولیه بازگرداند.

html
<!doctype html>
<html>
<head>
	<title>form</title>
</head>
<body>
<form action="demo_form.asp">
	  Email: <input type="text" name="email"><br>
	  Pin: <input type="text" name="pin" maxlength="4"><br>
	  <input type="reset" value="Reset">
	  <input type="submit" value="Submit">
</form>
</body> 
</html>
 

نتیجه

13. submit

این مقدارعنصر input را به دکمه ارسال فرم تبدیل می کند(به مثال قبل نگاه کنید).

14. text

این مقدار عنصر input را به ورودی متن تبدیل می کند(به مثال قبل نگاه کنید).

15. url

این مقدار عنصر input را تبدیل به ورودی url تبدیل می کند و در هنگام ارسال فرم اعتبار سنجی خواهد شد (این حالت در ie9 به پایین پشتیبانی نمی شود).

صفت value

این صفت مقدار پیش فرض input را تعیین می کند.

صفت size

این صفت عدد می گیرد و اندازه input را تعیین می کند.

صفت name

این صفت برای تعیین نام منحصر به فرد و هم گروه کردن radio ها و checkbox ها به کار می رود.

تگ textarea

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

html
<!doctype html>
<html>
<head>
	<title>form</title>
</head>
<body>
	<form action="demo_form.asp">
		 <textarea name="test" cols="30" rows="10"></textarea>
	</form>
</body> 
</html>
 

نتیجه

صفات تگ textarea

صفت name

این صفت نام منحصر به فرد به کارد متن ما می دهد.

صفت rows

این صفت تعداد ردیف های متنی را تعیین می کند  مقدار آن عدد می باشد و به نحوی ارتفاع آن را تعیین می کند

صفت cols

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

صفت disabled

این صفت مقدار ندارد و برای غیر فعال کردن textarea به کار می رود.

صفت readonly

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

تگ select

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

html
<!doctype html>
<html>
<head>
	<title>form</title>
</head>
<body>
	<form action="demo_form.asp">
		 <select>
		  <option value="volvo">Volvo</option>
		  <option value="saab">Saab</option>
		  <option value="mercedes">Mercedes</option>
		  <option value="audi">Audi</option>
		</select>
	</form>
</body> 
</html>
 

نتیجه

صفت های تگ select

1. disabled

این صفت دارای مقدار نیست و تگ مارا غیر فعال می کند.

2. name

این صفت نامی یکتا به تگ ما می دهد.

3. size

این صفت عدد می گیرد و اندازه تگ ما را مشخص می کند.

4. multiple

این صفت مقدار نمی گیرد و این امکان را به کاربر می دهد که به جای یک گزینه چند گزینه را انتخاب کند.

تگ optgroup

این تگ در داخل تگ select به کار می رود و گزینه های ما را دسته بندی می کند.

html
<!doctype html>
<html>
<head>
	<title>form</title>
</head>
<body>
	<form action="demo_form.asp">
		<select>
		  <optgroup label="Swedish Cars">
		    <option value="volvo">Volvo</option>
		    <option value="saab">Saab</option>
		  </optgroup>
		  <optgroup label="German Cars">
		    <option value="mercedes">Mercedes</option>
		    <option value="audi">Audi</option>
		  </optgroup>
		</select> 
	</form>
</body> 
</html>
 

نتیجه

تگ button

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

صفت های تگ button

1. صفت name

این صفت نامی یکتا به این تگ می دهد.

2. صفت value

مقدار این صفت عنوان دکمه خواهد بود.

3. صفت type

این صفت دارای 3 مقدار پیش فرض می باشد که کار کرد دکمه را تعیین می کند.

1. submit

دکمه را تبدیل به دکمه ارسال می کند.

2. reset

دکمه را تبدیل به دکمه ریست می کند.

3. button

دکمه را تبدیل به دکمه ای سفارشی می کند.

4. صفت disable

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

تگ label

این تگ برای عنوان گذاری مورد استفاده قرار می گیرد و اگر در صفت for این تگ id تگ input قرار گیرد اگر برروی آن کلیک شود همانند این است که بر روی همان تگ input  کلیک شده.

html
<!doctype html>
<html>
<head>
	<title>form</title>
</head>
<body>
	<form action="demo_form.asp">
	  <label for="male">Male</label>
	  <input type="radio" name="sex" id="male" value="male"><br>
	  <label for="female">Female</label>
	  <input type="radio" name="sex" id="female" value="female"><br><br>
	  <input type="submit" value="Submit">
	</form>
</body> 
</html>
 

نتیجه

تگ fieldset

این تگ برای گروه بندی عناصر فرم به کار می رود

تگ legend

این تگ به عنوان تایتل تگ fieldset مورد استفاده قرار می گیرد.

html
<!doctype html>
<html>
<head>
	<title>form</title>
</head>
<body>
	<form>
	  <fieldset>
	    <legend>Personalia:</legend>
	    Name: <input type="text"><br>
	    Email: <input type="text"><br>
	    Date of birth: <input type="text">
	  </fieldset>
	</form> 
</body> 
</html>
 

نتیجه

 

 

صادق جعفری

صادق جعفری

متخصص طراحی و اجرای انواع قالب وب سایت برای انواع cms (جوملا ، وردپرس و ...)

با بیش از 4 سال سابقه و بیش از 35 پروژه موفق

دیدگاه‌ها

x
x چهارشنبه, 14 آبان 1393 10:41 پاسخ دادن
عالی بود ممنون
محسن
محسن جمعه, 16 تیر 1396 11:40 پاسخ دادن
سلام .
1.چطور می تونم در تگ action آدرس ایمیل وارد کنم . تا اطلاعات به یک ایمیل ارسال شود؟

نوشتن دیدگاه