021-20483015

انواع ورودی HTML

در این  درس به  معرفی انواع متخلف ورودی برای عنصر <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 »
مشاهده مثال


در HTML5 انواع مختلفی از ورودی های جدید ارائه شده است :


color
date
datetime-local
email
month
number
range
search
tel
time
url
week

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

ورودی رنگ

<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>
مشاهده مثال



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

مثال :
ورودی ماه و سال
<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 جدید هستند)

 

 

صفت توضیحات
disabled غیرفعال شدن یک فیلد ورودی را تعیین می کند
max یک مقدار حداکثر برای مقدار ورودی یک فیلد تعیین می کند
maxlength یک مقدار حداکثر برای تعداد کاراکتر های ورودی یک فیلد تعیین می کند
min یک مقدار حداقل برای مقدار ورودی یک فیلد تعیین می کند
pattern یک قائده کلی برای مقایسه مقدار ورودی
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field



در درس بعدی با این محدوده ساز ها بیشتر آشنا خواهید شد.
مثال زیر یک فیلد ورودی عددی را نشان می دهد که در آن می توان اعداد 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." به کیبورد اضافه می کنند.

مثال :

 

 

 

ورودی URL
<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>
مشاهده مثال

 

ورودی هفته

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

مثال :

ورودی هفته
<form>
  Select a week:
  <input type="week" name="week_year">
</form>
مشاهده مثال

 

 

 

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط