فرم‌ها و کنترل‌های ورودی در HTML

بهنام نوبخت · ۱۴۰۵/۶/۲۸

یک صفحه وب علاوه بر نمایش اطلاعات، باید بتواند با کاربر نیز تعامل داشته باشد. بسیاری از فعالیت‌های روزمره در وب، مانند ثبت‌نام، ورود به حساب کاربری، جستجو، ارسال پیام، ثبت سفارش و دریافت اطلاعات، به ورود یا انتخاب داده توسط کاربر نیاز دارند. HTML برای ایجاد چنین بخش‌هایی مجموعه‌ای از عناصر و کنترل‌های فرم را در اختیار ما قرار می‌دهد.

تا اینجا یاد گرفتیم چگونه اطلاعات را در یک صفحه وب نمایش دهیم.

اما یک صفحه وب فقط برای نمایش اطلاعات نیست.

در بسیاری از سایت‌ها لازم است کاربر اطلاعاتی را وارد کند. برای مثال:

برای ساخت چنین بخش‌هایی در HTML از Form یا فرم استفاده می‌کنیم.

در این مقاله با فرم‌ها و مهم‌ترین کنترل‌های ورودی HTML آشنا می‌شویم.

فرم چیست؟

فرم بخشی از یک صفحه وب است که به کاربر اجازه می‌دهد اطلاعاتی را وارد یا انتخاب کند.

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

<form>
    <input type="text">
    <button>ارسال</button>
</form>

در این مثال:

<form> محدوده فرم را مشخص می‌کند.
<input> یک کادر ورود اطلاعات ایجاد می‌کند.
<button> یک دکمه ایجاد می‌کند.

تگ `<form>`

برای ایجاد فرم از <form> استفاده می‌کنیم.

<form>
    ...
</form>

تمام کنترل‌هایی که مربوط به آن فرم هستند معمولاً داخل این تگ قرار می‌گیرند.

مثلاً:

<form>
    <input type="text">
    <input type="email">
    <button>ثبت</button>
</form>

تگ `<input>`

یکی از مهم‌ترین عناصر فرم، <input> است.

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

مثلاً:

<input type="text">

یک کادر متنی ایجاد می‌کند.

نوع input با ویژگی type مشخص می‌شود.

مثلاً:

<input type="text">

یا:

<input type="email">

یا:

<input type="password">

ورودی متنی — Text

اگر بخواهیم یک متن معمولی از کاربر دریافت کنیم، از:

<input type="text">

استفاده می‌کنیم.

مثلاً:

<form>
    <input type="text">
</form>

کاربر می‌تواند داخل این کادر متنی وارد کند.

برای مثال:

نام خود را وارد کنید

ویژگی `placeholder`

گاهی می‌خواهیم قبل از اینکه کاربر چیزی وارد کند، یک متن راهنما داخل کادر نمایش داده شود.

برای این کار از placeholder استفاده می‌کنیم.

<input type="text" placeholder="نام خود را وارد کنید">

placeholder فقط یک راهنما است و مقدار واقعی ورودی کاربر محسوب نمی‌شود.

مثلاً:

<input
    type="text"
    placeholder="مثلاً علی احمدی">

ویژگی `name`

یکی از ویژگی‌های مهم فرم‌ها name است.

مثلاً:

<input type="text" name="firstName">

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

مثلاً:

<input type="text" name="username">
<input type="email" name="email">

در اینجا دو فیلد با نام‌های متفاوت داریم.

در بخش‌های بعدی دوره، هنگام کار با فرم‌ها و ارسال اطلاعات، اهمیت name بیشتر مشخص خواهد شد.

ویژگی `value`

ویژگی value مقدار اولیه یک ورودی را مشخص می‌کند.

مثلاً:

<input type="text" value="علی">

در این حالت، کادر از ابتدا شامل عبارت «علی» است.

تفاوت آن با placeholder مهم است:

<input type="text" placeholder="نام خود را وارد کنید">

متن placeholder یک راهنما است.

اما:

<input type="text" value="علی">

مقدار واقعی اولیه فیلد است.

ورودی رمز عبور — Password

برای دریافت رمز عبور از:

<input type="password">

