آموزش HTML - فرم ها

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

فرم‌های HTML

فرم‌های HTML مجموعه‌ای از کنترل‌های تعاملی و انواع مختلف ورودی، مانند متن، اعداد، ایمیل، رمز عبور، دکمه‌های رادیویی، چک‌باکس‌ها، دکمه‌ها و موارد دیگر هستند که اطلاعات کاربران را جمع‌آوری می‌کنند. فرم‌های HTML با استفاده از تگ HTML <form> ایجاد می‌شوند. تمام تگ‌های مرتبط با دریافت ورودی از کاربر، داخل تگ <form> قرار می‌گیرند.

عنصر <form>

عنصر HTML <form> فرمی را برای جمع‌آوری اطلاعات کاربران در سند HTML تعریف می‌کند.

نحو

عنصر <form> دارای نحو زیر است؛ می‌توانید هر عنصر مرتبط با ورودی را داخل آن قرار دهید:

<form>
  <!-- Form elements-->
</form>

نحو زیر شامل تمام عناصر ضروری است:

<form action="url" method="method_type" target="target_value" enctype="enctype_value">
    <!-- Form elements-->
</form>

چرا از فرم‌های HTML استفاده می‌کنیم؟

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

• ایجاد فرم‌های ثبت‌نام تا کاربران بتوانند اطلاعات خود را وارد کنند و برای دسترسی به امکانات وب‌سایت‌ها و برنامه‌های وب، احراز هویت شوند.
• جمع‌آوری داده‌ها از طریق انواع مختلف نظرسنجی‌ها، فرم‌های بازخورد و موارد مشابه.
• بارگذاری تصاویر، رزومه‌ها یا هر نوع فایل دیگر.

ایجاد یک فرم HTML

برای ایجاد یک فرم HTML، از عنصر <form> به همراه سایر عناصر موردنیاز، متناسب با اطلاعاتی که می‌خواهید جمع‌آوری کنید، استفاده کنید؛ مانند کادرهای ورودی، دکمه‌ها، دکمه‌های رادیویی، چک‌باکس‌ها و موارد دیگر. این عناصر با نام کنترل‌های فرم (عناصر فرم) شناخته می‌شوند.

مثال

مثال زیر یک فرم HTML را نشان می‌دهد که شامل برخی از عناصر ضروری است:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Example</title>
</head>
<body>
  <h1>HTML Form Example</h1>
  <form>
    <!-- Text Input -->
    <label for="name"><strong>Name:</strong></label>
    <input type="text" id="name" name="name" placeholder="Enter your name" required>
    <br/><br/>

    <!-- Radio Buttons -->
    <label><strong>Gender:</strong></label>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label>
    <br/><br/>

    <!-- Checkboxes -->
    <label><strong>Hobbies:</strong></label>
    <input type="checkbox" id="reading" name="hobbies" value="reading">
    <label for="reading">Reading</label>
    <input type="checkbox" id="traveling" name="hobbies" value="traveling">
    <label for="traveling">Traveling</label>
    <input type="checkbox" id="sports" name="hobbies" value="sports">
    <label for="sports">Sports</label>
    <br/><br/>

    <!-- Submit Button -->
    <button type="submit">Submit</button>
  </form>
</body>
</html>

فرم HTML همراه با تغییر مسیر

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

مثال

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sample HTML Form</title>
</head>
<body>
    <!-- Start of the form element -->
    <form action="" method="post">
        <!-- Form controls -->
        <label for="first_name">First Name:</label>
        <input type="text" id="first_name" name="first_name" required />
        <br><br>

        <label for="last_name">Last Name:</label>
        <input type="text" id="last_name" name="last_name" required />
        <br><br>

        <input type="submit" value="Submit">
    </form>
</body>
</html>

نکته:

ویژگی action در تگ فرم HTML، نشانی اینترنتی (URL) صفحه‌ای را مشخص می‌کند که داده‌های فرم به آن ارسال می‌شوند یا پس از ارسال فرم، کاربر به آن هدایت می‌شود. می‌توانید نام فایلی را مشخص کنید که اطلاعات کاربر را برای پردازش بیشتر دریافت می‌کند. برای مثال، اگر نام فایل process.php باشد، از ویژگی action به شکل زیر استفاده کنید:

<form action="/process.php" method="post">

عناصر فرم

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

۱. عنصر <form>

از تگ <form> در HTML برای ایجاد عنصر <form> استفاده می‌شود. این عنصر، محفظه‌ای برای تمام عناصر دیگر فرم است. عنصر فرم به‌تنهایی فرم را ایجاد نمی‌کند، بلکه محفظه‌ای است که سایر عناصر فرم را در خود جای می‌دهد.

مثال

<form>.....</form>

۲. عنصر <input>

تگ <input> در HTML یکی از عناصر ضروری کنترل فرم برای دریافت ورودی کاربران از وب‌سایت‌ها است. می‌توانیم از این تگ برای ایجاد یک عنصر ورودی استفاده کنیم.

مثال

<input type = ".."/>

۳. عنصر <label>

تگ <label> در HTML برای ایجاد عنصری به نام برچسب استفاده می‌شود که عنوان یک مورد را در رابط کاربری (UI) نمایش می‌دهد یا به یک کنترل فرم مانند ورودی متنی، ناحیه متن، چک‌باکس، دکمه رادیویی و موارد دیگر برچسب اضافه می‌کند.

