آموزش فرم در html؛ انواع Input (بخش 5؛ پایانی)

در بخش پایانی از آموزش فرم‌های html، انواع Input ها در این فرم‌ها بررسی می‌شوند و چندین مثال هم برای درک بیشتر این بخش ذکر خواهد شد.

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

انواع Input در فرم‌های html

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

1- Input نوع text

این نوع Input با صفت type برابر Text مشخص می‌شود. البته در نظر داشته باشید که اگر مقداری به صفت type آن ندهید هم به صورت پیش‌فرض، آن را Text در نظر می‌گیرد. همانطور که مشخص است از این المان برای گرفتن ورودی متنی استفاده می‌شود که در مثال زیر می‌توانید آن را ببینید.

<!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=n">
    <title>Newsunweb.com</title>
</head>
<body>
    <div>
     <form>
        <fieldset>
            <legend>Input, Type Text</legend>
            <label for="firstname">First Name:</label><br>
            <input type="text" id="firstname" name="FirstName"/><br>

            <label for="lastname">Last Name:</label><br>
            <input id="lastname" name="LastName"/><br>
        </fieldset>
      </form>
    </div>
</body>
</html>

توجه: همانطور که قبلا گفتیم، صفت for از label باید به همان صفت id از المان Input اشاره کند تا آنها را به هم مرتبط کند. برای بررسی این مساله می‌توانید روی هر label کلیک کنید و نتیجه را در مرورگر ببینید که در نتیجه این عمل، Input مرتبط با آن هایلایت شده و برای گرفتن ورودی از کاربر آماده می‌شود. نکته دیگر اینکه ما در input با id برابر lastname، نوع آن را مشخص نکردیم که همانطور که گفتیم، مرورگر به صورت پیش‌فرض، type را در صورتی که نوشته نشود برابر با text در نظر می‌گیرد.

2- Input نوع password

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

<body>
    <div>
      <form>
        <fieldset>
            <legend>Input, Type Password</legend>
            <label for="username">UserName:</label><br>
            <input id="username" name="UserName"/><br>

            <label for="password">Password:</label><br>
            <input type="password" id="password" name="Password"/><br>
        </fieldset>
     </form>
    </div>
</body>

3- Input نوع submit

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

 <input type="submit" value="Click Me"/>

این المان به شکل بالا البته در داخل یک فرم html درج می‌شود که ما در اینجا نشان ندادیم آن را. توجه کنید که اگر مقدار value را برای این المان ننویسید، مرورگر مقدار پیش‌فرض submit را به کاربر نشان خواهد داد.

مثال زیر را ببینید که ترکیب 3 نوع Input بالا را در نشان داده است. مقادیر را با کلیک بر دکمه submit به صفحه test.html بفرستید.

4- Input نوع reset

از این Input که type آن برابر یا reset است برای بازنشانی سایر Inputها به مقادیر اولیه شان استفاده می شود.

 <input type="reset" value="Click to Reset"/>

توجه کنید که در این المان نیز اگر مقدار value را مشخص نکنید، آن را به صورت پیش‌فرض برابر با Reset قرار می‌دهد.

5- Input با دکمه رادیویی

Input با دکمه رادیویی، برای انتخاب یک گزینه از میان چند گزینه استفاده می‌شود. در این المان صفت type برابر با radio قرار می‌گیرد و به شکل زیر استفاده می‌شود:

<body>
    <div>
        <form action="test.html">
            <fieldset>
                <legend>Input, Type Radio</legend>
                <span>Selecet your preferred age:</span><br>
                <input id="val1" type="radio" name="preferrence" value="15-20">
                <label for="val1">15-20</label><br>
                <input id="val2" type="radio" name="preferrence" value="20-30"/>
                <label for="val2">20-30</label><br>
                <input id="val3" type="radio" name="preferrence" value="30-40"/>
                <label for="val3">30-40</label><br>
                <input id="val4" type="radio" name="preferrence" value="40-50"/>
                <label for="val4">40-50</label><br>
            </fieldset>
            <br>
            <input type="submit"/>
        </form>
    </div>
</body>

که خروجی آن به شکل زیر است:

توجه کنید که در مثال بالا ما مقداری برای value ی input آخر قرار ندادیم و هر مرورگر به صورت پیش‌فرض مقداری را به آن اختصاص می‌دهد.

در این مثال بد نیست که روی خود محدوده‌های سنی ارائه شده (نه دکمه‌های رادیویی) هم کلیک کنید؛ در این صورت می‌بینید که دکمه رادیویی معادل آن انتخاب می‌شود. به نظر شما دلیل این مساله چیست؟

6- Input از نوع چک باکس یا checkbox

