نحوه ساخت فرم در HTML
Your browser doesn't support video.
Please download the file: video/mp4
با سلام خدمت شما دوستداران آموزش طراحی وب (HTML و CSS).علیرضا حاتمی نیا هستم با قسمت نهم آموزش طراحی وب (HTML , CSS) در خدمت شما هستم.
در جلسه پیش با نحوه ساخت لیست در HTML آشنا شدیم. در این قسمت از آموزش به نحوه ساخت و ایجاد فرم ها در HTML می پردازیم.
فرم ها در HTML
تقریبا تمامی وبسایت ها جهت تعامل با کاربران از فرم ها استفاده می کنند. فرم ها اصلی ترین اجزا در صفحه هستند که برای دریافت اطلاعات از کاربران استفاده می شوند. برای مثال فرم های ثبت نام، فرم های نظرخواهی، فرم های اعتبارسنجی کاربران و یا فرم هایی که برای ساخت ابزارهای مدیریتی و طراحی ساخته می شوند.
اجزای فرم در HTML
فرم ها دارای اجزای بسیاری مانند فیلدهای متنی (textbox ها) ، دکمه های رادیویی (radios button) ، جعبه چک (checkbox) ، لیست های کشویی و انتخابی ، انواع دکمه ها و ... می باشند.
در ادامه آموزش با نحوه ساخت فرم در HTML آشنا می شویم.
برچسب <form>
شروع و پایان فرم در HTML از تگ باز و بسته <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>
فیلد input از نوع password
برای دریافت کلمه عبور توسط کاربر بایستی نوع type در input را برابر password قرار دهید. با این کار هر کاراکتری که توسط کاربر وارد شود به صورت ستاره یا دایره نمایش داده می شود.
<form>
Enter Password: <input type="password">
</form>
فیلد input از نوع radio (دکمه های رادیویی)
از دکمه های رادیویی زمانی استفاده می شود که کاربر از بین چند گزینه فقط حق انتخاب یک گزینه را داشته باشد. مانند تعیین جنسیت.
برای ایجاد دکمه های رادیویی بایستی مقدار type در input را برابر radio قرار دهید.
<form>
Male : <input type="radio" name="sex"> <br>
Female : <input type="radio" name="sex">
</form>
فیلد 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>
فیلد input از نوع submit یا ارسال
کاربران برای ارسال اطلاعات فرم از دکمه ارسال یا submit استفاده می کنند. برای ایجاد دکمه submit کافیست مقدار type در input را برابر submit قرار دهید. اطلاعات فرم پس از کلیک روی دکمه submit به آدرس فایلی می رود که قبلا در خصوصیت action فرم تعیین شده است. اطلاعات پس از ارسال توسط زبان های برنامه نویسی یا اسکریپت نویسی مانند asp.net، php ، perl و ... گرفته و پردازش می شود.
در مثال زیر اطلاعات فرم بعد از کلیک به روی دکمه submit به فایل get.php ارسال میشود.
توجه: مقدار خصوصیت value تعیین کنند متن روی دکمه می باشد.
خب قسمت نهم آموزش طراحی وب را در اینجا به پایان می رسانیم. در جلسه بعدی با دیگر اجزای فرم ها آشنا می شوید.
نظرات کاربران
3 سال پیش
محمد ابراهيم ابراهیمی بقا
با سلام و ضمن خسته نباشید چگونه میتوانم برای سایت خود یک سیستم نظردهی درست کنم؟