У HTML це важливий елемент форми HTML. Атрибут 'type' елемента input може мати різні типи, що визначає інформаційне поле. Наприклад, дає текстове поле.

Нижче наведено список усіх типів елементів HTML.

HTML5 додав нові типи елемента. Нижче наведено список типів елементів HTML5

Далі наведено опис типів елементів із прикладами.

1. :

елемент типу 'text' використовується для визначення однорядкового текстового поля введення.

приклад:

 Enter first name <br> <br> Enter last name <br> <br> <p> <strong>Note:</strong> The default maximum cahracter lenght is 20.</p> 

Вихід:

Тип введення тексту:

The 'текст' поле визначає текстове поле для однорядкового введення.

Примітка: Максимальна довжина символу за замовчуванням становить 20.

2. :

Елемент типу 'пароль' дозволяє користувачеві безпечно вводити пароль на веб-сторінці. Введений текст у полі пароля перетворюється на «*» або «.», щоб інший користувач не міг його прочитати.

приклад:

 Enter User name <br> <br> Enter Password <br> <br> <br> 

Вихід:

Введіть тип «пароль»:

The 'пароль' поле визначає поле для введення пароля в один рядок для безпечного введення пароля.

3. :

Елемент типу 'надіслати' визначає кнопку надсилання для надсилання форми на сервер, коли відбувається подія 'клацання'.

приклад:

 Enter User name <br> <br> Enter Password <br> <br> <br> 

Вихід:

зворотний рядок java

Тип введення 'надсилати':

Після натискання кнопки «Надіслати» форма буде надіслана на сервер і сторінка перенаправлена ​​на дію значення. Ми дізнаємось про атрибут 'action' у наступних розділах

4. :

Тип «скидання» також визначається як кнопка, але коли користувач виконує подію клацання, він за замовчуванням скидає всі введені значення.

приклад:

 User id: Password: <br> <br> 

Вихід:

Тип 'скидання' введення:

Спробуйте змінити введені значення ідентифікатора користувача та пароля, тоді, коли ви натиснете кнопку скинути, поля введення буде скинуто до значень за замовчуванням.

5. :

Тип «радіо» визначає перемикачі, які дозволяють вибрати опцію з набору пов’язаних опцій. Одночасно можна вибрати лише одну опцію перемикача.

приклад:

Будь ласка, виберіть свій улюблений колір

Вихід:

Тип введення «радіо».

Будь ласка, виберіть свій улюблений колір

6. :

Поле типу «прапорець» відображається у вигляді квадратних полів, які можна встановити або зняти, щоб вибрати варіанти з наданих параметрів.

Примітка. Перемикачі подібні до прапорців, але між обома типами є важлива різниця: перемикачі дозволяють користувачу вибирати лише один параметр за раз, тоді як прапорець дозволяє користувачеві вибирати від нуля до кількох варіантів одночасно .

приклад:

 Enter your Name: <p>Kindly Select your favourite sports</p> Cricket <br> Tennis <br> Football <br> Baseball <br> Badminton <br> <br> 

Вихід:

Введіть тип прапорця

Реєстраційний формуляр

Будь ласка, виберіть свій улюблений вид спорту

7. :

Тип «кнопка» визначає просту кнопку, яку можна запрограмувати для функціонального керування будь-якою подією, наприклад подією клацання.

зміна рядка в c

Примітка: в основному він працює з JavaScript.

приклад:

Вихід:

Тип введення «кнопка».

Натисніть кнопку, щоб побачити результат:

Примітка: у наведеному вище прикладі ми використали «сповіщення» JS, про яке ви дізнаєтесь у нашому посібнику з JS. Використовується для показу спливаючого вікна.

8. :

Елемент із типом 'file' використовується для вибору одного або кількох файлів із сховища пристрою користувача. Після вибору файлу та надсилання цей файл можна завантажити на сервер за допомогою JS-коду та файлового API.

приклад:

 Select file to upload: 

Вихід:

Введіть тип файлу.

Ми можемо вибрати будь-який тип файлу, поки ми його не вкажемо! Вибраний файл з’явиться поруч із опцією «вибрати файл».

9. :

Тип 'image' використовується для представлення кнопки надсилання у вигляді зображення.

приклад:

 <h2>Input &apos;image&apos; type.</h2> <p>We can create an image as submit button</p> User id: <br> <br> <br> 

Щойно доданий елемент типів HTML5

1. :

Тип 'color' використовується для визначення поля введення, яке містить колір. Це дозволяє користувачеві вказати колір за допомогою візуального колірного інтерфейсу в браузері.

програми python

Примітка. Тип «колір» підтримує значення кольору лише в шістнадцятковому форматі, а значенням за замовчуванням є #000000 (чорний).

приклад:

 Pick your Favorite color: <br> <br> Upclick <br> <br> Downclick 

Вихід:

Введіть типи кольорів:

Примітка: Значення за замовчуванням типу «колір» — #000000 (чорний). Він підтримує лише значення кольору в шістнадцятковому форматі.

2. :

Елемент типу 'date' створює поле введення, яке дозволяє користувачеві вводити дату в заданому форматі. Користувач може ввести дату за допомогою текстового поля або за допомогою інтерфейсу вибору дати.

приклад:

 Select Start and End Date: <br> <br> Start date: <br> <br> End date: <br> <br> 

Вихід:

Введіть тип «дата».

3. :

Елемент типу 'datetime-local' створює поле введення, яке дозволяє користувачеві вибрати дату, а також місцевий час у годинах і хвилинах без інформації про часовий пояс.

приклад:

 Select the meeting schedule: <br> <br> Select date &amp; time: <br> <br> 

Вихід:

Введіть тип 'datetime-local'.

4. :

Тип 'email' створює поле введення, яке дозволяє користувачеві ввести адресу електронної пошти з перевіркою шаблону. Кілька атрибутів дозволяють користувачеві вводити більше однієї адреси електронної пошти.

приклад:

 <b>Enter your Email-address</b> <p> <strong>Note:</strong> User can also enter multiple email addresses separating by comma or whitespace as following: </p> <b>Enter multiple Email-addresses</b> 

Вихід:

Введіть тип електронної пошти

Примітка: Користувач також може ввести кілька адрес електронної пошти, розділяючи їх комами або пробілами, як показано нижче:

5. :

Тип «місяць» створює поле введення, яке дозволяє користувачеві легко вводити місяць і рік у форматі «ММ, РРРР», де ММ визначає значення місяця, а РРРР визначає значення року. новий

перетворення nfa в dfa

приклад:

 Enter your Birth Month-year: 

Вихід:

Тип введення «місяць»:

6. :

Номер типу елемента створює поле введення, яке дозволяє користувачеві вводити числове значення. Ви також можете обмежити введення мінімального та максимального значення за допомогою атрибутів min та max.

приклад:

 Enter your age: 

Вихід:

Введіть тип «число».

Примітка: Це дозволить ввести число в діапазоні 50-80. Якщо ви хочете ввести число, відмінне від діапазону, відобразиться помилка.

7. :

Елемент типу 'url' створює поле введення, яке дозволяє користувачеві ввести URL-адресу.

приклад:

 Enter your website URL: <br> 

Вихід:

Введіть тип url

8. :

Тип тижня створює поле введення, яке дозволяє користувачеві вибрати тиждень і рік зі спадного календаря без часового поясу.

приклад:

 <b>Select your best week of year:</b> <br> <br> 

Вихід:

Введіть тип 'тиждень'.

9. :

Тип «пошук» створює поле введення, яке дозволяє користувачеві ввести пошуковий рядок. Вони функціонально симетричні до типу введення тексту, але можуть мати інший стиль.

приклад:

 Search here: 

Вихід:

Введіть тип «пошук».

10. :

Елемент типу ?tel? створює поле для введення номера телефону. Тип 'tel' не має перевірки за замовчуванням, наприклад електронної пошти, оскільки шаблон телефонного номера може відрізнятися в усьому світі.

приклад:

 <b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b> <br> <br> 

Вихід:

Введіть тип 'tel'.

Примітка: Тут ми використовуємо два атрибути «шаблон» і «потрібний», які дозволять користувачеві вводити число в заданому форматі, і його потрібно ввести в поле введення.