آموزش بکارگیری فرم در html (بخش چهارم)

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

صفت‌ها یا attribute های Input در فرم html

Inputها صفت و انواع مختلفی دارند که بخصوص نوع type آنها قبلا ذکر شده است که سبب می‌شود تا ظاهر این المان به شکل‌های مختلف در آید (ورودی متنی، چک باکس، دکمه رادیویی، انتخابگر رنگ، رِنج اعداد، تاریخ و ...). در این بخش سایر صفات آن را نام می‌بریم.

1- صفت value

صفت value برای نسبت دادن یک مقدار اولیه یا پیشفرض به Input می‌تواند به کار برود. این صفت اگر در یک Input با type برابر text، نوشته شود، مقدار آن در داخل باکس مربوط به آن نمایش داده می‌شود که در حالت عادی به صورت دستی قابل تغییر است.

2- صفت readonly

این صفت سبب می‌شود که مقدار Input به صورت فقط خواندنی باشد و آن را غیر قابل تغییر یا نوشتن مجدد می‌کند؛ با این حال مقدار آن هنگام submit کردن فرم، ارسال می‌شود.

3- صفت diabled

وقتی از صفت disabled استفاده شود، Input غیر قابل کلیک و استفاده می‌شود؛ در این حالت مقدار آن نیز هنگام submit کردن فرم، ارسال نمی‌شود.

4- صفت size

صفت size، مقدار عرض یک Input را بر اساس تعداد کاراکتر مشخص می‌کند. در حالت پیش فرض (اگر مشخص نشود) مقدار آن برابر با 20 است و برای Inputeهای با type برابر text، tel، password، url، email و search می‌تواند به کار رود.

5- صفت Maxlength

صفت Maxlength وقتی برابر با مقداری قرار گیرد، یعنی حداکثر به همان تعداد می‌تواند کاراکتر در آن قرارگیرد (تایپ مقادیر بیشتر از مقدار مشخص شده اجازه داده نمی‌شوند).

6- صفت‌ها min و max

صفت‌های min و max بری مشخص کردن یک محدوده یا رِنج از مقادیر کاربرد دارند. برای مثال فرض کنید بخواهید که کاربر مجاز به انتخاب تاریخ در یک محدوه خاص باشد، یا اعداد را بخواهید به نحوی محدود کنید که بالاتر یا پایینتر از یک محدوده قابل submit کردن نباشد و هنگام ارسال مقادیر غیرمجاز، فرم با خطا روبرو شود.

7- صفت multiple

صفت multiple برای type یا نوع file و email به کار می‌رود و وقتی که از آن در Input استفاده شود، می‌توان بیش از یک فایل را از طریق آن انتخاب کرد یا بیش از یک ایمیل را ارسال کرد که این ایمیل‌ها باید با کاما از هم مجزا شده باشند.

8- صفت pattern

از صفت pattern می‌توان یک Regex(Regular Expression) یا عبارت قاعده‌مند را برای نوع ورودی مشخص کرد تا در صورتی که مغایرتی با قاعده مشخص شده وجود داشته باشد، مقادیر ارسال نمی‌شوند. Regex ها یک سری اصولی دارد که البته نیاز نیست در اینجا یاد بگیرید و بسیاری از چیزهایی که نیاز دارید را با یک سرچ در اینترنت خواهید یافت. مثلا اگر بخواهید شماره تلفن‌های همراه ایران را با استفاده از آن اعتبار سنجی کنید از الگوی زیر می‌توانید استفاده کنید:

09(1[0-9]|3[1-9]|2[1-9])-?[0-9]{3}-?[0-9]{4}

9- صفت placeholder

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

10- صفت required

در حالت عادی، اگر هیچ مقداری در داخل یک یا چند Input درج نشود، مقدار آن به صورت خالی با submit کردن فرم ارسال می‌شود؛ اما اگر بخواهید که یک Input حتما مقدار داشته باشد (مثلا فرض کنید شماره تماس فرد ثبت نام کننده حتما لازم باشد تا وارد شود)، در این صورت با استفاده از صفت required می‌توانید آن را اجباری کنید.

11- صفت step

صفت step مشخص کننده پرش در مقادیر ورودی است که می‌تواند در Input های با نوع number، range، date و … به کار روند. در این حالت، مقادیری که با تعداد پرش‌ها یا گام ها همخوانی ندارد، قابل submit نخواهند بود.