مثال

<label>.......</label>

۴. عنصر <legend>

تگ <legend> در HTML اولین فرزند این عنصر است و عنوان یا توضیحی را برای تگ <fieldset> مشخص می‌کند.

مثال

<legend>.......</legend>

۵. عنصر <select> در HTML

تگ <select> در HTML برای ایجاد فهرست کشویی در فرم‌های HTML استفاده می‌شود. می‌توانیم از این تگ برای ایجاد یک فهرست کشویی در هر مکانی که بخواهیم استفاده کنیم.

مثال

<select>....</select>

۶. عنصر <button>

تگ <button> در HTML عنصری تعاملی است که برای ایجاد دکمه در HTML استفاده می‌شود.

مثال

<button>Button</button>

۷. عنصر <fieldset>

تگ <fieldset> در HTML برای گروه‌بندی چند کنترل در یک فرم وب استفاده می‌شود. با استفاده از تگ <fieldset> و تگ <legend>، درک فرم برای کاربران بسیار آسان‌تر می‌شود.

مثال

   <fieldset>....</fieldset>

۸. عنصر <datalist>

تگ <datalist> در HTML مجموعه‌ای از عناصر <option> را در بر می‌گیرد که گزینه‌های پیشنهادی قابل انتخاب از میان گزینه‌های دیگر را نمایش می‌دهند.

مثال

<datalist>....</datalist>

۹. عنصر <output>

تگ <output> در HTML مؤلفه‌ای انعطاف‌پذیر و کمتر استفاده‌شده است که به برنامه‌نویسان امکان می‌دهد نتایج محاسبات یا اسکریپت‌ها را به‌صورت پویا در محتوای صفحه نمایش دهند.

مثال

<output> Results... </output>

۱۰. عنصر <option>

تگ <option> در HTML یا گزینه‌های فهرست داده‌ها را برای تکمیل خودکار تعریف می‌کند که با تگ <datalist> مشخص شده‌اند، یا موارد یک فهرست کشویی را تعریف می‌کند که با تگ <select> تعیین می‌شوند.

مثال

<option>.....</option>

۱۱. عنصر <optgroup>

تگ <optgroup> در HTML در عنصر <select> برای گروه‌بندی عناصر مرتبط <option> استفاده می‌شود.

مثال

<optgroup>
   <option>..</option>
     .
     .
</optgroup>

۱۲. عنصر <textarea>

تگ <textarea> در HTML برای نمایش یک کنترل ویرایش متن ساده و چندخطی استفاده می‌شود.

مثال

<textarea>.......</textarea>

ویژگی‌های فرم

ویژگی‌های فرم در HTML قابلیت‌های مشخصی مانند هدایت کاربر به صفحات وب دیگر، تکمیل خودکار متن و موارد دیگر را فراهم می‌کنند.

جدول زیر برخی از ویژگی‌های رایج فرم را فهرست می‌کند:

استایل‌دهی به فرم‌های HTML

می‌توانید با استفاده از CSS، ظاهر فرم‌های HTML و عناصر آن‌ها را متناسب با قالب وب‌سایت خود سفارشی‌سازی کنید یا جلوه‌ای جذاب‌تر به آن‌ها ببخشید.

مثال

مثال زیر یک فرم HTML را به همراه CSS نشان می‌دهد:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Form</title>
        <style>
            body {
                font-family: 'Segoe UI', Arial, sans-serif;
            }

            form {
                width: 100%;
                max-width: 400px;
                background-color: #e8f5e9;
                padding: 20px;
                border: 1px solid #ccc;
                border-radius: 5px;
            }

            legend {
                font-size: 1.2rem;
                font-weight: bold;
                margin-bottom: 10px;
            }

            label {
                display: block;
                margin-bottom: 5px;
                font-size: 0.9rem;
            }

            input[type="text"],
            input[type="email"],
            input[type="password"],
            textarea {
                width: 100%;
                padding: 8px;
                margin-bottom: 15px;
                border: 1px solid #ccc;
                border-radius: 4px;
                box-sizing: border-box;
            }

            textarea {
                resize: none;
            }

            input[type="submit"] {
                width: 100%;
                padding: 10px;
                font-size: 1rem;
                color: #fff;
                background-color: #04af2f;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }

            input[type="submit"]:hover {
                background-color: #039325;
            }
        </style>
    </head>
    <body>
        <form>
            <fieldset>
                <legend>Registration Form</legend>
                <label for="firstName">First Name</label>
                <input type="text" id="firstName" name="FirstName" />

                <label for="lastName">Last Name</label>
                <input type="text" id="lastName" name="LastName" />

                <label for="email">Email ID</label>
                <input type="email" id="email" name="email" />

                <label for="password">Enter Your Password</label>
                <input type="password" id="password" name="password" />

                <label for="confirmPass">Confirm Your Password</label>
                <input type="password" id="confirmPass" name="confirmPass" />

                <label for="address">Address</label>
                <textarea id="address" name="address"></textarea>

                <input type="submit" value="Submit" />
            </fieldset>
        </form>
    </body>
</html>