فرم ها در صفحات html (بخش دوم)

در مقاله قبلی که بخش اول آموزش فرم در html بود، نکات پایه‌ای را ذکر کردیم و برخی از المان‌هایی که در آن قرار می‌گیرند را نام بردیم که بیشتر از نوع Input بودند که صفت‌های type گوناگون آن، سبب می‌شدند تا شمایل مختلف به خود بگیرند. در ادامه المان‌ها و نکات بیشتری در خصوص آن ارائه خواهد شد.

صفت های فرم در html

فرم دارای برخی attribute ها یا صفت‌هایی است که باید با آنها آشنایی کافی داشته باشید. برخی از این صفت‌ها عبارتند از:

1- صفت action در فرم

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

2- صفت target فرم‌ها

این صفت نحوه دریافت اطلاعات توسط صفحه دومی که اطلاعات به آن ارسال می‌شوند را مشخص می کند که ممکن است به یکی از اشکال blank_، self_، _parent، _top_ و framename_ باشد. مقدار پیش‌فرض هم self_ است که سبب باز شدن صفحه دوم در همان تب صفحه ابتدایی می‌شود. blank_ هم سبب می‌شود که اطلاعات ارسال شده به صفحه دوم، با باز شدن آن در یک برگه جدید از مرورگر ارسال شوند.

3- صفت method

این صفت اهمیت زیادی دارد و دو شکل آن به صورت  get و post می‌باشند که مقدار پیش فرض آن (در صورت مشخص نشدن نوع ارسال داده‌ها) به شکل get است. چند نکته مهم در خصوص ارسال اطلاعات فرم‌ها وجود دارد که در اینجا ذکر می‌شوند:

الف) وقتی اطلاعات توسط متد get ارسال می‌شوند، مقادیر در url مرورگر با استفاده از صفت name و مقدار value قابل مشاهده می‌باشند و در آن ذخیره هم می‌شوند. به این ترتیب در صورت ارسال اطلاعات حیاتی، این روش می‌تواند بسیار غیر ایمن باشد. این در حالی است که اطلاعات ارسالی توسط متد poat، در مرورگر دیده نمی‌شوند و امنیت بالاتری دارند.

ب) اطلاعاتی که از طریق متد get ارسال می‌شوند، قابل bookmark شدن هستند؛ در حالی که این مساله برای متد pos امکان پذیر نیست.

ج) متد get در ارسال اطلاعات محدودیت دارد؛ به دلیل اینکه url مرورگر 2048 کاراکتر محدودیت دارد؛ در حالی که در روش ارسال اطلاعات با متد post، محدودیتی از این جهت وجود ندارد.

4- صفت autocomplete

صفت autocomplete که بیانگر کامل شدن خودکار ورودی‌هایی بر اساس آنچه قبلا کاربر در فرم وارد کرده است، دو مقدار می‌گیرد: on و off. اگر مقدار آن on باشد، آن وقت مرورگر به صورت خودکار مقادیر ورودی فرم‌ها را بر اساس اطلاعاتی که قبلا کاربر وارد کرده است، نمایان می‌کند؛ اما اگر مقدار آن off باشد، این مساله اتفاق نمی افتد.

5- صفت novalidate

این صفت که مقداری ندارد، اگر به کار گرفته شود، مقادیر ورودی فرم اعتبارسنجی نمی‌شوند؛ مثلا اگر type یک input برابر با email بود، هنگام submit آن را غیرمعتبر در نظر نمی‌گیرد.

6- صفت enctype

صفت enctype سه مقدار می‌پذیرد که نحوه کدگذاری اطلاعات فرم را مشخص می‌کند و ما هر یک را در ادامه این بخش توضیح می‌دهیم:

الف) مقدار application/x-www-form-urlencoded: این مقدار یک مقدار پیش‌فرض برای صفت enctype نیز می‌باشد که توسط این مقدار، کاراکترهای ارسالی فرم، پیش از ارسال به سرور کدگذاری می‌شوند. در این حالت فاصله ها تبدیل به علامت + شده و بقیه کاراکترها تبدیل به کدهای اسکی هگزاردسیمال معادلشان می‌شوند.

ب- مقدار multipart/form-data: در صورت استفاده از این مقدار، مقادیر رمزنگاری نمی‌شوند و هنگامی از آن استفاده می‌شود که یک input از نوع file جهت آپلود فایل در داخل فرم داشته باشیم.

ج- مقدار text/plain: اگر در enctype از این نوع استفاده شود فواصل به +تبدیل می‌شوند، اما بقیه کاراکترها تغییری نمی‌کنند.

توجه: زمانی از enctype می‌توان استفاده کرد که مقدار method برابر با post باشد.

7- صفت name

از صفت name برای نسبت دادن یک نام به فرم html استفاده می‌شود.

سایر المان‌های فرم html

در مقاله قبلی در خصوص برخی المان‌ها مانند label و انواع input نکاتی را گفتیم. در ادامه با سایر المان‌های قابل استفاده در فرم html آشنا می‌شوید:

المان select

المان select یک لیست پایین افتادنی (Dropdown List) را معرفی می‌کند که هر یک توسط تگ option به آن اضافه می‌شوند.

توجه کنید که اگر بخواهید مقداری از قبل انتخاب شده را نشان دهید، می‌توانید از صفت selected در option استفاده کنید. همچنین اگر بخواهید کاربر را مجاز به انتخاب بیش از یک گزینه (حالت پیش فرض) کنید، می‌توانید از صفت multiple در select استفاده کنید و کاربر مثلا با فشار دادن کلید ctrl می‌تواند بیش از یک مقدار را از لیست انتخاب کند؛ در این حالت با استفاده از صفت size می‌توانید با مقدار دادن عددی آن، تعداد آیتم‌هایی که لازم است در لیست پایین افتادنی نشان داده شود را به کاربر نشان دهید. دقت کنید که در حالت آخر چنانچه مقدار size کمتر از تعداد آیتم‌های آن (option ها) باشد، توسط یک scrollbar سایر مقادیر قابل رویت هستند.

کدهای زیر را ببینید و بررسی کنید:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Newsunweb.com</title>
</head>
<body style="padding:5px 20px;">
    <div>
        <span>This is an example (using select element in a form)</span>
    </div>
    <div style="padding:10px; border:1px solid gray; width:50%">
        <form>
            <label for="user-name">Name:</label><br>
            <input type="text" name="usrname" id="user-name"/><br><br>
            <label for="selectedcourse">Plese select a course from the following dropdown list:</label><br>
            <select id="selectedcourse" name="course" >
                <option value="" hidden> --Please Secect-- </option>
                <option value="html">HTML</option>
                <option value="css">CSS</option>
                <option value="js">Javascript</option>
                <option value="csharp">C#</option>
                <option value="aspnetcore">ASP.NET Core</option>
            </select>
            <br><br>
            <label for="selectedlanguages">Plese select at least one language from the following dropdown list:</label><br>
            <select id="selectedcourse" name="languages" size="3" multiple >
                <option value="" hidden> --Please Secect-- </option>
                <option value="persian">Persian</option>
                <option value="english">English</option>
                <option value="russian">Russian</option>
                <option value="french">French</option>
                <option value="aerabic">Arabic</option>
            </select>
            <br><br>
            <input type="submit" value="send"/>
        </form>
    </div>
</body>
</html>

 هدف ما از ارائه فرم بالا، درک آن چیزی بود که در بالا گفتیم و توجه کنید که در فرم بالا برای جلوگیری از ارسال پارامترها توسط کاربر، دکمه send را غیرفعال کرده‌ایم.

سخن پایانی

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