12- صفت autofocus

وقتی صفت autofocus برای یک Input به کار رود، نشان می‌دهد که آن Input باید هنگامی که صفحه حاوی فرم باز شد، به صورت خودکار فوکوس شود.

13- صفت autocomplete

قبلا در خصوص صفت autocomplete در فرم‌ها نکات لازم را ذکر کردیم و گفتیم که در صورت on بودن، مرورگر هنگام تایپ در یک Input، بر اساس مقادیری که کاربر قبلا وارد کرده است، گزینه‌هایی را نشان می‌دهد و او می‌تواند هر یک را که لازم داشته باشد انتخاب کند. در اینجا هم Input، به همان شکل دو مقدار on و off می‌تواند بگیرد و ارجحیت بیشتری نسبت به استفاده از همین صفت در فرم دارد.

** بد نیست در اینجا یک مثال که موارد بالا را در بر گرفته است، ببینید. توصیه می‌شود که آن را حتما در Visual Studio Code یا هر editor مشابه که استفاده می‌کنید، نیز وارد کرده و موشکافانه بررسی کنید. برای راهنمایی شما، نام صفت‌های استفاده شده در عنوان هر fieldset ذکر شده است. توجه شود که در این مثال یک Input داریم که اگر مقداری اولیه برای آن وارد نشود، با توجه به اجباری یا required بودن آن، مقادیر submit نخواهند شد.

<!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>
    <div>
        <form enctype="multipart/form-data">
            <fieldset>
                <legend>Value Attribute</legend>
                    <label for="name">Name: </label><br>
                    <input type="text" id="name" name="name" value="Ali"/><br>
                    <label for="date">Dtee:</label><br>
                    <input type="date" id="date" name="date" value="2018-08-25"/><br>
            </fieldset>

            <fieldset>
                <legend>Readonly Attribute</legend>
                    <label for="city">City: </label><br>
                    <input type="text" id="city" value="Tehran" name="city" readonly/><br>
            </fieldset>

            <fieldset>
                <legend>Disabled Attribute</legend>
                    <label for="gender">Gender: </label><br>
                    <input type="text" id="gender" value="Male"  name="gender" disabled/><br>
            </fieldset>

            <fieldset>
                <legend>Size Attribute</legend>
                    <label for="lastname1">LastName1: </label><br>
                    <input type="text" id="lastname1" value="Ahmadi"  name="lastname1"/><br>
                    <label for="lastname2">LastName2: </label><br>
                    <input size="20" type="text" id="lastname2" value="Abbasi"  name="lastname2"/><br>  
                    <label for="address1">Address1(Default Size):</label><br>
                    <input type="text" id="address1" value="No 1, Abbasi Alley, Hafez St., Tehran, Iran,  Postal Code: 1111111111"  name="address1"/><br>  
                    <label for="address2">Address2:</label><br>
                    <input size="70" type="text" id="address2" value="No 1, Abbasi Alley, Hafez St., Tehran, Iran,  Postal Code: 1111111111"  name="address2"/><br>
            </fieldset>

            <fieldset>
                <legend>Maxlength & Placeholder Attributes</legend>
                    <label for="descriptiom">Descriptiom about you: </label><br>
                    <input type="text" id="descriptiom"  name="descriptiom" maxlength="40" size="40" placeholder="Describe yourself"/><br>
            </fieldset>

            <fieldset>
                <legend>Max and Min Attributes</legend>
                    <label for="age">Your Age: </label><br>
                    <input type="number" id="age"  name="age"  min="15" max="80"/><br>
                    <label for="birth">Descriptiom about you: </label><br>
                    <input type="date" id="birth"  name="birth"  min="1942-01-01" max="2004-01-01"/><br>
            </fieldset>

            <fieldset>
                <legend>Multiple Attribute</legend>
                    <label for="file">Select a file: </label><br>
                    <input type="file" id="file"  name="file"/><br>
                    <label for="files">Select some files: </label><br>
                    <input type="file" id="files" name="file" multiple/><br>
            </fieldset>

            <fieldset>
                <legend>Pattern Attribute</legend>
                    <label for="phone">Select a file: </label><br>
                    <input type="tel" id="phone"  name="phone" pattern="09(1[0-9]|3[1-9]|2[1-9])-?[0-9]{3}-?[0-9]{4}"/><br>
            </fieldset>

            <fieldset>
                <legend>National Code</legend>
                    <label for="nathonalcode">Eye Color: </label><br>
                    <input id="nathonalcode"  name="nathonalcode" required/><br>
            </fieldset>

            <fieldset>
                <legend>Step Attribute</legend>
                    <label for="number">Type a Number(coefficient of 5, between 0 and 1000) </label><br>
                    <input type="number" id="number"  name="number"  min="0" max="1000" step="5"/><br>
                    <label for="selectnumber">Select a Number(coefficient of 5, between 50 and 200) </label><br>
                    <input type="range" id="selectnumber"  name="selectnumber" min="50" max="200" step="5"/><br>
            </fieldset>

            <fieldset>
                <legend>Autofocus Attribute</legend>
                    <label for="auto">Type something </label><br>
                    <input  id="auto"  name="auto" placeholder="This is Autofocused Input!" autofocus /><br>
            </fieldset>

            <fieldset>
                <legend>Autocomplete Attribute</legend>
                    <label for="completeon">Type here (autocomplete is on) </label><br>
                    <input  id="completeon"  name="completeon" autocomplete="on" /><br>
                    <label for="completeoff">Type here (autocomplete is off) </label><br>
                    <input  id="completeoff"  name="completeoff" autocomplete="off" /><br>
            </fieldset>
            <br>
            <input type="submit" value="Submit"/>
        </form>
    </div>
