برای اینکه بتوانیم در صفحه وب خود همچین فرمی پیاده سازی کنیم باید با دستورات زیر اشنا شویم
<form></form>
فرم المانی است که برای جمع اوری ورودی از کاربر است
یکی از مهم ترین المنت های فرم است که به شکل های مختلف پیاده سازی میشود و به متغییر type
وابسته است
Type Description
<input type="text"> Defines a one-line text input field
<input type="radio"> Defines a radio button (for selecting one of many choices)
<input type="submit"> Defines a submit button (for submitting the form)
برای "text" اول که یک خط وارد فایلد میکنیم شکل وب ما به این شکل میشود کلیک
برای radio button برای انتخاب یک گزینه از بین چند گزینه استفاده میشود کلیک
و Submit یک button برای ارسال اطلاعاتی که در فرم وارد کردیم به یک سرور کلیک
اینجا انواع مختلف input type هستند که میتوانیم درhtml از ان ها استفاده کرد
<input type="button">به این شکل و با کمک صفت valueمیتوانیم یک مقدار قرار دهیم کلیک
<input type="checkbox">برای انتخاب یک یا چندین گزینه از این صفت استفاده میکنیم
<input type="color">یک فیلد رنگ است در فرم برای اینکه رنگ دلخواه انتخاب کنیم کلیک
<input type="date">فیلدی است که تشکیل شده از تاریخ و تاریخ مورد نظر از کاربر میگیرد کلیک
<input type="datetime-local">این فیلد ورودی تاریخ و زمان است بدون منطقه زمانی
<input type="email">این فیلد از کاربر ورودی emailمیگیردو درصورتی خطایی در وارد کردن ایمیل باشد به ما خطا میدهد
<input type="file">این قسمت فیلد انخاب پرونده . یک دکمه "مرور" برای بارگذاری پرونده است
<input type="hidden">برای اینکه اطلاعاتی که میخواهیم وارد کنیم به شکل مخفی باشد
<input type="image"><input type="month">به کاربر اجازه انتخاب سال و ماه را میدهد
<input type="number">این فیلد برای ورودی عدد است و عدد از کاربر میگیرد ومیتواینیم محدودیت هایی درباره پذیرش عدد قرار دهیم کلیک
<input type="password">فیلد وارد کردن پسورد است و پسورد را نمایش نمیدهد هنگام وارد کردن
<input type="range">کنترلی را برای وارد کردن شماره ای که مقدار دقیق آن مهم نیست (مانند کنترل کشویی) تعریف می کند. دامنه پیش فرض از 0 تا 100 است. با این وجود ، می توانید محدودیت هایی را در مورد پذیرش اعداد با ویژگی های min ، max و مرحله تعیین کنید کلیک
<input type="reset">یک دکمه است که کل اطلاعاتی که وارد فرم کردیم پاک میکند
<input type="search">از یک فیلد سرچ در فرم استفاده میکند برای سرچ کردن
<input type="tel">این غیلد برای وارد کردن شماره تلفن در فرم از ان استفاده میشود کلیک
<input type="time">یرای انتخاب زمان بدون منطقه زمانی است
<input type="url">فیلدی است ادرس urlباید در ان وارد کنیم
<input type="week">این فیلد برا یانتخاب هفته و سال استدر تگ فرم action تعریف میشود و زمانی از ان استفاده میکنیم که فرم به سرور ارسال میشود
<form action="/action_page.php">
این صفت روش post یا get را که هنگام ارسال داده ها باید استفاده شود مشخص میکند
وقتی از get استفاده میکنیم داده های ارسالی در ادرس مرورگر قابل مشاهده هستند
<form action="/action_page.php" method="get">
/action_page.php?firstname=Mickey&lastname=Mouse
وقتی ازpost استفاده میکنیم که میخواهیم داده های داده های شخصی ارسال کند و پیش فرض formحالت post است و محدودیتی در ارسال مقادیر بزرگ داده ندارد
<form action="/action_page.php" method="post">
در عنصر formعر فیلد وروردی باید در name مقدارش ارسال شود وگرنه اطلاعات وارد شده از کاربر به سمت سرور ارسال نمیشود
<form action="/action_page.php">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
برای اینکه عنصر های مرتبط درفرم یک گروه قرار دهیم
<fieldset></fieldsrt>
و عنصر <legend> برای نوشتن کپشن یا هد یا عنوان برای گروه که تعیین کردیم است
<form action="/action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
و خروجی ان به این شکل است
برای اینکه نتیجه را اراِیه بدیم در یک پنچره جدید از این دستور استفاده میکنیم blank_
<form action="/action_page.php" target="_blank">
