در این  درس به  معرفی انواع متخلف ورودی برای عنصر <input> خواهیم پرداخت.
 

ورودی متنی

<input type="text"> یک فیلد متنی تک خطی تعریف می کند :

مثال :

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

ورودی پسورد

<input type="password"> یک فیلد رمز ورود تعریف می کند :

مثال :

<form>
  User name:<br>
  <input type="text" name="username"><br>
  User password:<br>
  <input type="password" name="psw">
</form>

دکمه ثبت

<input type="submit"> دکمه ای برای ارسال داده ها به form-handler تعریف می کند.
form-handler معمولا یک صفحه سرور با اسکریپتی برای پردازش داده های ورودی است و در صفت action فرم  مشخص می شود :

مثال :

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Hamed"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Moez"><br><br>
  <input type="submit" value="Submit">
</form>

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Hamed"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Moez"><br><br>
  <input type="submit">
</form>

دکمه ریست

<input type="reset"> دکمه ای تعریف می کند که می توان با آن تمام مقادیر فرم را به مقادیر پیش فرض آن بازگرداند :

مثال  :

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="hamed"><br>
  Last name:<br>
  <input type="text" name="lastname" value="moez"><br><br>
  <input type="submit" value="submit">
  <input type="reset">
</form>

دکمه رادیویی

<input type="radio"> دکمه رادیویی را تعریف می کند. با دکمه های رادیویی کاربران می توانند بین چند گزینه محدود ، فقط یکی را انتخاب کنند :

مثال :

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
</form>

چک باکس

<input type="checkbox"> باکس کوچک قابل تیک زدن را تعریف می کند. با استفاده از چک باکس ها  ، کاربران می توانند بین چند گزینه محدود ، صفر تا چند گزینه را انتخاب کنند :

مثال :

<form>
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car 
</form>

دکمه

<input type="button"> یک دکمه را تعریف می کند :

مثال :

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

ورودی رنگ

<input type="color"> برای ورودی هایی استفاده می شود که باید حاوی رنگ باشند ، که می تواند بسته به مرورگر و نحوه پشتیبانی آن ، یک پالت انتخاب رنگ پس از کلیک بر روی ورودی رنگ ، نمایش داده شود.

مثال :

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

ورودی تاریخ

<input type="date"> برای ورودی هایی استفاده می شود که باید حاوی تاریخ باشند. بسته به نحوه پشتیبانی مرورگر ، می تواند گزینه هایی برای ورود تاریخ ، نمایش داده شود :

مثال :

<form>
  Birthday:
  <input type="date" name="bday">
</form>

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

تاریخ محلی

<input type="datetime-local"> یک فیلد ورودی تاریخ بدون منطقه زمانی تعریف می کند. بسته به نحوه پشتیبانی مرورگر ، می تواند گزینه هایی برای ورود تاریخ ، نمایش داده شود :

مثال :

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

ورودی  ایمیل

<input type="email"> برای تعریف ورودی هایی که باید حاوی آدرس ایمیل باشند ، استفاده می شود. بسته به پشتیبانی مرورگر ، آدرس ایمیل ممکن است اعتبار سنجی شود.
برخی از گوشی های هوشمند می توانند آدرس ایمیل را تشخیص دهند و برای راحتی کاربر ،  یک "com." به کیبورد اضافه می کنند.

مثال :

<form>
  E-mail:
  <input type="email" name="email">
</form>

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

ورودی عددی

<input type="number"> برای تعریف ورودی های عددی (numeric) استفاده می شود. همچنین می توان محدوده ای از اعداد قابل قبول را تعیین کرد. در مثال زیر یک ورودی عددی برای انتخاب اعداد 1 تا 5 نمایش داده شده است :

مثال :

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

محدوده های ورودی

لیست زیر ، تعدادی از محدوده ساز های ورودی را نمایش می دهد. (تعدادی از آنها در HTML5 جدید هستند)

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

مثال :

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

ورودی محدوده (range)

<input type="range"> یک نوار کنترل برای ورود اعدادی که مقدار دقیق آن مهم نیست ، ایجاد می کند (مانند کنترل اسلایدر). محدوده پیش فرض 0 تا 100 است.البته می توان اعداد حداقل و حداکثر و بخش های آن را تعیین کرد :

مثال :

<form>
  <input type="range" name="points" min="0" max="10">
</form>

ورودی جستجو

<input type="search"> برای تعریف یک فیلد جستجو استفاده می شود. (فیلد جستجو مانند فیلد متنی عمل می کند)

مثال :

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

ورودی تلفن

 <input type="tel"> برای تعریف فیلد هایی که باید حاوی شماره تلفن باشند ، استفاده می شود. این ورودی در حال حاضر فقط در سافاری 8 پشتیبانی می شود.

مثال :

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

ورودی زمان

<input type="time"> به کاربر امکان انتخاب زمان (بدون منطقه زمانی) را می دهد. بسته به نحوه پشتیبانی مرورگر ، می تواند گزینه هایی برای ورود زمان ، نمایش داده شود :

مثال :

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>

ورودی url

<input type="url"> برای تعریف ورودی هایی که باید حاوی آدرس url باشند ، استفاده می شود. بسته به پشتیبانی مرورگر ، آدرس url ممکن است اعتبار سنجی شود.
برخی از گوشی های هوشمند می توانند آدرس url را تشخیص دهند و برای راحتی کاربر ،  یک "com." به کیبورد اضافه می کنند.

مثال :

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

ورودی هفته

<input type="week"> به کاربر امکان انتخاب یک هفته و سال را می دهد.  بسته به نحوه پشتیبانی مرورگر ، می تواند گزینه هایی برای انتخاب هفته و سال نمایش داده شود :

مثال :

<form>
  Select a week:
  <input type="week" name="week_year">
</form>