در مقالات قبل به بررسی عناصر فرم به طور مفصل پرداختیم و همچنین به طور کلی اشاراتی به عنصر input داشتیم، در این مقاله تخصصی تر به عنصر input نگاه خواهیم کرد و به بررسی انواع مختلف عنصر input در HTML می پردازیم.

انواع مختلف input

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

• Button
• Checkbox
• Color
• Date
• Datetime-local
• Email
• File
• Hidden
• Image
• Month
• Number
• Password
• Radio
• Range
• Reset
• Search
• Submit
• Tel
• Text
• Time
• url
• week

نکته: در ویژگی type، مقدار پیش فرض ، text است.

مقدار text در ویژگی type

این یک فیلد ورودی تک خطی را مشخص می کند که برای ورود متن استفاده می شود.

مثال: در زیر یک فیلد ورودی برای ورود متن تعریف کرده ایم.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

مقدار password در ویژگی type

این یک فیلد ورودی password را مشخص می کند که برای ورود رمز کاربر استفاده می شود.

مثال: در زیر یک فیلد password برای ورود رمز کاربر تعریف کرده ایم.

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>

کاراکتر های نوشته شده در فیلد رمز عبور از دید کاربر پنهان هستند (به صورت ستاره یا دایره تو پر سیاه نشان داده می شوند)

مقدار submit در ویژگی type

مقدار submit در ویژگی type عنصر input باعث ایجاد یک دکمه ارسال برای ارسال داده های ورودی فرم به یک کنترل کننده فرم می شود.

کنترل کننده فرم معمولا، یک فایل روی سرور با اسکریپت پردازش داده های ورودی است.

کنترل کننده فرم در ویژگی action فرم مشخص شده است.

مثال: در زیر یک دکمه ارسال با استفاده از مقدار password ویژگی type تعریف کرده ایم.

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="saman"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="mohamadpour"><br><br>
  <input type="submit" value="Submit">
</form>

اگر مقدار ویژگی دکمه ارسال را حذف کنید، به صورت پیش فرض دکمه یک متن پیش فرض دریافت می کند، مانند مثال زیر:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="saman"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="mohamadpour"><br><br>
  <input type="submit">
</form>

مقدار reset در ویژگی type

مقدار reset یک دکمه بازنشانی تعریف می کند، که همه مقادیر فرم را به مقادیر پیش فرض برمی گرداند.

مثال: در زیر یک دکمه reset با استفاده از مقدار reset ویژگی type تعریف کرده ایم.

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form

اگر مقادیر ورودی را تغییر دهید و روی دکمه reset کلیک کنید، همه مقادیر فرم به مقدار پیش فرض برمی گردند.

مقدار radio در ویژگی type

مقدار radio در ویژگی type عنصر input باعث ایجاد یک دکمه رادیویی می شود.

دکمه رادیویی به کاربر اجازه می دهد از بین تعداد محدودی از گزینه ها یکی را امنخاب کند.

مثال: در زیر یک دکمه رادیویی با استفاده از مقدار radio ویژگی type تعریف کرده ایم.

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

مقدار checkbox در ویژگی type

مقدار checkbox در ویژگی type عنصر input باعث ایجاد یک کادر تایید می شود.

کادر تایید به کاربر اجازه می دهد از بین تعداد محدودی از گزینه ها هیچ گزینه و بیشتر از یک گزینه را انتخاب کنند.

مثال: در زیر یک کادر تایید با استفاده از مقدار checkbox ویژگی type تعریف کرده ایم.

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

مقدار button در ویژگی type

مقدار button در ویژگی type عنصر input باعث ایجاد یک دکمه قابل کلیک می شود.

مثال: در زیر یک دکمه قابل کلیک با استفاده از مقدار button ویژگی type تعریف کرده ایم.

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

مقدار color در ویژگی type

مقدار color در ویژگی type عنصر input باعث ایجاد یک عنصر انتخاب رنگ می شود.

