انواع ورودی
| Main Page Tutorial | |
|---|---|
 | |
| موارد آموزشی | |
| فرم‌های HTML | |
| ۱ | فرم‌ها |
| ۲ | عناصر فرم |
| ۳ | انواع ورودی |
| ۴ | ویژگی‌های ورودی |
| ۵ | ویژگی ورودی Form |
| گرافیک در HTML | |
| رسانه در HTML | |
| APIها در HTML | |
| مثال‌ها | |
| مرجع HTML | |
این بخش انواع ورودی‌ها مربوط به عنصر <input> را توصیف می‌کند.[۱]
انواع ورودی ها در HTML
انواع مختلف ورودی‌هایی که می‌توانید در HTML استفاده کنید به شرح زیر است:
|
نوع ورودی متن
<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 بالا در مرورگر به شکل زیر نشان داده می‌شود:
40px ساخت نمونه مثال این بخش در دست اقدام است.
نوع ورودی کلمه عبور
<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 بالا در مرورگر به شکل زیر نشان داده می‌شود:
40px ساخت نمونه مثال این بخش در دست اقدام است.
نوع ورودی 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 بالا در مرورگر به شکل زیر نشان داده می‌شود:
40px ساخت نمونه مثال این بخش در دست اقدام است.
اگر مقدار ویژگی کلید ارسال را حذف کنید، کلید یک متن پیش‌فرض خواهد گرفت:
مثال
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 بالا در مرورگر به شکل زیر نشان داده می‌شود:
40px ساخت نمونه مثال این بخش در دست اقدام است.
نوع ورودی 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 بالا در مرورگر به شکل زیر نشان داده می‌شود:
40px ساخت نمونه مثال این بخش در دست اقدام است.
نوع ورودی 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 بالا در مرورگر به شکل زیر نشان داده می‌شود:
40px ساخت نمونه مثال این بخش در دست اقدام است.
نوع ورودی Button
<input type="button"> یک کلید را تعریف می‌کند:
مثال
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
کد HTML بالا در مرورگر به شکل زیر نشان داده می‌شود:
40px ساخت نمونه مثال این بخش در دست اقدام است.
نوع ورودی 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 بطور خورکار تأیید اعتبار می‌شود:
40px ساخت نمونه مثال این بخش در دست اقدام است.
برخی از موبایل‌های هوشمند نوع ایمیل را شناسایی می‌کنند و برای سازگاری با ورودی ایمیل “.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=""> | نوع ورودی برای نمایش را مشخص می‌کند |
منابع آموزشی