شما اینجا هستید

در این درس درمورد انواع فیلدهایی که میتوان با عنصر <input> ایجاد کرد توضیح میدهیم.

نوع ورودی text

<”input type=”text> یک فیلد تک خطی برای ورود متن تعریف میکند:

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

نوع ورودی password

<”input type=”password> یک فیلد از نوع پسورد تعریف میکند:

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

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

نوع ورودی submit

<”input type=”submit> یک دکمه برای ارسال فرم به صفحه ای که اطلاعات فرم را میخواهد پردازش کند تعریف میکند. صفحه رسیدگی کننده اطلاعات فرم با ویژگی action تعریف میگردد.

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

اگر ویژگی value را در دکمه submit ننویسیم، متن پیش فرض را روی دکمه مینویسد.

نوع ورودی radio

<”input type=”radio> دکمه رادیویی تعریف میکند.

دکمه های رادیویی به کاربر اجازه میدهند که فقط یک گزینه از گزینه های موجود را انتخاب کند.

<form>
<input type="radio" name="gender" value="مرد" checked> Male
<br>
<input type="radio" name="gender" value="زن"> Female
</form>

نوع ورودی checkbox

<”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!">

انواع ورودی در HTML5

HTML5 چندین نوع ورودی جدید را اضافه کرده:

  • date

  • datetime

  • datetime-local

  • email

  • month

  • number

  • range

  • search

  • tel

  • time

  • url

  • week

اگر انواع ورودی توسط مرورگرهای قدیمی پشتیبانی نشوند، به شکل نوع ورودی text نمایش داده میشوند.

نوع ورودی number

<”input type=”number> برای فیلدهایی که حتما باید شامل عدد باشند استفاده میگردد. همچنین میتوان برای اعداد محدودیت ایجاد کرد یعنی تعریف میکنیم که عدد ورودی باید از 1 تا 5 باشد.

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

محدودیت های ورود اطلاعات

در زیر لیستی از محدودیتهایی که روی اطلاعات ورودی میتوان اعمال کرد را قرار داده ایم:

  • disabled : میتوان مشخص کرد که فیلد مورد نظر غیرفعال شود

  • max :‌ بیشترین مقداری که در یک فیلد میتوان وارد کرد را مشخص میکند

  • Maxlength : بیشترین تعداد کاراکتری را که میتوان در فیلد وارد کرد مشخص میکند

  • min :‌ کمترین مقداری را که در یک فیلد میتوان وارد کرد را مشخص میکند.

  • pattern : یک عبارت منظم مشخص میکند که با مقدار ورودی بررسی میشود تا مقدار ورودی بر طبق الگوی داده شده وارد شود

  • readonly : مشخص میکند که فیلد فقط خواندنی است و نمیتوان محتویات آن را تغییر داد

  • required : مشخص میکن که فیلد یک فیلد اجباری است یعنی باید پر شود

  • size : پهنای فیلد را بر اساس تعداد کاراکتر مشخص میکند

  • step : یک فاصله عددی مشخص میکند

  • value : مقدار پیشفرض برای یک فیلد را مشخص میکند

در درس بعدی در مورد محدودیتهای ورودی بیشتر خواهیم گفت.

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

date

<”input type=”date> برای فیلدهایی که شامل تاریخ میشوند استفاده میگردد.

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

<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>

color

<”input type=”color> برای فیلدهایی که از طریق آنها رنگ انتخاب میشود مورد استفاده قرار میگیرد.

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

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

نوع ورودی range

<”input type=”range> برای فیلدهایی که مقدار آنها باید بین یک محدوده باشد اشتفاده میگردد. این نوع فیلد یک کنترل اسلایدر در اختیار ما میگذارد تا به وسیله آن عدد مورد نظر را انتخاب کنیم، البته باید مرورگر این نوع ورودی را پشتیبانی کند.

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

نوع ورودی month

<”input type=”month> به کاربران این توانایی را میدهد که ماه و سال را انتخاب کنند.

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

نوع ورودی week

<”input type=”week> به کاربران این توانایی را میدهد که هفته و سال را انتخاب کنند.

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

نوع ورودی time

<”input type=”time> به کاربران این توانایی را میدهد که زمان را انتخاب کنند.

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

نوع ورودی datetime-local

<”input type=”datetime-local> به کاربران این توانایی را میدهد که تاریخ و زمان را انتخاب کنند.

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

نوع ورودی email

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

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

نوع ورودی url

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

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