نحوه ساخت فرم در HTML

1395/9/24 علیرضا حاتمی نیا 6525

با سلام خدمت شما دوستداران آموزش طراحی وب (HTML و CSS)
علیرضا حاتمی نیا هستم با قسمت نهم آموزش طراحی وب (HTML , CSS) در خدمت  شما هستم.
در این قسمت از آموزش شما با نحوه ساخت و ایجاد فرم ها در HTML آشنا خواهید شد.

تقریبا تمامی وبسایت ها جهت تعامل با کاربران از فرم ها استفاده می کنند. فرم ها اصلی ترین اجزایی در صفحه هستند که برای دریافت اطلاعات از کاربران استفاده می شوند. برای مثال فرم های ثبت نام ، فرم های نظرخواهی، فرم های اعتبارسنجی کاربران و یا فرم هایی که برای ساخت ابزارهای مدیریتی و طراحی ساخته می شوند.
فرم ها دارای اجزای بسیاری مانند فیلدهای متنی (textbox ها ) ، دکمه های رادیویی ( radios) ، جعبه چک (checkbox) ، لیست های کشویی و انتخابی ، انواع دکمه ها و ... می باشند.
در ادامه آموزش با نحوه ساخت فرم در HTML آشنا می شویم:

تگ <form> :
از تگ باز و بسته <form></form> برای ایجاد فرم در HTML استفاده می شود. یعنی کلیه اجزای فرم درون این تگ نوشته میشوند .

<form>
.
.
.
</form>

تگ input :
تگ input یکی از اجزای <form> می باشد که برای ساخت عناصر فرم استفاده می شود.
در عنصر input خصوصیتی به نام  type وجود دارد که نوع input را تعیین می کند. مثلا تعیین می کند نوع input مورد نظر از نوع دکمه رادیویی باشد یا فیلد متنی و ...
از خصیصیه های اصلی دیگر input می توان به value و name اشاره کرد که بعد ها بیشتر درباره آنها توضیح خواهیم داد.
تگ <input> دارای تگ پایانی نمی باشد.

<input type=””>


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

 

<form>
First name :<input type="text">
</form>

ایجاد جعبه متنی در HTML


فیلد input از نوع password :
برای ورود کلمه عبور توسط کاربر بایستی نوع type در input را برابر password قرار دهید. با این کار هر کاراکتری که توسط کاربر وارد شود به صورت ستاره یا دایره نمایش داده می شود

 

<form>
Enter Password: <input type="password">
</form>


 

ایجاد فیلد پسورد در HTML


فیلد input از نوع radio (دکمه های رادیویی) :
از دکمه های رادیویی زمانی استفاده می شود که کاربر از بین چند گزینه فقط حق انتخاب یک گزینه را داشته باشد. مانند تعیین جنسیت.
برای ایجاد دکمه های رادیویی بایستی مقدار type در input را برابر radio قرار دهید:

 

<form>
Male : <input type="radio" name="sex"> <br>
Female : <input type="radio" name="sex">
</form>


 

ایجاد دکمه رادیویی در HTML


فیلد input از نوع checkbox :
برای انتخاب یک یا چند گزینه از بین چندین گزینه از چک باکس ها استفاده می شود. برای ساخت چک باکس کافیست مقدار type در input را برابر checkbox قرار دهید.

 

<form>
<input type="checkbox" name="desert" value="ice-cream" /> ice cream <br />
<input type="checkbox" name="desert" value="cake" /> cake
</form>


 

ایجاد چک باکس در HTML


فیلد input از نوع submit یا ارسال :
کاربران برای ارسال اطلاعات فرم از دکمه ارسال یا submit استفاده می کنند. برای ایجاد دکمه submit کافیست مقدار type در input را برابر submit قرار دهید. اطلاعات فرم پس از کلیک روی دکمه submit به آدرس فایلی می رود که قبلا در خصوصیت action فرم تعیین شده است. اطلاعات پس از ارسال توسط زبان های برنامه نویسی یا اسکریپت نویسی مانند asp.net، php ، perl و ... گرفته و پردازش می شود.
در مثال زیر اطلاعات فرم بعد از کلیک به روی دکمه submit به فایل get.php ارسال میشود.
توجه: اگر مقدار value تعیین کنند متن روی دکمه می باشد


 

ایجاد دکمه submit در HTML

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

دانلود ویدیو

دانلود PDF قسمت نهم آموزش طراحی وب
 

علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت