آموزش HTML - کنترل‌های فرم

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

کنترل‌های فرم (عناصر فرم)

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

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

انواع مختلفی از کنترل‌های فرم وجود دارند که می‌توانیم برای جمع‌آوری داده‌ها با استفاده از فرم HTML از آن‌ها استفاده کنیم:

• کنترل‌های ورودی متن
• کنترل چک‌باکس‌ها
• کنترل دکمه‌های رادیویی
• کنترل کادر انتخاب
• کادر انتخاب فایل
• کنترل دکمه
• کنترل فرم مخفی
• کنترل‌های تاریخ و زمان
• کنترل تاریخ
• کنترل ماه
• کنترل هفته
• کنترل زمان
• کنترل عدد
• کنترل محدوده
• کنترل ایمیل
• کنترل نشانی اینترنتی (URL)

بیایید این کنترل‌ها را یک‌به‌یک بررسی کنیم −

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

کنترل‌های ورودی متن به سه دسته اصلی تقسیم می‌شوند −

• کنترل ورودی متن تک‌خطی

• کنترل ورودی گذرواژه

• کنترل ورودی متن چندخطی

کنترل ورودی متن تک‌خطی

کنترل ورودی متن تک‌خطی برای مواردی استفاده می‌شود که فقط به یک خط ورودی از کاربر نیاز دارند؛ مانند کادرهای جست‌وجو یا نام‌ها. این کنترل‌ها با استفاده از تگ <input> ایجاد می‌شوند.

مثال

مثال زیر نحوه دریافت ورودی متن تک‌خطی را نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Text Input Control</title>
</head>
<body>
   <form >
      First name: <input type = "text" name = "first_name" />
      <br><br>
      Last name: <input type = "text" name = "last_name" />
   </form>
</body>
</html>

با اجرای کد بالا، دو کادر ورودی متن تک‌خطی نمایش داده می‌شوند.

کنترل ورودی گذرواژه

کنترل ورودی گذرواژه نیز نوعی ورودی متن تک‌خطی است، اما به‌محض اینکه کاربر نویسه‌ای را وارد می‌کند، آن نویسه را به‌صورت پنهان نمایش می‌دهد. این کنترل‌ها نیز با استفاده از تگ <input> در HTML ایجاد می‌شوند، اما ویژگی type روی مقدار password تنظیم می‌شود:

مثال

در مثال زیر، نحوه دریافت گذرواژه از کاربران را نشان می‌دهیم.

<!DOCTYPE html>
<html>
<head>
   <title>Password Input Control</title>
</head>
<body>
   <form >
      User ID : <input type = "text" name = "user_id" />
      <br><br>
      Password: <input type = "password" name = "password" />
   </form>
</body>
</html>

کد HTML بالا یک کادر ورودی متن و یک کادر ورودی گذرواژه نمایش می‌دهد.

کنترل ورودی متن چندخطی

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

مثال

مثال زیر نحوه استفاده از ورودی متن چندخطی برای دریافت توضیحات مربوط به یک مورد را نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Multiple-Line Input Control</title>
</head>
<body>
   <form>
      Description : <br />
      <textarea rows = "5" cols = "50" name = "description">
         Enter description here...
      </textarea>
   </form>
</body>
</html>

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

کنترل چک‌باکس‌ها

چک‌باکس‌ها زمانی استفاده می‌شوند که لازم باشد بیش از یک گزینه انتخاب شود. این کنترل‌ها نیز با استفاده از تگ <input> ایجاد می‌شوند، اما ویژگی type روی مقدار checkbox تنظیم می‌شود.

مثال

در این کد HTML، فرمی با دو چک‌باکس ایجاد می‌کنیم:

<!DOCTYPE html>
<html>
<head>
   <title>Checkbox Control</title>
</head>
<body>
   <form>
      <input type = "checkbox" name = "maths" value = "on"> Maths
      <input type = "checkbox" name = "physics" value = "on"> Physics
   </form>
</body>
</html>

با اجرای کد بالا، دو چک‌باکس ایجاد می‌شوند.

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