استفاده می‌کنیم.

مثال:

<input
    type="password"
    name="password"
    placeholder="رمز عبور">

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

ورودی ایمیل — Email

برای دریافت آدرس ایمیل:

<input type="email">

مثال:

<input
    type="email"
    name="email"
    placeholder="ایمیل خود را وارد کنید">

مرورگر می‌تواند هنگام ارسال فرم، بررسی‌های اولیه‌ای درباره ساختار ایمیل انجام دهد.

ورودی شماره — Number

اگر بخواهیم یک مقدار عددی دریافت کنیم، می‌توانیم از:

<input type="number">

استفاده کنیم.

مثلاً:

<input
    type="number"
    name="age"
    placeholder="سن">

می‌توان محدودیت‌هایی نیز تعیین کرد.

مثلاً:

<input
    type="number"
    min="1"
    max="100">

در این مثال مقدار ورودی می‌تواند بین ۱ تا ۱۰۰ باشد.

ورودی شماره تلفن — Tel

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

<input type="tel">

استفاده کرد.

مثال:

<input
    type="tel"
    name="phone"
    placeholder="شماره تلفن">

توجه کنید که tel الزاماً شماره تلفن را از نظر معتبر بودن بررسی نمی‌کند؛ بلکه مشخص می‌کند این ورودی برای شماره تلفن است.

ورودی تاریخ — Date

برای دریافت تاریخ می‌توان از:

<input type="date">

استفاده کرد.

مثال:

<input type="date" name="birthDate">

مرورگر می‌تواند کنترل مناسب انتخاب تاریخ را در اختیار کاربر قرار دهد.

Checkbox

گاهی کاربر باید بتواند یک یا چند گزینه را انتخاب کند.

برای این کار از:

<input type="checkbox">

استفاده می‌کنیم.

مثال:

<label>
    <input type="checkbox">
    مطالعه قوانین سایت را قبول دارم
</label>

در این حالت کاربر می‌تواند گزینه را فعال یا غیرفعال کند.

چند Checkbox

می‌توان چند گزینه داشت:

<p>مهارت‌های شما:</p>

<label>
    <input type="checkbox" name="skills" value="html">
    HTML
</label>

<label>
    <input type="checkbox" name="skills" value="css">
    CSS
</label>

<label>
    <input type="checkbox" name="skills" value="javascript">
    JavaScript
</label>

در این حالت کاربر می‌تواند چند مورد را هم‌زمان انتخاب کند.

Radio Button

گاهی کاربر باید فقط یکی از چند گزینه را انتخاب کند.

برای این کار از:

<input type="radio">

استفاده می‌کنیم.

مثال:

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

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

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

نکته مهم این است که گزینه‌های یک گروه Radio باید name یکسان داشته باشند.

مثلاً:

<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">

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

تفاوت Checkbox و Radio

تفاوت آن‌ها را به خاطر بسپارید:

Checkbox

برای انتخاب چند گزینه مناسب است.

☑ HTML
☑ CSS
☐ JavaScript

Radio

برای انتخاب یک گزینه از بین چند گزینه مناسب است.

◉ مرد
○ زن

Label چیست؟

یکی از تگ‌های مهم فرم <label> است.

Label برای مشخص کردن عنوان یا توضیح یک کنترل ورودی استفاده می‌شود.

مثلاً:

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

یا:

<label for="username">نام کاربری</label>
<input type="text" id="username">

در روش دوم، مقدار for در <label> با id ورودی یکسان است.

<label for="username">نام کاربری</label>

<input
    type="text"
    id="username"
    name="username">

این روش باعث می‌شود رابطه بین عنوان و فیلد به شکل واضح‌تری مشخص شود.

چرا استفاده از Label مهم است؟

استفاده از label فقط برای نمایش متن کنار input نیست.

Label باعث می‌شود فرم برای کاربران قابل فهم‌تر باشد و دسترسی‌پذیری بهتری داشته باشد.

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

به جای:

<input type="text">

بهتر است بنویسیم:

<label for="name">نام</label>
<input type="text" id="name" name="name">

فیلد چندخطی با `<textarea>`

گاهی یک خط برای دریافت اطلاعات کافی نیست.