بسته به پشتیبانی مرورگر، انتخاب کننده متن می تواند در قسمت ورودی نشان داده شود.

مثال: در زیر یک عنصر انتخاب رنگ با استفاده از مقدار color ویژگی type تعریف کرده ایم.

<form>
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor">
</form>

مقدار date در ویژگی type

مقدار date در ویژگی type عنصر input برای فیلدهای ورودی که باید دارای انتخاب تاریخ باشند استفاده می شود.

بسته به پشتیبانی مرورگر، انتخاب کننده تاریخ می تواند در قسمت ورودی نشان داده شود.

مثال: در زیر یک عنصر انتخاب تاریخ با استفاده از مقدار date ویژگی type تعریف کرده ایم.

<form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
</form>

همچنین می توانید از ویژگی های min و max یرای تعیین محدوده تاریخ ورودی استفاده کنید، مانند مثال زیر:

<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>

مقدار datetime-local در ویژگی type

مقدار datetime-local در ویژگی type عنصر input برای فیلدهای ورودی که باید دارای انتخاب تاریخ و زمان بدون منطقه زمانی باشند استفاده می شود.

بسته به پشتیبانی مرورگر، انتخاب کننده تاریخ  و زمان می تواند در قسمت ورودی نشان داده شود.

مثال: در زیر یک عنصر انتخاب تاریخ و زمان با استفاده از مقدار datetime-local ویژگی type تعریف کرده ایم.

<form>
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

مقدار email در ویژگی type

مقدار email در ویژگی type عنصر input برای فیلدهای ورودی که باید دارای ایمیل کاربر باشند استفاده می شود.

بسته به پشتیبانی مرورگر، آدرس ایمیل را می تواند هنگام ارسال به طور خودکار تایید کند.

برخی از تلفن های هوشمند نوع ایمیل را تشخیص می دهند و “.com” را برای مطابقت با ورودی ایمیل به صفحه کلید اضافه می کنند.

مثال: در زیر یک عنصر ورودی ایمیل با استفاده از مقدار email ویژگی type تعریف کرده ایم.

<form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
</form>

مقدار file در ویژگی type

مقدار file در ویژگی type عنصر input یک فیلد انتخاب فایل و یک دکمه “browse” را برای بارگذاری فایل ها تعریف می کند.

مثال: در زیر یک عنصر ورودی انتخاب فایل با استفاده از مقدار file ویژگی type تعریف کرده ایم.

<form>
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile">
</form>

مقدار hidden در ویژگی type

مقدار hidden در ویژگی type عنصر input یک فیلد ورودی پنهان را تعریف می کند (قابل مشاهده نیست)

یک فیلد پنهان به توسعه دهندگان اجازه می دهد داده هایی را هنگام ارسال فرم غیر قابل مشاهده و یا غیر قابل اصلاح می باشند، تعریف کنند.

یک فیلد پنهان اغلب ذخیره می کند که چه پایگاه داده ای باید هنگام ارسال فرم به روز شود.

نکته: زمانی که مقدار در محتوای صفحه کاربر نمایش داده نمی شود، با استفاده از ابزارهای توسعه دهنده هر مرورگر یا عملکرد “view source” قابل مشاهده و ویرایش است. پس به هیچ عنوان از ویژگی hidden برای موارد امنیتی استفاده نکنید.

مثال: در زیر یک عنصر غیر قابل مشاهده با استفاده از مقدار file ویژگی type تعریف کرده ایم.

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="hidden" id="custId" name="custId" value="3487">
  <input type="submit" value="Submit">
</form>

مقدار month در ویژگی type

مقدار month در ویژگی type عنصر input به کاربر اجازه می دهد یک ماه و سال را انتخاب کند.

بسته به پشتیبانی مرورگر، یک انتخاب کننده تاریخ  می تواند در قسمت ورودی نشان داده شود.

