در این فیلم آموزشی HTML ، نحوه ساخت فرم ها در صفحات وب را یاد خواهید گرفت . از فرم در HTML برای ساختن فرم تماس ، فرم ثبت نام ، تماس با ما ، فرم نظر سنجی و … استفاده می شود و کاربرد فراوانی دارد . خلاصه آن چیزی که در فیلم آموزشی گفته شده را در زیر می بینید :
تگ فرم در HTML
برای توضیحات بیش تر در مورد فرم کلیک کنید . فرم در HTML با استفاده از تگ <form> ساخته می شود و هر فرمی دارای دو شناسه یا مشخصه مهم است که اگر آن ها نباشند فرم شما فقط جنبه نمایشی دارد ، این دو شناسه به صورت زیر هستند :
Action : با استفاده از این شناسه می توانیم اطلاعات گرفته شده از کاربر را به صفحه پردازش بفرستیم و صفحه پردازش به صورت PHP است یا به صورت Asp که در این صفحه اطلاعات وارد شده بررسی می شود و کارهایی که لازم است را بر روی آن ها انجام می دهیم .
Method : این شناسه نحوه ارسال اطلاعات در آدرس بار مرورگر را مشخص می کند که دارای دو مقدار get و Post است . در مورد این ها در فیلم آموزش فرم در html توضیحات تکمیلی داده شده است .
تگ Input در فرم HTML
برای گرفتن اطلاعات از کاربر از تگ input استفاده می کنیم و به بخشی که اطلاعات را وارد آن می کنیم فیلد هم گفته می شود . تگ input هم دوتا شناسه مهم به صورت زیر دارد :
Name : با استفاده از این شناسه یه اسمی برای فیلد مشخص می کنیم و در صفحه پردازش آن را از سایر فیلد ها مجزا می کنیم و اطلاعات اون رو دریافت می کنیم .
type : مقدار این شناسه نوع کارد وردی اطلاعات را مشخص می کند ، مثلاً کارد به صورت متن باشد یا به صورت رمز عبور ، دکمه رادیویی و …
مقادیری که type می تواند بگیرد :
- text
- password
- 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 قسمت بعدی فیلم های این قسمت رو هم میتونید از لینک های زیر دانلود کنید .
hello world
سلام ببخشید قسمت 16 از تدریس html دانلود نمیشه لطفا اگه میشه مشکلشو حل کنید
سلام ممنون بابت اطلاع رسانیتون .
مشکل حل شد الان می تونید دانلود بکنید .
با سلام
خیلی ممنون از راهنمایی شما
اگر می شود نشان دهید که اگر کاربر فرمی را کاربر پر نکرد چگون بگوییم پر نکرده ای؟
با تشکرفراوان…
سلام
برای این کار می تونید از جاوا اسکریپت یا php استفاده بکنید .
راه حل ساده تر این هست که به اون input مورد نظر از شناسه required به صورت زیر استفاده کنید .