آموزش HTML - انواع ورودی

نوع فیلدهای ورودی در فرم با استفاده از ویژگی type و مقادیر مربوط به آن تعریف می شود و فرم های HTML با آن ها جمع آوری داده ها از کاربران را انجام می دهند. هر نوع ورودی دارای مجموعه ای منحصر به فرد از ویژگی هاست که به کاربر اجازه می دهد داده ها را به روش های مختلف وارد و ارسال کند.

HTML نوع ورودی های مختلفی را ارائه می دهد که می توانید از آنها برای ایجاد فیلدهای فرم با انواع داده ها و فرمت های خاص استفاده کنید. در اینجا برخی از پرکاربردترین انواع ورودی HTML آورده شده است:

text: این نوع یک فیلد ورودی متن تک خطی ایجاد می کند.

<label for="username">نام کاربری:</label>
<input type="text" id="username" name="username">

password: این نوع یک فیلد ورودی متن تک خطی ایجاد می کند که کاراکترهای ورودی را پنهان می کند و برای ایجاد فیلدهای رمز عبور مفید است.

<label for="password">کلمه عبور:</label>
<input type="password" id="password" name="password">

email: این نوع یک فیلد ورودی متن تک خطی ایجاد می کند که فقط آدرس های ایمیل را می پذیرد.

<label for="email">پست الکترونیک:</label>
<input type="email" id="email" name="email">

number: این نوع یک فیلد ورودی متن تک خطی ایجاد می کند که فقط اعداد را می پذیرد.

<label for="age">سن:</label>
<input type="number" id="age" name="age">

date: این نوع یک فیلد ورودی تاریخ ایجاد می کند که به کاربر امکان می دهد تاریخ را از تقویم انتخاب کند.

<label for="birthdate">تاریخ تولد:</label>
<input type="date" id="birthdate" name="birthdate">

time: این نوع یک فیلد ورودی زمان ایجاد می کند که به کاربر امکان می دهد زمان را انتخاب کند.

<label for="meeting-time">زمان ملاقات:</label>
<input type="time" id="meeting-time" name="meeting-time">

checkbox: این نوع یک چک باکس ایجاد می کند که به کاربر اجازه می دهد یک یا چند گزینه را از گروهی از گزینه ها انتخاب کند.

<label>علاقه مندی ها:</label>
<input type="checkbox" id="reading" name="interest" value="reading">
<label for="reading">مطالعه</label>
<input type="checkbox" id="writing" name="interest" value="writing">
<label for="writing">نویسندگی</label>
<input type="checkbox" id="swimming" name="interest" value="swimming">
<label for="swimming">شنا كردن</label>

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

<label>جنسیت:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">مرد</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">زن</label>

file: این نوع یک فیلد آپلود فایل ایجاد می کند که به کاربر اجازه می دهد فایل ها را در سرور آپلود کند.

<label for="resume">آپلود رزومه:</label>
<input type="file" id="resume" name="resume">

color: این نوع یک انتخابگر رنگ ایجاد می کند که به کاربر اجازه می دهد یک رنگ را انتخاب کند.

<label for="color-picker">یک رنگ را انتخاب کنید:</label>
<input type="color" id="color-picker" name="color-picker">

range: این نوع یک نوار لغزنده ایجاد می کند که به کاربر اجازه می دهد یک مقدار را از طیفی از مقادیر انتخاب کند.

<label for="volume">درجه صدا:</label>
<input type="range" id="volume" name="volume" min="0" max="100">

search: این نوع یک فیلد ورودی متن تک خطی ایجاد می کند که به طور خاص برای جست و جو طراحی شده است.

<label for="search-query">جستجو کردن:</label>
<input type="search" id="search-query" name="search-query">

url: این نوع یک فیلد ورودی متن تک خطی ایجاد می کند که فقط URL ها را می پذیرد.

<label for="website">وبسایت:</label>
<input type="url" id="website" name="website">

tel: این نوع یک فیلد ورودی متن تک خطی ایجاد می کند که فقط شماره تلفن را می پذیرد.

<label for="phone-number">شماره تلفن:</label>
<input type="tel" id="phone-number" name="phone-number">

hidden: این نوع یک فیلد ورودی مخفی ایجاد می کند که برای ذخیره داده هایی که نباید برای کاربر قابل مشاهده باشد استفاده می شود.

<input type="hidden" id="session-id" name="session-id" value="123456">

datetime: این نوع یک فیلد ورودی تاریخ و زمان ایجاد می کند که به کاربر اجازه می دهد تاریخ و زمان را انتخاب کند.

<label for="event-date">تاریخ و زمان رویداد:</label>
<input type="datetime" id="event-date" name="event-date">

datetime-local: این نوع یک فیلد ورودی تاریخ و زمان ایجاد می کند که به کاربر اجازه می دهد تاریخ و زمان را در منطقه زمانی محلی انتخاب کند.

<label for="event-date">تاریخ و زمان رویداد:</label>
<input type="datetime-local" id="event-date" name="event-date">

month: این نوع یک فیلد ورودی ماه ایجاد می کند که به کاربر اجازه می دهد یک ماه و سال را انتخاب کند.

<label for="start-month">ماه شروع:</label>
<input type="month" id="start-month" name="start-month">

week: این نوع یک فیلد ورودی هفته ایجاد می کند که به کاربر اجازه می دهد هفته و سال را انتخاب کند.

<label for="week-selection">هفته:</label>
<input type="week" id="week-selection" name="week-selection">

submit: این نوع دکمه ای ایجاد می کند که به کاربر اجازه می دهد فرم را ارسال کند.

<input type="submit" value="Submit">

reset: این نوع دکمه ای ایجاد می کند که به کاربر اجازه می دهد فرم را به مقادیر پیش فرض خود بازنشانی کند.

<input type="reset" value="Reset">

button: این نوع دکمه ای ایجاد می کند که با کلیک روی آن یک عمل سفارشی انجام می دهد.

<button type="button" onclick="alert('سلام بر همگی!')">مرا کلیک کن</button>