</body>
</html>

14- صفت formtarget

این صفت که در دکمه sumbit می‌تواند به کار رود، روش نشان دادن مقادیر فرم را بعد از submit کردن می‌تواند مشخص کند مثلا blank_ یا _self و …

دقت شود که formtarget نسبت به صفت target خود فرم که قبلا در بخش دوم در خصوص آن بحث کردیم و رفتار مشابهی داشت، ارجحیت بیشتری از نظر مرورگر دارد.

15- صفت formnovalidate

صفت formnovalidate هم می‌تواند در submit به کار رود و به این شکل اعتبارسنجی‌هایی که قبلا در خصوص آنها گفتیم را بی اعتبار کند و بدون بررسی آنها اقدام به submit فرم کند. این صفت همانند novalidate است که قبلا گفتیم متعلق به المان فرم است.

16- صفت form

اگر برای یک المان این صفت به کار رود و مقدار آن برابر با id یک فرم باشد، حتی با وجود اینکه خارج از محدوده form با id مشخص شده باشد، مقدار آن نیز submit خواهد شد.

17- صفت formaction

صفت formaction که در دکمه submit می‌تواند به کار رود، آدرس اکشنی را معرفی می‌کند که مقادیر فرم برای پردازش باید به آن ارسال شوند و مشابه صفت action خود فرم است اما اولویت یا ارجحیت بالاتری نسبت به آن دارد.

18- صفت formenctype

صفت formenctype همانند صفت enctype اما با اولویت بالاتر نسبت به آن است و فقط وقتی می‌تواند در دکمه submit به کار می‌رود که روش ارسال اطلاعات فرم یا method آن، post باشد. همانطور که قبلا گفته شد، روش کدگذاری اطلاعات برای submit را این صفت مشخص می‌کند.

19- صفت formmethod

صفت formmethod هم همانند صفت method فرم ولی با اولویت بالاتر است که قبلا در بخش دوم آموزش استفاده از فرمهای html در بخش دوم آموزش فرم‌ها، در خصوص آن توضیحات لازم داده شد.

هشدار در خصوص صفت‌های اعتبارسنجی ورودی‌ها

در اینجا لازم است تا یک هشدار مهم در خصوص اعتبارسنجی ورودی‌ها توسط کاربر، با توجه به الگوها یا محدودیت‌هایی که گفتیم با استفاده از برخی صفات قابل اعمال هستند بدهیم تا شما بدانید که این محدودیت ها و اعتبارسنجی‌ها به طور 100 درصد قابل اطمینان نیستند و روش‌ها و کلک‌هایی برای دور زدن آنها وجود دارد؛ به همین دلیل در موارد حیاتی لازم است تا مجددا اعتبارسنجی‌ها (در سمت سرور) انجام شوند که در خصوص آنها بعدا در سایر بخش‌ها توضیحات لازم را ارائه خواهیم داد.

جمع بندی و سخن پایانی

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