📝 درس پنجم: فرم‌ها و ورودی کاربر

🎯 هدف این درس: آشنایی با فرم‌ها و نحوه دریافت اطلاعات از کاربر

سلام دوست عزیز! 👋

توی درس‌های قبل، یاد گرفتی چطور اطلاعات رو به کاربر نشون بدی. اما یک وب‌سایت واقعی، فقط اطلاعات رو نمایش نمی‌ده؛ از کاربر هم اطلاعات می‌گیره. فرم‌ها دقیقاً همین کار رو انجام می‌دن.

توی این درس، با هم یاد می‌گیریم:

✅ ساخت فرم با تگ form
✅ انواع ورودی‌ها (input)
✅ دکمه‌ها و انتخاب‌ها
✅ تمرین: فرم ثبت‌نام ساده

📋 بخش ۱: ساختار فرم

برای ساخت فرم از تگ <form> استفاده می‌کنیم. همه ورودی‌ها و دکمه‌ها داخل این تگ قرار می‌گیرن.

ساختار کلی:

🌐
ساختار فرم

HTML
v5


<form>
    <!-- ورودی‌ها و دکمه‌ها اینجا قرار می‌گیرند -->
</form>

📝 بخش ۲: ورودی‌های مختلف (input)

تگ <input> پرکاربردترین تگ برای دریافت اطلاعات از کاربره. این تگ با ویژگی type مشخص می‌کنه که چه نوع ورودی‌ای باید نمایش بده.

📊 انواع ورودی‌ها

نوع	کاربرد	مثال
`text`	متن ساده	`<input type="text">`
`password`	رمز عبور	`<input type="password">`
`email`	ایمیل	`<input type="email">`
`number`	عدد	`<input type="number">`
`date`	تاریخ	`<input type="date">`
`checkbox`	چک‌باکس	`<input type="checkbox">`
`radio`	دکمه رادیویی	`<input type="radio">`
`submit`	دکمه ارسال	`<input type="submit">`

مثال: انواع ورودی‌ها

🌐
انواع ورودی

HTML
v5


<form>
    <p>
        <label>نام:</label>
        <input type="text" 
               name="name">
    </p>

    <p>
        <label>رمز عبور:</label>
        <input type="password" 
               name="password">
    </p>

    <p>
        <label>ایمیل:</label>
        <input type="email" 
               name="email">
    </p>

    <p>
        <label>سن:</label>
        <input type="number" 
               name="age">
    </p>

    <p>
        <label>تاریخ تولد:</label>
        <input type="date" 
               name="birthday">
    </p>

    <input type="submit" 
           value="ارسال">
</form>

💡 نکته مهم:

ویژگی name برای شناسایی هر ورودی در سمت سرور استفاده می‌شه. هر ورودی باید یک name منحصربه‌فرد داشته باشه.

🎯 بخش ۳: چک‌باکس و دکمه رادیویی

این دو نوع ورودی برای انتخاب‌های مختلف استفاده می‌شن.

چک‌باکس (Checkbox)

برای انتخاب چند گزینه از بین گزینه‌ها:

🌐
چک‌باکس

HTML
v5


<p>علاقه‌مندی‌ها:</p>

<input type="checkbox" 
       name="interests" 
       value="programming">
<label>برنامه‌نویسی</label>

<input type="checkbox" 
       name="interests" 
       value="design">
<label>طراحی</label>

<input type="checkbox" 
       name="interests" 
       value="music">
<label>موسیقی</label>

دکمه رادیویی (Radio)

برای انتخاب فقط یک گزینه از بین گزینه‌ها:

🌐
دکمه رادیویی

HTML
v5


<p>جنسیت:</p>

<input type="radio" 
       name="gender" 
       value="male">
<label>مرد</label>

<input type="radio" 
       name="gender" 
       value="female">
<label>زن</label>

⚠️ تفاوت چک‌باکس و رادیو

چک‌باکس برای انتخاب چند گزینه و دکمه رادیویی برای انتخاب یک گزینه استفاده می‌شه. دقت کن که دکمه‌های رادیویی باید name یکسانی داشته باشن تا گروه‌بندی بشن.

📝 بخش ۴: پروژه عملی – فرم ثبت‌نام

📝 پروژه: فرم ثبت‌نام ساده

یک فرم ثبت‌نام ساده بسازید که شامل موارد زیر باشد:

نام و نام خانوادگی
ایمیل
رمز عبور
جنسیت (با دکمه رادیویی)
علاقه‌مندی‌ها (با چک‌باکس)
دکمه ارسال

🔍 راه‌حل پروژه:

🌐
فرم ثبت‌نام

HTML
v5


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>فرم ثبت‌نام</title>
    </head>
    <body>
        <h1>📝 فرم ثبت‌نام</h1>

        <form>
            <p>
                <label>نام و نام خانوادگی:</label>
                <input type="text" 
                       name="fullname" 
                       placeholder="نام و نام خانوادگی">
            </p>

            <p>
                <label>ایمیل:</label>
                <input type="email" 
                       name="email" 
                       placeholder="example@email.com">
            </p>

            <p>
                <label>رمز عبور:</label>
                <input type="password" 
                       name="password">
            </p>

            <p>جنسیت:</p>
            <input type="radio" 
                   name="gender" 
                   value="male">
            <label>مرد</label>
            <input type="radio" 
                   name="gender" 
                   value="female">
            <label>زن</label>

            <p>علاقه‌مندی‌ها:</p>
            <input type="checkbox" 
                   name="interests" 
                   value="programming">
            <label>برنامه‌نویسی</label>
            <input type="checkbox" 
                   name="interests" 
                   value="design">
            <label>طراحی</label>
            <input type="checkbox" 
                   name="interests" 
                   value="music">
            <label>موسیقی</label>

            <br>
            <input type="submit" 
                   value="ثبت‌نام">
        </form>
    </body>
</html>

📝 تمرین‌های عملی

🎯 تمرین شماره ۱: فرم نظرخواهی

یک فرم نظرخواهی ساده بسازید که شامل نام، ایمیل، رتبه‌بندی (با دکمه رادیویی) و متن نظر باشد.

🎯 تمرین شماره ۲: فرم تماس با ما

یک فرم تماس با ما بسازید که شامل نام، ایمیل، موضوع (با لیست کشویی) و متن پیام باشد.

🧩 جمع‌بندی درس

تبریک می‌گم! 🎉 توی این درس یاد گرفتی:

✅ ساخت فرم با تگ <form>
✅ انواع ورودی‌های مختلف با <input>
✅ استفاده از چک‌باکس و دکمه رادیویی
✅ ساخت یک فرم ثبت‌نام کامل

🎯 برای درس بعدی آماده‌اید؟

در درس بعدی، با CSS آشنا می‌شیم و می‌تونیم صفحاتمون رو زیبا و جذاب کنیم.

🔗 لینک‌های مرتبط

⬅️
درس قبل: لیست‌ها و جداول

🚀
درس بعدی: آشنایی با CSS

🏠
صفحه دوره‌ها

👤

نویسنده

📅

تاریخ انتشار 19 مرداد 1405

🔄

آخرین بروزرسانی 19 مرداد 1405

دنیای تکنولوژی
از یادگیری شروع می‌شود

فرم‌ها و ورودی کاربر