مثال: در زیر یک عنصر انتخاب تاریخ (سال و ماه) با استفاده از مقدار month ویژگی type تعریف کرده ایم.

<form>
  <label for="bdaymonth">Birthday (month and year):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
</form>

مقدار number در ویژگی type

مقدار number در ویژگی type عنصر input به کاربر اجازه می دهد یک فیلد عددی را تعریف کند.

همچنین می توانید محدوده انتخاب را در آن مشخص کنید.

مثال: در زیر یک فیلد عددی در فرم تعریف کردیم که محدوده انتخاب بین عدد 1 تا عدد 5 است.

<form>
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

محدودیت های عنصر ورودی

در این جدول ما لیستی از محدودیت های معمول عناصر ورودی را برای شما آورده ایم.

در مقالات بعدی با محدودیت های ورودی بیشتر آشنا خواهید شد.

مثال: در زیر یک فیلد ورودی عددی را داریم که می توانید در فواصل عددی مقدار 10، از 0 تا 100 یک عدد را انتخاب کنید. پیش فرض آن هم عدد 30 است.

<form>
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>

مقدار range در ویژگی type

مقدار range در ویژگی type عنصر input یک کنترل برای وارد کردن عدد است که مقدار دقیق آن مهم نیست (مانند کنترل کشویی). محدوده پیش فرض آن 0 تا 100 است. با این حال می توانید محدودیت هایی را با ویژگی های min, max و step اعمال کنید.

مثال: در زیر یک فیلد کنترل عددی با استفاده از مقدار range ویژگی type تعریف کردیم.

<form>
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
</form>

مقدار search در ویژگی type

مقدار search در ویژگی type عنصر input برای ایخاد فیلد جستجو استفاده می شود (یک فیلد جستجو مانند یک فیلد متنی معمولی رفتار می کند).

مثال: در زیر یک فیلد جستجو با استفاده از مقدار search ویژگی type تعریف کردیم.

<form>
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
</form>

مقدار tel در ویژگی type

مقدار tel در ویژگی type عنصر input برای ایجاد فیلدهایی که باید یک شماره تلفن دریافت کنند، استفاده می شود.

مثال: در زیر یک فیلد که مقدار شماره تلفن دریافت می کند با استفاده از مقدار tel ویژگی type تعریف کردیم.

<form>
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

مقدار time در ویژگی type

مقدار time در ویژگی type عنصر input به کاربر اجازه می دهد زمانی را بدون منطقه زمانی انتخاب کند.

بسته به پشتیبانی مرورگر، یک انتخاب کننده زمان  می تواند در قسمت ورودی نشان داده شود.

مثال: در زیر یک فیلد زمان با استفاده از مقدار time ویژگی type تعریف کردیم.

<form>
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
</form>

مقدار url در ویژگی type

مقدار url در ویژگی type عنصر input برای فیلد های ورودی استفاده می شوند که باید حاوی یک آدرس url باشند.

بسته به پشتیبانی مرورگر، آدرس url را می توان به صورت خودکار هنگام ارسال فرم تایید کرد.

برخی از تلفن های هوشمند نوع url را تشخیص می دهند و برای مطابقت با ورودی، مقدار “.com” را به صفحه کلید اضافه می کنند.

مثال: در زیر یک فیلد آدرس url با استفاده از مقدار url ویژگی type تعریف کردیم.

<form>
  <label for="homepage">Add your homepage:</label>
  <input type="url" id="homepage" name="homepage">
</form>

مقدار week در ویژگی type

مقدار week در ویژگی type عنصر input به کاربر اجازه می دهد هفته و سال را انتخاب کند.

بسته به پشتیبانی مرورگر، یک انتخاب کننده هفته  می تواند در قسمت ورودی نشان داده شود.

مثال: در زیر یک عنصر انتخاب تاریخ (سال و هفته) با استفاده از مقدار week ویژگی type تعریف کرده ایم.

<form>
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
</form>