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

انواع ورودی (Input Types) در 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">

💡 نکته: مقدار پیش‌فرض خصوصیت type برابر با "text" است.

ورودی نوع Text

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

مثال

<form>
  <label for="fname">نام:</label><br />
  <input type="text" id="fname" name="fname" /><br />
  <label for="lname">نام خانوادگی:</label><br />
  <input type="text" id="lname" name="lname" />
</form>

This is how the HTML code above will be displayed in a browser:

First name:

Last name:

ورودی نوع Password

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

مثال

<form>
  <label for="username">نام کاربری:</label><br />
  <input type="text" id="username" name="username" /><br />
  <label for="pwd">رمز عبور:</label><br />
  <input type="password" id="pwd" name="pwd" />
</form>

Username:

Password:

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

ورودی نوع Submit

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

مثال

<form action="/action_page.php">
  <label for="fname">نام:</label><br />
  <input type="text" id="fname" name="fname" value="John" /><br />
  <label for="lname">نام خانوادگی:</label><br />
  <input type="text" id="lname" name="lname" value="Doe" /><br /><br />
  <input type="submit" value="ارسال" />
</form>

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

First name:
John

Last name:
Doe

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

ورودی نوع Reset

<input type="reset"> یک دکمه بازنشانی (reset) تعریف می‌کند که تمام مقادیر فرم را به مقادیر پیش‌فرض خود بازمی‌گرداند.

مثال

<form action="/action_page.php">
  <label for="fname">نام:</label><br />
  <input type="text" id="fname" name="fname" value="John" /><br />
  <label for="lname">نام خانوادگی:</label><br />
  <input type="text" id="lname" name="lname" value="Doe" /><br /><br />
  <input type="submit" value="ارسال" />
  <input type="reset" value="بازنشانی" />
</form>

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

First name:
John

Last name:
Doe

ورودی نوع Radio

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

مثال

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML" />
  <label for="html">HTML</label><br />
  <input type="radio" id="css" name="fav_language" value="CSS" />
  <label for="css">CSS</label><br />
  <input type="radio" id="javascript" name="fav_language" value="JavaScript" />
  <label for="javascript">JavaScript</label>
</form>

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

 HTML
 CSS
 JavaScript

ورودی نوع Checkbox

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

مثال

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" />
  <label for="vehicle1"> I have a bike</label><br />
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car" />
  <label for="vehicle2"> I have a car</label><br />
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat" />
  <label for="vehicle3"> I have a boat</label>
</form>

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

 I have a bike
 I have a car
 I have a boat

ورودی نوع Button

<input type="button"> یک دکمه قابل کلیک تعریف می‌کند.

مثال

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

سایر انواع ورودی

• Color 🎨: <input type="color"> برای فیلدهایی استفاده می‌شود که باید حاوی یک رنگ باشند. بسته به پشتیبانی مرورگر، یک انتخابگر رنگ (color picker) ممکن است ظاهر شود.

• Date 🗓️: <input type="date"> برای فیلدهایی استفاده می‌شود که باید حاوی یک تاریخ باشند. بسته به پشتیبانی مرورگر، یک انتخابگر تاریخ (date picker) ممکن است ظاهر شود. می‌توانید از خصوصیت‌های min و max برای افزودن محدودیت به تاریخ‌ها استفاده کنید.

• Datetime-local: <input type="datetime-local"> یک فیلد ورودی تاریخ و زمان، بدون منطقه زمانی، مشخص می‌کند.

• Email: <input type="email"> برای فیلدهای آدرس ایمیل استفاده می‌شود. ایمیل می‌تواند به طور خودکار هنگام ارسال اعتبارسنجی شود.

• Image: <input type="image"> یک تصویر را به عنوان دکمه ارسال تعریف می‌کند. مسیر تصویر در خصوصیت src مشخص می‌شود.

• File 📁: <input type="file"> یک فیلد انتخاب فایل و یک دکمه "Browse" برای آپلود فایل‌ها تعریف می‌کند.

• Hidden 🕵️: <input type="hidden"> یک فیلد ورودی مخفی (غیر قابل مشاهده برای کاربر) تعریف می‌کند. این فیلد اغلب برای ذخیره شناسه‌ای که باید هنگام ارسال فرم به‌روزرسانی شود، استفاده می‌شود. توجه: این یک روش امنیتی نیست زیرا مقدار آن در کد منبع صفحه قابل مشاهده است.

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

• Number: <input type="number"> یک فیلد ورودی عددی تعریف می‌کند. می‌توانید با خصوصیت‌هایی مانند min، max و step محدودیت‌هایی را برای اعداد تعیین کنید.

• Range: <input type="range"> یک کنترل برای وارد کردن یک عدد که مقدار دقیق آن مهم نیست، تعریف می‌کند (مانند یک کنترل اسلایدر).

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

• Tel ☎️: <input type="tel"> برای فیلدهایی که باید حاوی شماره تلفن باشند، استفاده می‌شود.

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

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

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

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

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