نمونه فرم HTML(ورود، ثبتنام، تماس با ما، آپلود)
فرمها در HTML ابزاری هستند که میتوانند اطلاعات مورد نظر شما را از کاربر دریافت کنند و به سرور ارسال نمایند. پس از ارسال اطلاعات وارد شده به سرور، با استفاده از کدهای برنامهنویسی، امکان ارزیابی، پردازش و ذخیرهسازی آنها در پایگاه داده وجود دارد.
ساخت فرم در HTML با استفاده از تگ form انجام میشود. فیلدهای متعددی در یک فرم HTML قابل ثبت هستند که شامل موارد زیر میشوند.
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week"><select><textarea><button type="submit">
یک فرم ساده ثبت نام
یک فرم سادهی HTML که شامل چند فیلد زیر باشد با کدهایی شبیه به کدهای زیر قابل پیادهسازی است:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<form action="form.php" method="post"> <label for="fname">نام</label><br> <input type="text" name="fname" id="fname"> <br> <label for="lname">نام خانوادگی</label><br> <input type="text" name="lname" id="lname"> <br> <label for="age">سن</label><br> <input type="number" name="age" id="age"> <br> <label for="password">گذرواژه</label><br> <input type="password" name="password" id="password"> <br> <input type="submit" value="ثبت اطلاعات"> </form> |
فیلدهای موجود در فرم بالا شامل موارد زیر هستند:
- فیلد متنی برای نام
- فیلد متنی برای نام خانوادگی
- فیلد عددی برای سن
- فیلد گذرواژه برای رمز ورود
- فیلد
submitبرای ارسال اطلاعات به سرور
هر فیلد متنی دارای یک label است که صفت for آن با مقدار مشابه id فیلد پر میشود. با انجام این کار، اگر کاربر روی label مورد نظر کلیک کند، فیلد متناظر انتخاب میشود.
یک فرم ساده برای ورود
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<form action="login.php" method="post"> <label for="username">نام کاربری</label><br> <input type="text" name="username" id="username" required> <br> <label for="password">گذرواژه</label><br> <input type="password" name="password" id="password" required> <br><br> <input type="submit" value="ورود"> <br><br> <a href="forget-password.php">گذرواژه را فراموش کردهاید؟</a> </form> |
در این فرم نام کاربری و گذرواژه از کاربر پرسیده میشود و یک لینک برای فراموشی رمز هم در انتهای فرم درج شده است.
نمونه فرم تماس با ما
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<form action="contact.php" method="post"> <label for="name">نام و نام خانوادگی</label><br> <input type="text" name="name" id="name" required> <br> <label for="email">ایمیل</label><br> <input type="email" name="email" id="email" required> <br> <label for="phone">شماره تماس</label><br> <input type="tel" name="phone" id="phone"> <br> <label for="subject">موضوع</label><br> <input type="text" name="subject" id="subject" required> <br> <label for="message">پیام شما</label><br> <textarea name="message" id="message" rows="6" required></textarea> <br> <input type="submit" value="ارسال پیام"> </form> |
این فرم حاوی چند فیلد مختلف است که اطلاعات کاربر را به همراه موضوع و متن پیام دریافت میکند و به فایل contact.php ارسال میکند.
فرم آپلود فایل
فرمهای آپلود فایل به کاربران امکان میدهند تا تصاویر، اسناد، فایلهای صوتی یا تصویری و سایر انواع فایلها را به سرور ارسال کنند. این نوع فرمها در وبسایتهای اشتراکگذاری فایل، پروفایل کاربری، سیستمهای مدیریت محتوا و بسیاری از برنامههای تحت وب کاربرد گستردهای دارند.
برای ساخت یک فرم آپلود فایل در HTML، از تگ <input type="file"> استفاده میشود. همچنین باید ویژگی enctype="multipart/form-data" را به تگ form اضافه کنید تا مرورگر بتواند دادههای باینری فایل را بهدرستی به سرور ارسال کند. روش ارسال نیز باید از نوع post باشد.
یک فرم ساده برای آپلود فایل
|
1 2 3 4 5 6 7 |
<form action="upload.php" method="post" enctype="multipart/form-data"> <label for="file">انتخاب فایل</label><br> <input type="file" name="file" id="file" required> <br><br> <input type="submit" value="آپلود فایل"> </form> |
فیلدهای موجود در فرم بالا عبارتند از:
- فیلد انتخاب فایل از نوع
fileکه با کلیک روی آن، پنجرهی انتخاب فایل در سیستم کاربر باز میشود. - دکمه ارسال از نوع
submitبرای ارسال فایل انتخابشده به سرور.
نکات مهم در طراحی فرم آپلود فایل
۱- تعیین حداکثر حجم فایل
همیشه در سمت سرور و همچنین در صورت امکان در سمت کاربر (با استفاده از جاوااسکریپت) محدودیت حجم فایل را اعمال کنید تا از ارسال فایلهای حجیم و ایجاد فشار روی سرور جلوگیری شود.
۲- محدود کردن نوع فایلها
با استفاده از ویژگی accept در تگ <input type="file"> میتوانید انواع فایلهای مجاز را مشخص کنید. برای مثال:
accept=".pdf,.doc,.docx"برای فایلهای متنیaccept="image/png, image/jpeg"برای تصاویرaccept="audio/*"برای فایلهای صوتی
موارد امنیتی در ساخت فرمها
فرمهایی که حاوی اطلاعات حساس شامل گذرواژه هستند، برای حفظ امنیتی از طریق پروتکل https باید ارسال شوند تا امکان شنود و تغییر آنها وجود نداشته باشد. همچنین در ارسال این نوع اطلاعات باید از متد post استفاده شود.