Формы HTML | Теги input и textarea

Здравствуйте уважаемые начинающие веб-мастера. Продолжим изучение HTML

Эту статью полностью посвятим формам html.

Во первых, что такое форма html. Все Вы конечно же встречали элементы, или поля, в которые нужно вводить логин и пароль. Так вот — это форма.

Различные окошки, в которые выставляются галочки или точки для выбора того или иного элемента или действия — это тоже форма.

Поля для комментариев, кнопки Отправить, Очистить, Выберите файл — всё это тоже формы html.

Создаются формы при помощи тегов <form> и <input>, причём тег <form> создаёт саму форму и имеет открывающую и закрывающую части, а тег <input> определяет вид и содержание, и закрывающей части не имеет.

Написание:

<form>
<input … …>
</form>

Тег <input> имеет обязательный атрибут, или параметр type, значение которого определяет, какой вид будет иметь форма.

<input type="password">	Поле для ввода пароля
<input type="text">	Поле для ввода текста
<input type="button">	Кнопка
<input type="reset">	Сбросить
<input type="submit">	Отправить
<input type="image" src="URL">	Кнопка картинка
<input type="checkbox">	Позволяет выбрать несколько элементов	Арбуз Дыня
<input type="radio">	Переключатель выбирает один элемент	Арбуз Дыня
<input type="file">	Выбор файла

Кроме обязательного атрибута type, тег input принимает ещё ряд атрибутов, значения которых влияют на формы.

size — определяет ширину текстового поля.

Значение задаётся любым целым числом, так как ширина поля определяется числом символов шрифта и их шириной, то есть если поменять шрифт на тот, у которого отличается ширина символов, то ширина поля тоже изменится.

Синтаксис: <input type="text" size="20">

value — присваивает значение элемента.

В зависимости от типа формы, значения атрибута value выполняют следующие функции:

1. Для текстовых полей, указывает предварительно введённую строку. Например в форме подписки — это Ведите Ваш E-mail. При заполнения поля, эта строка исчезает, а после очистки появляется вновь.

<input type="text" value="Введите Ваш e-mail">

2. Для кнопок устанавливает текст внутри кнопки.

<input type="button" value="Кнопка">

3. Для переключателей и флажков, в значении атрибута value, для каждого флажка ставится уникальное название, чтоб серверная программа могла определить, какой именно элемент выбрал пользователь.

<input type="radio" value="one"> Арбуз
<input type="radio" value="two"> Дыня

align — определяет выравнивание изображения, текста.

Принимает значения:

bottom — выравнивание по нижней границе (задаётся по умолчанию);

top — выравнивание изображения по самому высокому элементу первой строки;

left — выравнивание по левому краю;

right — выравнивание по правому краю;

middle — выравнивание середины изображения по базовой линии;

<input type="image" src="images/10.png" align="left">

alt — альтернативный текст изображения.

Выводит окно с описанием изображения при наведении курсора.

<input type="image" alt="Любой текст">

border — добавляет рамку к изображению.

Задаётся только толщина рамки любым целым числом в пикселях. Цвет — под цвет текста.

<input type="image" border="2">

name — имя формы, необходимое для идентификации её обработчиком.

В значении указывается любое уникальное имя.

<input type="Любой из элементов" name="Любое имя">

checked — предварительно активированный переключатель или флажок.

У этого атрибута нет значений. Просто его присутствие указывает, что переключатель или флажок уже помечен.

disabled — блокирует возможность изменения элемента.

У этого атрибута нет значений. Его присутствие блокирует всякую активность в форме.

maxlenght — определяет максимальное количество символов в тексте.

В значении указывается любое целое положительное число

<input type="text" maxlenght="200">

readonly — устанавливает, что поле и его содержание не могут изменятся пользователем.

У этого атрибута нет значений.

Форма комментариев создаётся несколько иначе.

Для создания формы комментариев применяется тег textarea

Размер окно задаётся атрибутами cols и rows, через количество предполагаемых строк и столбцов.

Их значения задаются любыми целыми положительными числами.

Синтаксис:

Комментарий<br>
<textarea name="comment" cols="40" rows="3"></textarea>

Комментарий

Теперь напишем html файл с формами, и посмотрим, как всё это смотрится в коде.

Результат:

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

Как Вы надеюсь понимаете — это чистый html. Если применить оформление css, то как всю картинку, так и отдельные элементы можно сделать гораздо симпатичнее.

Но об этом читайте в рубрике CSS

Желаю творческих успехов.

Перемена

Приглянулось платье. Решила купить — не влезла. Расстроилась, купила торт. Влез гад.

Атрибут style < < < В раздел > > > Вставляем видео и делаем ему рамочку