ورود ثبت نام
آموزش ساخت فرم در HTML با استفاده از تگ From
» طراحی سایت » آموزش HTML » آموزش ساخت فرم در HTML با استفاده از تگ From
15429 بازدید

آموزش ساخت فرم در HTML با استفاده از تگ From

در این فیلم آموزشی HTML ، نحوه ساخت فرم ها در صفحات وب را یاد خواهید گرفت . از فرم در HTML برای ساختن فرم تماس ، فرم ثبت نام ، تماس با ما ، فرم نظر سنجی و … استفاده می شود و کاربرد فراوانی دارد . خلاصه آن چیزی که در فیلم آموزشی گفته شده را در زیر می بینید :

تگ فرم در HTML

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

Action : با استفاده از این شناسه می توانیم اطلاعات گرفته شده از کاربر را به صفحه پردازش بفرستیم و صفحه پردازش به صورت PHP است یا به صورت Asp که در این صفحه اطلاعات وارد شده بررسی می شود و  کارهایی که لازم است را بر روی آن ها انجام می دهیم .

Method : این شناسه نحوه ارسال اطلاعات در آدرس بار مرورگر را مشخص می کند که دارای دو مقدار get و Post است . در مورد این ها در فیلم آموزش فرم در html توضیحات تکمیلی داده شده است .

تگ Input در فرم HTML

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

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

type : مقدار این شناسه نوع کارد وردی اطلاعات را مشخص می کند ، مثلاً کارد به صورت متن باشد یا به صورت رمز عبور ، دکمه رادیویی و …

مقادیری که type می تواند بگیرد :

  • text
  • password
  • email
  • radio
  • checkbox
  • hidden
  • file
  • submit
  • reset
  • button

در مورد همه این ها در فیلم آموزشی توضیحات داده شده است .

لیست های کشویی ( Select )  در فرم html

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

textarea یا متن طولانی

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

دکمه های ارسال فرم و پاک کردن فرم

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

سورس کد فرم در HTML :

<html>
	<head>
		<title>Web30ty</title>
	</head>
	<body dir="rtl">
           <form action="#" method="post" >
				<table width="800px" align="center" >
					<tr>
						<td>
								<fieldset>
											<legend><h2>فرم ثبت نام</h2></legend>
											<label>نام</label>
											<input type="text" name="username" />
											<br/>
											<br/>
											<label>نام خانوادگی</label>
											<input type="text" name="lastname" id="txt" maxlength="15"/>
											<br/>
											<br/>
											<label>رمز عبور</label>
											<input type="password" name="pass" id="pass" />
											<br/>
											<br/>
											<label>جنسیت</label>
											<input type="radio" name="gensiat"  />مرد
											<input type="radio" name="gensiat"  checked />زن
											<br/>
											<br/>
											<label>نظر سنجی</label>
											<input type="checkbox" value="1"  name="1"/> گزینه اول
											<input type="checkbox"  value="2"   name="2"/> گزینه دوم
											<br />
											<br />
											<input type="file" />
											<br />
											<input type="hidden" />
											<br />
											<h4>استان</h4>
											<select multiple>
													<option value="tehran">تهران</option>
													<option value="2" name="zanjan">زنجان</option>
													<option selected >تبریز</option>
													<option>اصفهان</option>
													<option>مشهد</option>
											</select>
											<br />
											<br />
											<textarea value="comment">
										
											</textarea>
											<br />
											<div align="center">
												<input type="submit" value="ارسال" />
												<input type="reset" value="بازنشانی" />
												<input type="button" value="دکمه" />
											</div>
								</fieldset>
						</td>
					</tr>
				</table>
				
		   </form>
		 
	</body>
</html>

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

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

فیلم آموزش فرم در HTML را می توانید از لینک زیر دانلود کنید .

رضا طوماری

دیدگاه



جواب سوال چیه ؟ *

  1. محمد سجاد خواجوی گفت:

    با سلام
    خیلی ممنون از راهنمایی شما
    اگر می شود نشان دهید که اگر کاربر فرمی را کاربر پر نکرد چگون بگوییم پر نکرده ای؟
    با تشکرفراوان…

    • رضا طوماری گفت:

      سلام
      برای این کار می تونید از جاوا اسکریپت یا php استفاده بکنید .
      راه حل ساده تر این هست که به اون input مورد نظر از شناسه required به صورت زیر استفاده کنید .