Урок. HTML. Елементи форми

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



HTML/CSS. HTML Елементи форм

Цей розділ описує всі елементи форм в HTML.


Елемент <input>

Найбільш важливим елементом форми є елемент <input>. Елемент <input> може відображатися кількома способами, залежно від атрибуту type.

Приклад:

<input name="firstname" type="text">
Спробуйте самі! »

Примітка: Якщо атрибут type опущений, поле введення отримує тип за замовчуванням: "text".

Усі різні типи вхідних даних розглядаються в наступному розділі.


Елемент <select>

Елемент <select> визначає випадаючий список:

Приклад:

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>
Спробуйте самі! »

Елементи <option> визначають опцію, яку можна вибрати. За замовчуванням вибирається перший елемент у спадному списку. Щоб визначити попередньо вибраний параметр, додайте атрибут selected до параметра:

Приклад:

<option value="fiat" selected>Fiat</option>
Спробуйте самі! »

Видимі значення:

Використовуйте атрибут size, щоб вказати кількість видимих значень:

Приклад:

<select name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>
Спробуйте самі! »

Дозволити вибір декількох позицій:

Використовуйте атрибут multiple, щоб дозволити користувачеві вибрати більше одного значення:

Приклад:

<select name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>
Спробуйте самі! »

Елемент <textarea>

Елемент <textarea> визначає багаторядкове поле введення (текстова область):

Приклад:

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Спробуйте самі! »

Атрибут rows визначає видиме число рядків у текстовій області. Атрибут cols визначає видиму ширину текстової області.

Таким чином HTML-код буде відображатися в браузері:

Ви також можете визначити розмір області тексту за допомогою CSS:

Приклад:

<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
Спробуйте самі! »

Елемент <button> (кнопка)

Елемент <button> визначає клікабельну кнопку (яку можна натиснути):

Приклад:

<button type="button" onclick="alert('Hello World!')">Click Me!</button>
Спробуйте самі! »

Таким чином даний HTML-код буде відображатися в браузері:

Примітка: Завжди вказуйте атрибут type елемента кнопки. Різні браузери можуть використовувати різні типи за замовчуванням для елемента кнопки.


Елементи форми в HTML5

HTML5 додав такі елементи форми:

Примітка: Браузери не показують невідомі елементи. Нові елементи, які не підтримуються у старих браузерах, не "псують" вашу веб-сторінку.


HTML5 елемент <datalist>

Елемент <datalist> вказує список попередньо визначених параметрів для елемента <input>. Користувачі побачать розкривний список попередньо визначених параметрів під час введення даних. Атрибут list елемента <input> має посилатися на атрибут id елемента <datalist>.

OperaSafariChromeFirefoxInternet Explorer

Приклад:

<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
   <option value="Firefox">
    <option value="Chrome">
   <option value="Opera">
    <option value="Safari">
  </datalist>
</form>
Спробуйте самі! »

HTML5 елемент <output>

Елемент <output> являє собою результат обчислення (подібно до того, як виконується скрипт).

OperaSafariChromeFirefoxInternet Explorer

Приклад:

Виконати розрахунок і показати результат у елементі <output>:

<form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)"
>

  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>
Спробуйте самі! »

Перевірте себе вправами!


HTML елементи форми

= нові в HTML5.

Тег Опис
<form> Визначає HTML форму для введення користувачем
<input> Визначає елемент управління введенням
<textarea> Визначає багаторядковий елемент управління введенням
<label> Визначає мітку для елемента <input>
<fieldset> Групи пов'язаних елементів у формі
<legend> Визначає заголовок для елемента <fieldset>
<select> Визначає випадаючий (розкривний) список
<optgroup> Визначає групу відповідних параметрів у розкривному списку
<option> Визначає параметр у розкривному списку
<button> Визначає клікабельну кнопку (яку можна натискати)
<datalist> Визначає список попередньо визначених параметрів для елементів управління введенням
<output> Визначає результат розрахунку

Примітка: Для отримання повного списку всіх доступних HTML тегів, відвідайте довідник HTML тегів.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.