مثلاً برای:

توضیحات
پیام
نظر کاربر
آدرس
توضیحات محصول

می‌توانیم از <textarea> استفاده کنیم.

مثال:

<textarea
    name="message"
    placeholder="پیام خود را وارد کنید"></textarea>

برخلاف <input>، textarea می‌تواند چند خط متن داشته باشد.

انتخاب از یک لیست با `<select>`

گاهی می‌خواهیم کاربر یک گزینه را از بین چند گزینه انتخاب کند.

برای این کار از <select> استفاده می‌کنیم.

مثال:

<label for="city">شهر</label>

<select id="city" name="city">
    <option value="tehran">تهران</option>
    <option value="shiraz">شیراز</option>
    <option value="tabriz">تبریز</option>
    <option value="mashhad">مشهد</option>
</select>

تگ <select> لیست انتخابی را ایجاد می‌کند.

هر گزینه نیز با <option> مشخص می‌شود.

تگ `<option>`

هر گزینه داخل <select> با <option> نوشته می‌شود.

مثلاً:

<option value="html">HTML</option>

متنی که کاربر می‌بیند:

HTML

و مقدار آن:

html

است.

بنابراین:

<option value="html">HTML</option>

دو بخش دارد:

value → مقداری که برای گزینه در نظر گرفته شده است.
متن داخل <option> → چیزی که کاربر می‌بیند.

انتخاب پیش‌فرض یک Option

می‌توانیم مشخص کنیم یک گزینه از ابتدا انتخاب شده باشد.

برای این کار از selected استفاده می‌کنیم.

<select name="city">
    <option value="tehran">تهران</option>
    <option value="shiraz" selected>شیراز</option>
    <option value="tabriz">تبریز</option>
</select>

در این مثال «شیراز» به صورت پیش‌فرض انتخاب شده است.

دکمه با `<button>`

برای ایجاد دکمه می‌توانیم از <button> استفاده کنیم.

مثال:

<button>ارسال</button>

در فرم‌ها معمولاً از دکمه برای ارسال اطلاعات استفاده می‌شود.

مثلاً:

<form>
    <input type="text" name="name">
    <button type="submit">ارسال</button>
</form>

نوع دکمه با `type`

ویژگی type مشخص می‌کند دکمه چه رفتاری داشته باشد.

مهم‌ترین حالت‌ها:

Submit

<button type="submit">ارسال</button>

برای ارسال فرم.

Reset

<button type="reset">پاک کردن</button>

برای بازنشانی مقادیر فرم.

Button

<button type="button">دکمه</button>

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

در این دوره فعلاً تمرکز اصلی ما روی submit و reset است.

ویژگی `required`

گاهی یک فیلد نباید خالی باشد.

برای این کار می‌توانیم از required استفاده کنیم.

مثال:

<label for="username">نام کاربری</label>

<input
    type="text"
    id="username"
    name="username"
    required>

اگر کاربر این فیلد را خالی بگذارد و فرم را ارسال کند، مرورگر می‌تواند از ارسال فرم جلوگیری کند و از کاربر بخواهد آن را تکمیل کند.

ویژگی‌های `minlength` و `maxlength`

می‌توانیم حداقل و حداکثر طول متن را مشخص کنیم.

مثلاً:

<input
    type="text"
    name="username"
    minlength="3"
    maxlength="20">

در این مثال:

حداقل طول: ۳ کاراکتر
حداکثر طول: ۲۰ کاراکتر

است.

ویژگی `min` و `max`

برای ورودی‌های عددی می‌توانیم محدوده مشخص کنیم.

<input
    type="number"
    name="age"
    min="18"
    max="100">

در این مثال مقدار سن باید در محدوده تعیین‌شده باشد.

یک فرم ثبت‌نام ساده

حالا چند موردی را که یاد گرفتیم در کنار هم قرار دهیم.

<form>

    <label for="name">نام:</label>
    <input
        type="text"
        id="name"
        name="name"
        required>

    <br><br>

    <label for="email">ایمیل:</label>
    <input
        type="email"
        id="email"
        name="email"
        required>

    <br><br>

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

    <br><br>

    <label for="phone">شماره تلفن:</label>
    <input
        type="tel"
        id="phone"
        name="phone">

    <br><br>

    <button type="submit">ثبت‌نام</button>

