Форма html и ее основные элементы управления (ввода), отображение формы и элементов ввода на веб-странице, применение отдельных атрибутов. Примеры кода.
Для проведения тестов с отображением элементов управления html-формы создайте файл test.html. Элементы формы описываются тегами, внутри которых могут быть атрибуты. Список основных атрибутов представлен в статье HTML. Элемент формы в параграфе «Атрибуты элементов управления».
Тег <input> без атрибутов:
1 |
<input> |
Тег <input> с атрибутами type
, name
, size
и value
:
1 |
<input type="text" name="a" size="6" value="0"> |
Элемент <form>
Элемент <form> используется для создания html-формы, предназначенной для ввода пользовательских данных. Он представляет из себя контейнер для других элементов управления формы (элементов ввода), таких как: метки, текстовые поля, флажки, переключатели, кнопки и т.д.
В отличие от элементов управления пользовательской формы VBA Excel, элементы ввода html-формы могут существовать вне формы. Это означает, что элементы управления формы html, не обязательно должны быть расположены внутри контейнера <form>.
Элемент <label>
Пример кода для отображения на веб-странице элемента формы <label>:
1 2 3 |
<form> <label>Моя первая метка</label> </form> |
Результат:
Элемент <input>
type
: button
(кнопка), checkbox
(флажок), color
(палитра), date
(календарь), text
(текстовое поле) и другие. По умолчанию отображается текстовое поле.
Пример кода для отображения на веб-странице элемента формы <input>:
1 2 3 4 5 |
<form> <label>Элемент input по умолчанию:</label> <input><br><br> <label>Элемент input с type="text":</label> <input type="text"><br><br> <label>Элемент input с type="button":</label> <input type="button" value="Это кнопка"> </form> |
Результат:
Внешний вид элементов управления формы в файле test.html будет другим, так как здесь свои коррективы привносит WordPress.
Элемент <button>
Элемент <button> появился в html позже элемента <input> и его синтаксис немного отличается от кнопки <input> — название кнопки пишется между открывающим и закрывающим тегами <button>Имя кнопки</button>, а не в атрибуте value
, как у кнопки <input>. Опять же, чтобы в элементе <button> работал атрибут onclick
, все-равно необходимо указать атрибут type="button"
.
Пример кода для отображения на веб-странице элемента формы <button>:
1 2 3 |
<form> <label>Элемент button:</label><button type="button" onclick="alert('Спасибо, что нажали меня!\nВаша кнопка.')">Нажмите меня!</button> </form> |
Результат:
Элемент <select>
Пример кода для отображения на веб-странице элемента формы <select>:
1 2 3 4 5 6 7 8 9 10 |
<form> <label>Выберите фрукт:</label> <select> <option>Апельсин</option> <option>Гранат</option> <option>Груша</option> <option>Мандарин</option> <option>Яблоко</option> </select> </form> |
Результат:
По умолчанию в раскрывающемся списке выбран первый элемент. Чтобы задать первоначальный выбор другому элементу, следует к параметру <option> добавить атрибут selected
, например:
1 |
<option selected>Груша</option> |
Элемент <datalist>
type="button"
).Пример кода для отображения на веб-странице элемента формы <datalist>:
1 2 3 4 5 6 7 8 9 10 11 |
<form> <label>Выберите овощ:</label> <input list="list1" placeholder="Раскройте список"> <datalist id="list1"> <option value="Огурец"> <option value="Петрушка"> <option value="Свекла"> <option value="Томат"> <option value="Тыква"> </datalist> </form> |
Атрибут list
элемента <input> должен ссылаться на атрибут id
элемента <datalist>. Атрибут placeholder
определяет подсказку.
Результат:
После выбора одной из опций, список начинает открываться только с этой выбранной опцией. Чтобы список восстановился, выбранное значение необходимо удалить. Текстовое поле со списком можно заполнять и редактировать вручную.
Элемент <textarea>
Пример кода для отображения на веб-странице элемента формы <textarea>:
1 2 3 4 5 |
<form> <textarea rows="7" cols="40"> Материал из Википедии: «Дарвинизм — по имени английского натуралиста Чарльза Дарвина — в узком смысле — направление эволюционной мысли, приверженцы которого согласны с основными идеями Дарвина в вопросе эволюции (современная их форма, порой с существенным переосмыслением некоторых аспектов представлена в синтетической теории эволюции), согласно которым главным (хотя и не единственным) фактором эволюции является естественный отбор.» </textarea> </form> |
Атрибут rows
задает высоту элемента <textarea> по количеству видимых строк в текстовой области. Если строк больше, появляется полоса прокрутки.
Атрибут cols
определяет ширину элемента <textarea> по количеству умещающихся в строке символов моноширинного шрифта. На ширину влияет заданный размер шрифта. Если строка содержит большее количество символов, чем указано, не уместившаяся часть строки переносится на новую строку.
Результат:
Элемент <fieldset>
1 2 3 4 5 6 7 8 9 10 11 |
<form> <fieldset> <legend>Работник</legend><br> <label>Имя:</label> <input type="text" value="Иван"><br><br> <label>Фамилия:</label> <input type="text" value="Иванов"><br><br> <label>Должность:</label> <input type="text" value="Главный инженер"><br><br> </fieldset> </form> |
Элемент формы <legend> задает заголовок для элемента <fieldset>. Для просмотра результата вставьте код в файл test.html и откройте его в браузере.
Элемент <output>
Подробнее об элементе управления <output> в статье HTML. Вычисления в форме.