دکمه‌های رادیویی زمانی استفاده می‌شوند که از میان چندین گزینه، فقط انتخاب یک گزینه مجاز باشد. این کنترل‌ها نیز با استفاده از تگ <input> ایجاد می‌شوند، اما ویژگی type روی مقدار radio تنظیم می‌شود.

مثال

در این کد نمونه، فرمی با دو دکمه رادیویی ایجاد می‌کنیم:

<!DOCTYPE html>
<html>
<head>
   <title>Radio Box Control</title>
</head>
<body>
   <form>
      <input type = "radio" name = "subject" value = "maths"> Maths
      <input type = "radio" name = "subject" value = "physics"> Physics
   </form>
</body>
</html>

با اجرای کد HTML بالا، دو دکمه رادیویی نمایش داده می‌شوند.

کنترل کادر انتخاب

کادر انتخاب امکان نمایش گزینه‌های مختلف را به‌صورت یک فهرست کشویی فراهم می‌کند که کاربر می‌تواند از میان آن‌ها یک یا چند گزینه را انتخاب کند.

مثال

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

<!DOCTYPE html>
<html>
<head>
   <title>Select Box Control</title>
</head>
<body>
   <form>
      <select name = "dropdown">
         <option value = "Maths" selected>Maths</option>
         <option value = "Physics">Physics</option>
         <option value = "Chemistry">Chemistry</option>
      </select>
   </form>
</body>
</html>

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

کادر انتخاب فایل

اگر بخواهیم به کاربر اجازه دهیم فایلی را در وب‌سایت ما بارگذاری کند، باید از کادر بارگذاری فایل استفاده کنیم که به آن کادر انتخاب فایل نیز گفته می‌شود. این کادر با استفاده از عنصر <input> ایجاد می‌شود، اما ویژگی type روی مقدار file تنظیم می‌شود.

مثال

در مثال زیر، فرمی با یک کادر بارگذاری فایل ایجاد می‌کنیم که فقط تصاویر را می‌پذیرد:

<!DOCTYPE html>
<html>
<head>
   <title>File Upload Box</title>
</head>
<body>
   <form>
      <input type = "file" name = "fileupload" accept = "image/*" />
   </form>
</body>
</html>

کنترل دکمه

در HTML روش‌های مختلفی برای ایجاد دکمه‌های قابل کلیک وجود دارد. می‌توانیم با تنظیم ویژگی type تگ <input> روی مقدار button، یک دکمه قابل کلیک ایجاد کنیم.

مثال

در این کد HTML، فرمی با چهار نوع دکمه متفاوت ایجاد می‌کنیم:

<!DOCTYPE html>
<html>
<head>
   <title>File Upload Box</title>
</head>
<body>
   <form>
      <input type = "submit" name = "submit" value = "Submit" />
      <input type = "reset" name = "reset" value = "Reset" />
      <input type = "button" name = "ok" value = "OK" />
      <input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
   </form>
</body>
</html>

کنترل فرم مخفی

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

مثال

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

<!DOCTYPE html>
<html>
<head>
   <title>File Upload Box</title>
</head>
<body>
   <form>
      <p>This is page 10</p>
      <input type = "hidden" name = "pagename" value = "10" />
      <input type = "submit" name = "submit" value = "Submit" />
      <input type = "reset" name = "reset" value = "Reset" />
   </form>
</body>
</html>

کنترل‌های تاریخ و زمان

در HTML، کنترل تاریخ و زمان تاریخ و زمان را به‌صورت ترکیبی نمایش می‌دهد؛ شامل سال، ماه، روز، ساعت، دقیقه، ثانیه و کسری از ثانیه که مطابق با استاندارد ISO 8601 کدگذاری شده‌اند و منطقه زمانی آن روی UTC تنظیم شده است. اگر از datetime-local استفاده کنیم، تاریخ و زمان بدون اطلاعات منطقه زمانی نمایش داده می‌شوند.

مثال

<!DOCTYPE html>
<html>
<body>
   <form action = "/cgi-bin/html5.cgi" method = "get">
      Date and Time : <input type = "datetime" name = "newinput" />
      <input type = "submit" value = "submit" />
   </form>