</form>

این یک فرم ساده ثبت‌نام ایجاد می‌کند.

ساخت یک فرم تماس با ما

مثال دیگری ایجاد کنیم:

<form>

    <label for="name">نام:</label>
    <input
        type="text"
        id="name"
        name="name"
        required>

    <br><br>

    <label for="email">ایمیل:</label>
    <input
        type="email"
        id="email"
        name="email"
        required>

    <br><br>

    <label for="subject">موضوع:</label>
    <input
        type="text"
        id="subject"
        name="subject">

    <br><br>

    <label for="message">پیام:</label>
    <br>

    <textarea
        id="message"
        name="message"
        rows="5"
        cols="40"
        placeholder="پیام خود را بنویسید"></textarea>

    <br><br>

    <button type="submit">ارسال پیام</button>

</form>

در این مثال از:

text
email
textarea
button

استفاده کرده‌ایم.

فرم کامل‌تر

حالا یک فرم ثبت‌نام کامل‌تر ایجاد کنیم:

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">
    <title>فرم ثبت‌نام</title>
</head>

<body>

    <h1>ثبت‌نام</h1>

    <form>

        <div>
            <label for="name">نام:</label>
            <input
                type="text"
                id="name"
                name="name"
                placeholder="نام خود را وارد کنید"
                required>
        </div>

        <br>

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

        <br>

        <div>
            <label for="password">رمز عبور:</label>
            <input
                type="password"
                id="password"
                name="password"
                required>
        </div>

        <br>

        <div>
            <label for="age">سن:</label>
            <input
                type="number"
                id="age"
                name="age"
                min="1"
                max="120">
        </div>

        <br>

        <div>
            <label for="city">شهر:</label>

            <select
                id="city"
                name="city">

                <option value="tehran">تهران</option>
                <option value="shiraz">شیراز</option>
                <option value="tabriz">تبریز</option>
                <option value="mashhad">مشهد</option>

            </select>
        </div>

        <br>

        <div>
            <p>نوع حساب:</p>

            <label>
                <input
                    type="radio"
                    name="accountType"
                    value="personal">

                شخصی
            </label>

            <label>
                <input
                    type="radio"
                    name="accountType"
                    value="business">

                تجاری
            </label>
        </div>

        <br>

        <div>
            <label>
                <input
                    type="checkbox"
                    name="terms"
                    required>

                قوانین سایت را می‌پذیرم
            </label>
        </div>

        <br>

        <button type="submit">ثبت‌نام</button>
        <button type="reset">پاک کردن</button>

    </form>

</body>

</html>

این مثال بسیاری از عناصر مهم فرم را در کنار یکدیگر قرار داده است.

یک نکته مهم درباره `form`

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

<form>

اما در پروژه‌های واقعی فرم معمولاً نیاز دارد مشخص کند اطلاعات باید کجا و با چه روشی ارسال شوند.

برای این کار ویژگی‌های مهمی مانند:

action
method

وجود دارند.

مثلاً:

<form action="/register" method="post">

در اینجا:

action مقصد ارسال فرم را مشخص می‌کند.
method روش ارسال اطلاعات را مشخص می‌کند.

در این مرحله لازم نیست وارد جزئیات ارسال اطلاعات شویم؛ چون برای درک کامل آن، باید ابتدا با مفاهیم بیشتری آشنا شویم.

بعداً هنگام کار با بخش‌های سمت سرور، این موضوع اهمیت بیشتری پیدا خواهد کرد.

تفاوت Form و Input

این دو را با هم اشتباه نگیرید.

`<form>`

ظرف یا محدوده کلی فرم است.

`<input>`

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

مثلاً:

<form>

    <input type="text">
    <input type="email">

    <button type="submit">
        ارسال
    </button>

</form>

در اینجا یک فرم داریم که شامل دو input و یک button است.

فهرست مهم‌ترین کنترل‌هایی که یاد گرفتیم

