انواع ورودی‌ها

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
فرم‌های HTML
۱فرم‌ها
۲عناصر فرم
۳انواع ورودی
۴ویژگی‌های ورودی
۵ویژگی ورودی Form
گرافیک در HTML
رسانه در HTML
APIها در HTML
مثال‌ها
مرجع HTML

این بخش انواع ورودی‌ها مربوط به عنصر <input> را توصیف می‌کند.[۱]

انواع ورودی ها در HTML

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

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • <input type="week">

نوع ورودی متن

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

مثال

1 <form>
2   <label for="fname">First name:</label><br>
3   <input type="text" id="fname" name="fname"><br>
4   <label for="lname">Last name:</label><br>
5   <input type="text" id="lname" name="lname">
6 </form>

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


کد HTML بالا در مرورگر به شکل زیر نشان داده می‌شود:

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


نوع ورودی کلمه عبور

<input type="password"> یک فیلد کلمه عبور (به انگلیسی: Password) را مشخص می‌کند:

مثال

1 <form>
2   <label for="username">Username:</label><br>
3   <input type="text" id="username" name="username"><br>
4   <label for="pwd">Password:</label><br>
5   <input type="password" id="pwd" name="pwd">
6 </form>

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


کد HTML بالا در مرورگر به شکل زیر نشان داده می‌شود:

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.

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

نوع ورودی Submit

<input type="submit"> کلیدی برای submit کردن (به فارسی: ارسال) داده‌های فرم به یک مدیر فرم (به انگلیسی: Form-Handler) تعریف می‌کند.

Form-handler معمولاً یک صفحه سرور با اسکریپتی برای پردازش داده‌های ورودی است.

Form-handler در ویژگی action فرم تعیین می‌شود:

مثال

1 <form action="/action_page.php">
2   <label for="fname">First name:</label><br>
3   <input type="text" id="fname" name="fname" value="John"><br>
4   <label for="lname">Last name:</label><br>
5   <input type="text" id="lname" name="lname" value="Doe"><br><br>
6   <input type="submit" value="Submit">
7 </form>

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


کد HTML بالا در مرورگر به شکل زیر نشان داده می‌شود:

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


اگر مقدار ویژگی کلید ارسال را حذف کنید، کلید یک متن پیش‌فرض خواهد گرفت:

مثال

1 <form action="/action_page.php">
2   <label for="fname">First name:</label><br>
3   <input type="text" id="fname" name="fname" value="John"><br>
4   <label for="lname">Last name:</label><br>
5   <input type="text" id="lname" name="lname" value="Doe"><br><br>
6   <input type="submit">
7 </form>

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


نوع ورودی Reset

<input type="reset"> یک کلید reset (به فارسی: تنظیم مجدد) را تعریف می‌کند که همهٔ مقدارهای فرم را برابر با مقادیر پیش‌فرضشان تنظیم می‌کند.

مثال

1 <form action="/action_page.php">
2   <label for="fname">First name:</label><br>
3   <input type="text" id="fname" name="fname" value="John"><br>
4   <label for="lname">Last name:</label><br>
5   <input type="text" id="lname" name="lname" value="Doe"><br><br>
6   <input type="submit" value="Submit">
7   <input type="reset">
8 </form>

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


کد HTML بالا در مرورگر به شکل زیر نشان داده می‌شود:

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.

اگر مقدارهای ورودی را تغییر داده و سپس برروی کلید “Reset” کلیک کنید، داده‌های فرم به مقدارهای پیش‌فرض تنظیم مجدد می‌شوند.

نوع ورودی Radio

<input type="radio"> یک radio button را تعریف می‌کند.

Radio buttonها به کاربر اجازه می‌دهند که فقط یک گزینه را در میان تعداد محدود گزینه‌ها انتخاب کند:

مثال

1 <form>
2   <input type="radio" id="male" name="gender" value="male">
3   <label for="male">Male</label><br>
4   <input type="radio" id="female" name="gender" value="female">
5   <label for="female">Female</label><br>
6   <input type="radio" id="other" name="gender" value="other">
7   <label for="other">Other</label>
8 </form>

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


کد HTML بالا در مرورگر به شکل زیر نشان داده می‌شود:

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


نوع ورودی Checkbox

<input type="checkbox"> یک checkbox را تعریف می‌کند.

چک باکس‌ها این امکان را به کاربر می‌دهند که از بین تعداد محدودی از گزینه‌ها هیچ‌کدام یا یک یا چند گزینه را انتخاب کند:

مثال

1 <form>
2   <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
3   <label for="vehicle1"> I have a bike</label><br>
4   <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
5   <label for="vehicle2"> I have a car</label><br>
6   <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
7   <label for="vehicle3"> I have a boat</label>
8 </form>

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


کد HTML بالا در مرورگر به شکل زیر نشان داده می‌شود:

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


نوع ورودی Button

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

مثال

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

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


کد HTML بالا در مرورگر به شکل زیر نشان داده می‌شود:

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


نوع ورودی Color

<input type="color"> برای فیلدهای ورودی ای که باید شامل رنگ‌ها باشند استفاده می‌شود.

