درس ششم: فرمها (پل ارتباطی با کاربر)
درس ششم: فرمها (پل ارتباطی با کاربر)
در این درس از CSLearn.ir یاد میگیریم چطور از کاربر اطلاعات بگیریم. هر جا که نیاز به ثبتنام، ورود، یا ارسال نظر باشد، ما از تگ Form استفاده میکنیم.
📝 ۱. عناصر اصلی فرم
هر فرم با تگ <form> شروع میشود. در داخل آن، تگهای ورودی قرار میگیرند:
- 🟣 <input>: پرکاربردترین تگ برای گرفتن ورودی (متن، رمز، ایمیل و غیره).
- 🟣 <label>: برای نوشتن عنوان هر کادر ورودی.
- 🟣 <textarea>: برای گرفتن متنهای طولانی (مثل متن پیام).
- 🟣 <button>: دکمهای که کاربر برای ارسال فرم روی آن کلیک میکند.
💻 نمونه کد یک فرم تماس ساده
به ویژگی type در تگهای input دقت کنید که نوع ورودی را تغییر میدهد:
<form> <label>نام شما:</label><br> <input type="text" placeholder="نام را اینجا بنویسید"><br><br> <label>ایمیل:</label><br> <input type="email"><br><br> <label>پیام شما:</label><br> <textarea rows="4" cols="30"></textarea><br><br> <button type="submit">ارسال پیام</button> </form>
💡 ۲. انواع ورودیها (Input Types)
با تغییر ویژگی type، میتوانید کنترلهای متفاوتی بسازید:
- password: کاراکترها را به صورت نقطه نشان میدهد.
- checkbox: برای انتخابهای چندگزینهای.
- radio: برای انتخاب فقط یک گزینه از بین چند مورد.
- file: برای آپلود فایل توسط کاربر.
🚩 تمرین درس ششم:
یک فرم “ثبتنام” بسازید که شامل یک ورودی برای نام کاربری، یک ورودی برای رمز عبور و یک دکمه برای ثبتنام باشد.