عنصر	کاربرد
`<form>`	ایجاد فرم
`<input type="text">`	ورود متن
`<input type="password">`	ورود رمز عبور
`<input type="email">`	ورود ایمیل
`<input type="number">`	ورود عدد
`<input type="tel">`	ورود شماره تلفن
`<input type="date">`	انتخاب تاریخ
`<input type="checkbox">`	انتخاب چند گزینه
`<input type="radio">`	انتخاب یک گزینه
`<textarea>`	ورود متن چندخطی
`<select>`	انتخاب از لیست
`<option>`	یک گزینه از لیست
`<button>`	ایجاد دکمه
`<label>`	عنوان و توضیح فیلد

اشتباهات رایج

۱. استفاده نکردن از Label

این روش:

<input type="text">

برای یک فرم واقعی اطلاعات کمی درباره کاربرد فیلد به کاربر می‌دهد.

بهتر است:

<label for="name">نام</label>
<input type="text" id="name" name="name">

۲. استفاده اشتباه از Radio

اگر Radioها name یکسان نداشته باشند، ممکن است رفتار مورد انتظار برای انتخاب یک گزینه از یک گروه را نداشته باشند.

مثلاً:

<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">

درست است.

۳. استفاده از Checkbox برای انتخاب فقط یک گزینه

اگر کاربر باید فقط یک گزینه را انتخاب کند، معمولاً Radio انتخاب مناسب‌تری است.

۴. تصور اینکه `placeholder` جای Label را می‌گیرد

این دو یکی نیستند.

مثلاً:

<input
    type="text"
    placeholder="نام خود را وارد کنید">

در بسیاری از فرم‌ها همچنان بهتر است یک label مشخص داشته باشیم.

۵. تصور اینکه HTML تمام اعتبارسنجی را انجام می‌دهد

ویژگی‌هایی مثل:

required
min
max
minlength
maxlength

برای اعتبارسنجی اولیه مرورگر بسیار مفید هستند.

اما در یک برنامه واقعی نباید فقط به اعتبارسنجی سمت مرورگر وابسته باشیم.

اعتبارسنجی سمت سرور موضوعی جداگانه است که در مباحث بعدی و سمت Backend بیشتر با آن آشنا می‌شویم.

تمرین عملی

تمرین ۱ — فرم ورود

فرمی ایجاد کنید که شامل موارد زیر باشد:

نام کاربری
رمز عبور
دکمه ورود

برای نام کاربری از text و برای رمز عبور از password استفاده کنید.

تمرین ۲ — فرم ثبت‌نام

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

باشد.

تمرین ۳ — فرم تماس

فرمی ایجاد کنید که شامل:

نام
ایمیل
موضوع
متن پیام
دکمه ارسال

باشد.

برای متن پیام از <textarea> استفاده کنید.

تمرین ۴ — Checkbox

فرمی ایجاد کنید که کاربر بتواند چند مهارت را انتخاب کند:

HTML
CSS
JavaScript
C#
ASP.NET Core

برای هر مورد یک Checkbox ایجاد کنید.

تمرین ۵ — Radio

از کاربر بخواهید نوع حساب خود را انتخاب کند:

شخصی
شرکتی

در این تمرین باید فقط امکان انتخاب یکی از گزینه‌ها وجود داشته باشد.

چالش مقاله

یک صفحه ثبت‌نام برای یک دوره آموزشی طراحی کنید.

صفحه باید شامل:

اطلاعات شخصی

نام
نام خانوادگی
ایمیل
شماره تلفن

اطلاعات دوره

یک select ایجاد کنید که شامل دوره‌های زیر باشد:

طراحی وب
برنامه‌نویسی C#
JavaScript
ASP.NET Core

سطح مهارت

با Radio:

مبتدی
متوسط
پیشرفته

مهارت‌ها

با Checkbox:

HTML
CSS
JavaScript
C#

توضیحات

با <textarea> یک فیلد برای توضیحات ایجاد کنید.

قوانین

یک Checkbox برای پذیرش قوانین قرار دهید و آن را required کنید.

دکمه‌ها

دو دکمه داشته باشید:

ثبت‌نام
پاک کردن

سعی کنید تمام این موارد را فقط با HTML پیاده‌سازی کنید و فعلاً نگران زیبایی فرم نباشید.

جمع‌بندی

فرم‌ها یکی از مهم‌ترین بخش‌های HTML هستند، زیرا امکان دریافت اطلاعات از کاربر را فراهم می‌کنند.

در این مقاله یاد گرفتیم:

<form> برای ایجاد فرم است.
<input> برای دریافت انواع مختلف اطلاعات استفاده می‌شود.
text برای متن معمولی است.
password برای رمز عبور است.
email برای ایمیل است.
number برای اعداد است.
tel برای شماره تلفن است.
date برای تاریخ است.
checkbox برای انتخاب چند گزینه است.
radio برای انتخاب یک گزینه از بین چند گزینه است.
<textarea> برای متن چندخطی است.
<select> و <option> برای لیست‌های انتخابی هستند.
<label> برای مشخص کردن عنوان فیلدها استفاده می‌شود.
<button> برای ایجاد دکمه است.
required برای اجباری کردن یک فیلد کاربرد دارد.
placeholder متن راهنما را نمایش می‌دهد.
name نام یک فیلد را مشخص می‌کند.
value مقدار یک ورودی یا گزینه را مشخص می‌کند.

تا اینجا تقریباً مهم‌ترین عناصر پایه‌ای HTML را یاد گرفته‌ایم و می‌توانیم صفحات نسبتاً کاملی ایجاد کنیم.

در مقاله بعدی سراغ یکی از مفاهیم مهم و بسیار پرکاربرد HTML می‌رویم و با مفهوم Attributeها به شکل کامل‌تر آشنا می‌شویم و یاد می‌گیریم چگونه با ویژگی‌هایی مثل id، class، title، style و سایر Attributeها رفتار و اطلاعات عناصر HTML را کنترل کنیم.

۰۰

نظرات

هنوز نظری ثبت نشده است.

فرم‌ها و کنترل‌های ورودی در HTML

فرم چیست؟

تگ <form>

تگ <input>

ورودی متنی — Text

ویژگی placeholder

ویژگی name

ویژگی value

ورودی رمز عبور — Password

ورودی ایمیل — Email

ورودی شماره — Number

ورودی شماره تلفن — Tel

ورودی تاریخ — Date

Checkbox

چند Checkbox

Radio Button

تفاوت Checkbox و Radio

Checkbox

Radio

Label چیست؟

چرا استفاده از Label مهم است؟

فیلد چندخطی با <textarea>

انتخاب از یک لیست با <select>

تگ <option>

انتخاب پیش‌فرض یک Option

دکمه با <button>

نوع دکمه با type

Submit

Reset

Button

ویژگی required

ویژگی‌های minlength و maxlength

ویژگی min و max

یک فرم ثبت‌نام ساده

ساخت یک فرم تماس با ما

فرم کامل‌تر

یک نکته مهم درباره form

تفاوت Form و Input

<form>

<input>

فهرست مهم‌ترین کنترل‌هایی که یاد گرفتیم

اشتباهات رایج

۱. استفاده نکردن از Label

۲. استفاده اشتباه از Radio

۳. استفاده از Checkbox برای انتخاب فقط یک گزینه

۴. تصور اینکه placeholder جای Label را می‌گیرد

۵. تصور اینکه HTML تمام اعتبارسنجی را انجام می‌دهد

تمرین عملی

تمرین ۱ — فرم ورود

تمرین ۲ — فرم ثبت‌نام

تمرین ۳ — فرم تماس

تمرین ۴ — Checkbox

تمرین ۵ — Radio

چالش مقاله

اطلاعات شخصی

اطلاعات دوره

سطح مهارت

مهارت‌ها

توضیحات

قوانین

دکمه‌ها

جمع‌بندی

نظرات

تگ `<form>`

تگ `<input>`

ویژگی `placeholder`

ویژگی `name`

ویژگی `value`

فیلد چندخطی با `<textarea>`

انتخاب از یک لیست با `<select>`

تگ `<option>`

دکمه با `<button>`

نوع دکمه با `type`

ویژگی `required`

ویژگی‌های `minlength` و `maxlength`

ویژگی `min` و `max`

یک نکته مهم درباره `form`

`<form>`

`<input>`

۴. تصور اینکه `placeholder` جای Label را می‌گیرد