براساس پشتیبانی مرورگر، یک انتخابگر رنگ در فیلد ورودی نمایش داده می‌شود:

مثال

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

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


نوع ورودی Date

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

براساس پشتیبانی مرورگر، یک انتخابگر تاریخ در فیلد ورودی نمایش داده می‌شود:

مثال

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

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


همچنین می‌توانید از ویژگی‌های min و max برای اضافه کردن محدودیت‌ها به تاریخ استفاده کنید:

مثال

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

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


نوع ورودی Datetime-local

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

براساس پشتیبانی مرورگر، یک انتخاب‌گر تاریخ در فیلد ورودی نمایش داده می‌شود:

مثال

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

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


نوع ورودی ایمیل

<input type="email"> برای فیلدهای ورودی استفاده می‌شود که باید آدرس ایمیل در آنها وارد شود.

براساس پشتیبانی مرورگر، یک آدرس ایمیل هنگام submit بطور خورکار تأیید اعتبار می‌شود:

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


برخی از موبایل‌های هوشمند نوع ایمیل را شناسایی می‌کنند و برای سازگاری با ورودی ایمیل “.com” را به صفحه کلید اضافه می‌کنند:

مثال

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

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


نوع ورودی File

<input type="file"> یک فیلد انتخاب فایل و یک کلید “Browse” را برای آپلود فایل تعریف می‌کند.

مثال

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

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


نوع ورودی Month

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

براساس پشتیبانی مرورگر، یک انتخابگر تاریخ در فیلد ورودی نمایش داده می‌شود:

مثال

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

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


نوع ورودی Number

<input type="number"> یک فیلد ورودی عددی را تعریف می‌کند.

حتی می‌توانید محدودیت‌هایی هم برای پذیرش اعداد تنظیم کنید.

مثال زیر فیلد ورودی عددی را نشان می‌دهد می‌توان در آن مقادیر بین ۱ تا ۵ را وارد کرد:

مثال

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

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


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

جدول زیر لیست برخی از محدودیت‌های رایج ورودی‌ها را نشان می‌دهد:

ویژگی تعریف
checked مشخص می‌کند که هنگام بارگذاری‌های صفحه فیلد ورودی باید از پیش انتخاب شده باشد (برای type="checkbox" یا type="radio")
disabled تعیین می‌کند که یک فیلد ورودی باید غیرفعال باشد
max مقدار حداکثر برای یک فیلد ورودی را تعیین می‌کند
maxlength حداکثر تعداد کاراکترها را برای یک فیلد ورودی مشخص می‌کند
min حداقل مقدار را برای یک فیلد ورودی مشخص می‌کند
pattern یک عبارت منظم تعیین می‌کند تا ورودی با آن مقایسه شود
readonly مشخص می‌کند که یک فیلد ورودی فقط خواندنی (به انگلیسی: Read Only) باشد (نتوان آن را تغییر داد)
required مشخص می‌کند که یک فیلد ورودی لازم است (باید پر شود)
size عرض (تعداد کاراکترها) یک فیلد ورودی را مشخص می‌کند
step فاصله‌های عددی مجاز برای یک فیلد ورودی را مشخص می‌کند
value یک مقدار پیش‌فرض برای فیلد ورودی تعیین می‌کند
در مورد محدودیت‌های ورودی در بخش بعدی بیشتر خواهید آموخت

مثال زیر یک فیلد ورودی عددی را نشان می‌دهد که می‌توان در آن اعداد بین ۰ تا ۱۰۰ را وارد کرد. مقدار پیش‌فرض برابر ۳۰ است:

مثال

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

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


نوع ورودی Range

<input type="range"> کنترلی برای وارد کردن اعدادی که مقدار دقیق آنها مهم نیست تعریف می‌کند (مانند کنترل slider). محدوده پیش‌فرض بین ۰ تا ۱۰۰ است.

با این حال می‌توان یه کمک ویژگی‌های min ,max و step محدودیت‌هایی برای اینکه چه اعدادی پذیرفته شوند تنظیم کرد:

مثال

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

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


نوع ورودی Search

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

مثال

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

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


نوع ورودی Tel

<input type="tel"> برای فیلدهای ورودی که شامل شماره تلفن می‌شوند به کار می‌رود.

مثال

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

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


نوع ورودی Time

<input type="time"> به کاربر امکان انتخاب یک زمان را می‌دهد (نه منطقه زمانی).

براساس پشتیبانی مرورگر، یک انتخابگر زمان در فیلد ورودی نمایش داده می‌شود:

مثال

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

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


نوع ورودی Url

<input type="url"> برای فیلدهای ورودی استفاده می‌شود که باید شامل آدرس URL باشند.

براساس پشتیبانی مرورگر، هنگام submit فیلد url را می‌توان بطور خودکار تأیید اعتبار کرد:

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

مثال

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

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


نوع ورودی Week

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

براساس پشتیبانی مرورگر، یک انتخابگر تاریخ در فیلد ورودی نمایش داده می‌شود:

مثال

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

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


تمرین‌های HTML

ویژگی نوع ورودی در HTML

تگ تعریف
<input type=""> نوع ورودی برای نمایش را مشخص می‌کند


منابع آموزشی