</body>
</html>

کنترل تاریخ

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

مثال

<!DOCTYPE html>
<html>
<body>
   <form action = "/cgi-bin/html5.cgi" method = "get">
      Date : <input type = "date" name = "newinput" />
      <input type = "submit" value = "submit" />
   </form>
</body>
</html>

کنترل ماه

در HTML، کنترل ماه برای نمایش تاریخی استفاده می‌شود که فقط شامل سال و ماه است و مطابق با استاندارد ISO 8601 کدگذاری شده است.

مثال

<!DOCTYPE html>
<html>
<body>
   <form action = "/cgi-bin/html5.cgi" method = "get">
      Month : <input type = "month" name = "newinput" />
      <input type = "submit" value = "submit" />
   </form>
</body>
</html>

کنترل هفته

همان‌طور که از نام آن مشخص است، کنترل هفته تاریخی را نمایش می‌دهد که فقط شامل سال و شماره هفته است و مطابق با استاندارد ISO 8601 کدگذاری شده است.

مثال

<!DOCTYPE html>
<html>
<body>
   <form action = "/cgi-bin/html5.cgi" method = "get">
      Week : <input type = "week" name = "newinput" />
      <input type = "submit" value = "submit" />
   </form>
</body>
</html>

کنترل زمان

کنترل زمان در HTML ساعت، دقیقه، ثانیه و کسری از ثانیه را مشخص می‌کند که مطابق با استاندارد ISO 8601 کدگذاری شده‌اند.

مثال

<!DOCTYPE html>
<html>
<body>
   <form action = "/cgi-bin/html5.cgi" method = "get">
      Time : <input type = "time" name = "newinput" />
      <input type = "submit" value = "submit" />
   </form>
</body>
</html>

کنترل عدد

کنترل عدد فقط مقادیر عددی را می‌پذیرد. ویژگی step میزان دقت یا گام تغییر مقدار را مشخص می‌کند و مقدار پیش‌فرض آن 1 است.

مثال

<!DOCTYPE html>
<html>
<body>
   <form action = "/cgi-bin/html5.cgi" method = "get">
      Select Number : <input type = "number" min = "0" max = "10" step "1"
         value = "5" name = "newinput" />
      <input type = "submit" value = "submit" />
   </form>
</body>
</html>

کنترل محدوده

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

مثال

<!DOCTYPE html>
<html>
<body>
   <form action = "/cgi-bin/html5.cgi" method = "get">
      Select Range : <input type = "range" min = "0" max = "10" step "1"
         value = "5" name = "newinput" />
      <input type = "submit" value = "submit" />
   </form>
</body>
</html>

کنترل ایمیل

کنترل email فقط مقادیر مربوط به نشانی ایمیل را می‌پذیرد. این نوع کنترل برای فیلدهای ورودی‌ای استفاده می‌شود که باید حاوی یک نشانی ایمیل باشند. اگر تلاش کنید یک متن ساده را ارسال کنید، این کنترل شما را ملزم می‌کند که نشانی ایمیل را در قالب email@example.com وارد کنید.

مثال

<!DOCTYPE html>
<html>
<body>
   <form action = "/cgi-bin/html5.cgi" method = "get">
      Enter email : <input type = "email" name = "newinput" />
      <input type = "submit" value = "submit" />
   </form>
</body>
</html>

کنترل URL

کنترل URL در HTML فقط مقادیر مربوط به نشانی‌های اینترنتی را می‌پذیرد. این نوع کنترل برای فیلدهای ورودی‌ای استفاده می‌شود که باید حاوی یک نشانی URL باشند. اگر تلاش کنید یک متن ساده را ارسال کنید، این کنترل شما را ملزم می‌کند نشانی URL را در یکی از قالب‌های http://www.example.com یا http://example.com وارد کنید.

مثال

<!DOCTYPE html>
<html>
<body>
   <form action = "/cgi-bin/html5.cgi" method = "get">
      Enter URL : <input type = "url" name = "newinput" />
      <input type = "submit" value = "submit" />
   </form>
</body>
</html>