Input از نوع چک باکس یا checkbox یکی دیگر از انواع المان‌های Input است که قابلیت انتخاب 1 یا چند گزینه را برای کاربران فراهم می‌کند.

<body>
    <div>
        <form action="test.html">
            <fieldset>
                <legend>Input, Type Checkbox</legend>
                <span>Select:</span><br>
                <input id="tall" type="checkbox" name="height" value="Tall">
                <label for="tall">I am tall</label><br>
                <input id="rich" type="checkbox" name="financial" value="Rich">
                <label for="rich">I am tall</label><br>
                <input id="browneye" type="checkbox" name="eyecolor" value="BrownEye">
                <label for="browneye">I have brown eye</label><br>
                <input id="student" type="checkbox" name="training" value="Student">
                <label for="student">I am a student</label><br>
            </fieldset>
            <br>
            <input type="submit"/>
        </form>
    </div>
</body>

خروجی کدهای بالا به شکل زیر است:

7- Input از نوع color

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

<body>
    <div>
        <form action="test.html">
            <fieldset>
                <legend>Input, Type Color</legend>
                <span>Select a color:</span><br>
                <input type="color" name="selectedcolor"/>
            </fieldset>
            <br>
            <input type="submit"/>
        </form>
    </div>
</body>

8- Input با نوع date

Input از نوع date، نوع داده‌ای تاریخ را دریافت می‌کند و در مرورگرهایی که قابلیت پشتیبانی دارند، با انتخاب آن کادری ظاهر می‌شود که قابلیت انتخاب تاریخ توسط آن فراهم می‌شود.

<body>
    <div>
        <form action="test.html">
            <fieldset>
                <legend>Input, Type Date</legend>
                <span>Your birthday:</span><br>
                <input type="date" name="birthday"/>
            </fieldset>
            <br>
            <input type="submit"/>
        </form>
    </div>
</body>

9- Input نوع datetime-local

در المان نوع datetime-local، علاوه بر تاریخ که در مورد هشتم با آن آشنا شدید، زمان نیز قابل وارد کردن است و در مرورگرهایی که پشتیبانی می‌شود، یک کادر ظاهر می‌شود تا با انتخاب تاریح و زمان، مقدار آن تخصیص یابد.

<body>
    <div>
        <form action="test.html">
            <fieldset>
                <legend>Input, Type datetime-local</legend>
                <label for="dtime">Your interview is on:<br>
                <input type="datetime-local" name="datetime" id="dtime"/>
            </fieldset>
            <br>
            <input type="submit"/>
        </form>
    </div>
</body>

10- Input نوع Email

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

<body>
    <div>
        <form action="test.html">
            <fieldset>
                <legend>Input, Type Email</legend>
                <label for="emailaddress">Your Email:<br>
                <input type="email" name="email" id="emailaddress"/>
            </fieldset>
            <br>
            <input type="submit"/>
        </form>
    </div>
</body>

11- Input نوع File

این نوع Input که از نوع File است، برای انتخاب یک یا چند فایل استفاده می‌شود.

<body>
    <div>
        <form action="test.html">
            <fieldset>
                <legend>Input, Type File</legend>
                <label for="filechoose">Choose File(s):<br>
                <input type="file" name="file" id="filechoose" multiple/>
            </fieldset>
            <br>
            <input type="submit"/>
        </form>
    </div>
</body>

توجه: در مثال بالا از صفت multiple استفاده کردیم تا کاربر بتواند همزمان چند فایل را انتخاب کند؛ در صورتی که از این صفت استفاده نشود، تنها یک فایل قابل انتخاب است.

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

<body>
    <div>
        <form action="test.html">
            <fieldset>
                <legend>Input, Type File</legend>
                <label for="filechoose">Choose Office File(s) (Word & Excel):<br>
                <input type="file" name="file" id="filechoose" multiple accept=".docx, .xlsx"/>
                <br><br><br>
                <label for="image">Choose an Image:<br>
                <input type="file" name="image" id="image" accept="image/png"/>
                <br><br><br>
                <label for="images">Choose Image(s):<br>
                <input type="file" name="images" id="imagechoose" multiple accept="image/*"/>
            </fieldset>
            <br>
            <input type="submit"/>
        </form>
    </div>
</body>

12- Input نوع hidden

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

13- Input نوع month

از Input با نوع month برای گرفتن ورودی به شکل ماه و سال از کاربر استفاده می‌شود و در مرورگرهایی که پیشتیبانی می‌شود، یک کادر انتخاب تاریخ بر اساس ماه و سال با کلیک بر این Input ظاهر می‌شود.

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

