یک فرم توسط تگ <form> در html تعربف می‌گردد.
عناصر فرم بین تگ باز و بسته <form> قرار می گیرند.
عناصر فرم شامل ورودی متن، دکمه های رادیو، چک باکس ها، لیست های چند انتخابی ، آپلود فایل، و دکمه submit می باشد.
تگ <input>
مهم ترین تگ فرم این تگ می باشد که با مقدار دهی به اتریبیوت type در این تگ می توانیم مدل های مختلفی را در فرم ایجاد نماییم:
<input type="text">
یک ورودی یک خطی در متن را ایجاد می کند.
<input type="radio">
یک دکمه رادیویی را در فرم ایجاد می نماید.
<input type="submit">
یک دکمه ارسال را در فرم ایجاد می نماید.
<input type="upload">
یک فرم آپلود ایجاد می نماید.
ایجاد ورودی متنی در فرم
<!DOCTYPE html> <html> <body> <form> First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname"> </form> </body> </html>
خروجی:
ایجاد رادیویی در فرم
<!DOCTYPE html> <html> <body> <form> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </form> </body> </html>
خروجی:
دکمه ارسال در فرم
<!DOCTYPE html> <html> <body> <form action="/action_page.php"> 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"> </form> <p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p> </body> </html>
خروجی:
اتریبیوت action در تگ <form>
درون این اتریبیوت ادرس صفحه ای را که قرار است اطلاعات فرم را پردازش کند را می نویسیم. این صفحه به کمک یک زبان سمت سرور php یا c# معمولا نوشته می شود که اطلاعات فرم را پردازش کرده و کاری که باید به کمک این اطلاعات انجام شود را انجام میدهد. مانندذ ثبت نام در سایت یا ورود به سایت.
<form action="/action_page.php">
اتریبیوت method در تگ <form>
این اتریبیوت نحوه ارسال اطلاعات را هنگام فشردن دکمه submit مشخص می کند که به دو صورت می تواند باشد:
<form action="/action_page.php"method="post">
یا
<form action="/action_page.php"method="get">
بصورت پیشفرض متد get در html تعریف شده است که از این متد برای ارسال اطلاعات کم و غیر حساس و کم اهمیت استفاده می شود. این مدل اطلاعات فرم را در نوار مرورگر نمایش می دهد.
از متد post همواره بهتر است استفاده گردد چرا که امنیت بیشتری را داشته و محدودیتی برای تعداد کاراکتر ها ندارد همچنین اطلاعات فرم را در نوار مرورگر نمایش نمی دهد.
اتریبیوت name
تمامی input ها حتما باید اتریبیوت name با نام مشخص را داشته باشند وگرنه اطلاعات فرم پردازش نخواهند شد برای مثال در فرم زیر فقط اطلاعات فرم نام خانوادگی می تواند هنگام submit در سمت سرور پردازش شود.
<!DOCTYPE html>
<html>
<body>
<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>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
<p>Notice that the value of the "First name" field will not be submitted, because the input element does not have a name attribute.</p>
</body>
</html>
تگ های <fieldset> و <legend>
تگ <fieldset> گروه فرم های مرتبط را مشخص می نماید یعنی باید فرم های مرتبط در یک فرم را بین تگ باز و بسته <fieldset> قرار دهیم.
همچنین تگ <legend> یک عنوان برای فرم در نظر می گیرد. کد زیر و خروجی آنرا مشاهده نمایید:
<!DOCTYPE html> <html> <body> <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> </body> </html>
خروجی:
