نمونه فرم 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 ارسال میکند.
موارد امنیتی در ساخت فرمها
فرمهایی که حاوی اطلاعات حساس شامل گذرواژه هستند، برای حفظ امنیتی از طریق پروتکل https باید ارسال شوند تا امکان شنود و تغییر آنها وجود نداشته باشد. همچنین در ارسال این نوع اطلاعات باید از متد post استفاده شود.