<body>
    <div>
        <form action="test.html">
            <fieldset>
                <legend>Input, Type Hidden</legend>
                <lable for="fname">First Name:</lable>
                <input type="text" id="fname" name="firstname" value="Ali"/><br>
                <input type="hidden" name="custometId" value="5"/>
            </fieldset>
            <fieldset>
                <legend>Input, Type Month</legend>
                <lable for="ymonth">Select Year and Month:</lable>
                <input type="month" id="ymonth" name="date" /><br>
            </fieldset>
            <br>
            <input type="submit"/>
        </form>
    </div>
</body>

14-Input از نوع number

Input از نوع number برای گرفتن ورودی عددی صحیح (مثبت یا منفی) از کاربر استفاده می‌شود و مقادیر غیر عددی را دریافت نمی‌کند. با استفاده از صفات step، max، min و … می‌توان محدودیت‌های لازم را بر این المان جهت محدود کردن یا سفارشی کردن مقادیر دریافتی اعمال کرد. برای مثال با استفاده از این صفات در مثال زیر توانسته ایم، محدودیتی را برای دریافت اعداد مضرب 3 و دو رقمی اعمال کنیم:

<body>
    <div>
        <form action="test.html">
            <fieldset>
                <legend>Input, Type Number</legend>
                <lable for="numb">Enter a (multiplied by 3) two digit number:</lable>
                <input type="number" id="numb" name="enterednumber" min="12" max="99" step="3"/><br>
            </fieldset>
            <br>
            <input type="submit"/>
        </form>
    </div>
</body>

14-Input نوع range

از Input با نوع range برای انتخاب یک عدد از میان یک رنج از اعداد که با استفاده از تغییر مکان یک دکمه لغزنده متحرک روی آن ایجاد می‌شود، استفاده می‌گردد. برای این ورودی نیز همانند نوع number، محدودیت‌هایی مانند min، max، step و … قابل اعمال است. توجه کنید که در حالت پیش‌فرض، اعدادی که می‌توانند به این نوع Input تخصیص پیدا کنند، اعداد صحیح از 0 تا 100 هستند.

<body>
    <div>
        <form action="test.html">
            <fieldset>
                <legend>Input, Type Range</legend>
                <lable for="numb">Select a number:</lable>
                <input type="range" name="number"><br>
            </fieldset>
            <br>
            <input type="submit"/>
        </form>
    </div>
</body>

15- Input نوع search

Input نوع search در فرم‌ها برای جستجو به کار می‌رود و رفتاری مشابه نوع text دارد.

16- Input با نوع time

از Input با نوع time جهت گرفتن ورودی زمان استفاده می‌شود و در مرورگرهایی که پشتیبانی می‌کنند، با کلیک روی علامت زمان این ورودی، کادری ظاهر می‌شود که با استفاده از آن می‌توان زمان مورد نظر را انتخاب کرد.

17- Input نوع url

از Input نوع url جهت گرفتن ورودی به شکل یک آدرس اینترنتی از کاربر استفاده می‌شود.

18- Input نوع week

در نهایت Input نوع week باید بدانید که برای وارد کردن هفته با فرمت مشخص استفاده می‌شود و در مرورگرهایی که پشتیبانی می‌کنند، با کلیک یک کادر برای انتخاب هفته از سال مشخص استفاده می‌شود.

کاربرد موارد 15 تا 18 ذکر شده در توضیحات بالا و همچنین نوع reset که در مورد چهارم از موارد چندگانه مربوط به بحث Input ها در همین عناوین بالا شرح داده شد را می‌توانید در قالب مثال زیر مشاهده کنید:

<body>
    <div>
        <form action="test.html">
            <fieldset>
                <legend>Input, Type: Search </legend>
                <label for="searchword">Eter a Keyword:</lable><br>
                <input type="search" id="searchword" name="searched"/>
            </fieldset><br>

            <fieldset>
                <legend>Input, Type: Time </legend>
                <label for="sptime">Sport Time</label><br>
                <input type="time" id="sptime" name="sporttime"/>
            </fieldset><br>

            <fieldset>
                <legend>Input, Type: URL</legend>
                <label for="webadd">The Website Address:</label><br>
                <input type="url" id="webadd" name="website" value="https://www.newsunweb.com" size="30"/>
            </fieldset><br>

            <fieldset>
                <legend>Input, Type: Week</legend>
                <label for="testweek">Select a Week:</label><br>
                <input type="week" id="testweek" name="week"/>
            </fieldset><br> 

             <input type="submit" value="Submit"/>
             <input type="reset" value="Reset"/>
        </form>
    </div>
</body>

جمع‌بندی پایانی

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

لینک این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید.