Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

HTML Учебники


HTML Формы


HTML Графика


HTML Медиа


HTML API Интерфейсы


HTML Примеры


HTML Ссылки



HTML Элементы форм



В этой главе описаны все различные элементы HTML форм.

Элемент <input>

Одним из наиболее часто используемых элементов формы является элемент <input>.

Элемент <input> может быть отображен несколькими способами, в зависимости от атрибута type.

<input type="text" id="firstname" name="firstname">
Попробуйте сами »

Если атрибут type опущен, поле ввода получает значение по умолчанию тип: "text".

Все различные типы входных данных рассматриваются в следующей главе: HTML Типы ввода.


Элемент <select>

Элемент <select> определяет раскрывающийся список:

<select id="cars" name="cars">
 <option value="volvo">Вольво</option>
 <option value="saab">Сааб</option>
 <option value="fiat">Фиат</option>
 <option value="audi">Ауди</option>
</select>
Попробуйте сами »

Элемент <option> определяет параметр, который может быть выбран.

По умолчанию выбирается первый элемент в раскрывающемся списке.

Чтобы определить предварительно выбранный параметр, добавьте атрибут selected с параметром <option>:

<option value="fiat" selected>Фиат</option>
Попробуйте сами »

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

Используйте атрибут size для указания количества видимых значений:

<select name="cars" size="3">
 <option value="volvo">Вольво</option>
 <option value="saab">Сааб</option>
 <option value="fiat">Фиат</option>
 <option value="audi">Ауди</option>
</select>
Попробуйте сами »

Разрешить выбор:

Используйте атрибут multiple, позволяющий пользователю выбрать более одного значения:

<select name="cars" size="4" multiple>
 <option value="volvo">Вольво</option>
 <option value="saab">Сааб</option>
 <option value="fiat">Фиат</option>
 <option value="audi">Ауди</option>
</select>
Попробуйте сами »

Элемент <textarea>

Элемент <textarea> элемент определяет многострочное поле ввода (текстовой области):

<textarea name="message" rows="10" cols="30">
 Кот играл в саду.
</textarea>
Попробуйте сами »

Атрибут rows указывает видимое количество строк в текстовой области.

Атрибут cols определяет видимую ширину текстовой области.

Именно так приведенный выше HTML код будет отображаться в браузере:

Вы также можете определить размер текстовой области с помощью CSS:

<textarea name="message" style="width:200px; height:600px;">
 Кот играл в саду.
</textarea>
Попробуйте сами »


Элемент <button>

Элемент <button> определяет кликабельность button:

<button type="button" onclick="alert('Привет Мир!')">Нажмите на меня!</button>
Попробуйте сами »

Именно так приведенный выше HTML код будет отображаться в браузере:


Примечание: Всегда указывайте атрибут type для элемента button. Различные браузеры могут использовать различные типы по умолчанию для элемента button.


Элементы <fieldset> и <legend>

Элемент <fieldset> используется для группировки связанных данных в форме.

Элемент <legend> определяет заголовок для элемента <fieldset>.

<form action="/action_page.php">
 <fieldset>
   <legend>Персональная информация:</legend>
   <label for="fname">Имя:</label><br>
   <input type="text" id="fname" name="fname" value="Андрей"><br>
   <label for="lname">Фамилия:</label><br>
   <input type="text" id="lname" name="lname" value="Щипунов"><br><br>
   <input type="submit" value="Отправить">
 </fieldset>
</form>
Попробуйте сами »

Именно так приведенный выше HTML код будет отображаться в браузере:

Персональная информация: Имя:

Фамилия:



Элемент <datalist>

Элемент <datalist> задает список предопределенных параметров для элемента <input>.

При вводе данных пользователи будут видеть раскрывающийся список предопределенных параметров.

Атрибут list элемента <input>, обращается к атрибуту id элемента <datalist>.

<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>
Попробуйте сами »

Элемент <output>

Элемент <output> элемент представляет собой результат вычисления (например, выполняемого скриптом).

Выполните расчет и покажите результат в виде элемента <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 Упражнения

В приведенной ниже форме добавьте пустой выпадающий список с именем "cars".

<form action="/action_page.php">
 <>
 </>
</form>


HTML Элементы формы

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

Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.



×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.