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

Вы, наверно, многократно видели текстовые формы на многих сайтах. На моём блоге с помощью них реализуются добавление комментариев и обратная связь. Теперь пора научиться самим создавать данные формы.

INPUT

Описание:

Тег предназначен для создания текстовых полей, кнопок, чекбоксов, радио-переключателей и много другого.

Атрибуты:

checked - выбор флажка или радио-переключателя по умолчанию
disabled - блокировка данного элемента
maxlength - максимальное число символов, доступных для ввода
name - имя текстового поля
readonly - запрет ввода
size - размер поля
type- тип инпута
value - значение текстового поля

Предлагаю создать вот такую форму:

Для начала создадим поля под имя и сайт. Для этого создаём документ, прописываем текст и добавляем два тега INPUT:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Текстовые поля и формы</title>
</head>
<body>
Имя:<br/><input/><br/>
Сайт:<br/><input/>
</body>
</html>

Как видите, я добавил знакомый нам тег BR для того, чтобы поля находились на следующей строке. Так как текстовые поля бывают разных видов (чекбокс, радио-переключатели, текстовое поле), то стоит указать тип, чтобы в дальнейшем не было ни каких проблем. Тип указывается с помощью атрибута type. Для того, чтобы получить обычные текстовые поля стоит использовать type с параметром text. Получаем:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Текстовые поля и формы</title>
</head>
<body>
Имя:<br/><input type="text"/><br/>
Сайт:<br/><input type="text"/>
</body>
</html>

Сново смотрим на скрин и замечаем, что текстовом поле "Сайт" уже по умолчанию содержит в себе надпись "http://". За такие возможности отвечает атрибут value. Пробуем:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Текстовые поля и формы</title>
</head>
<body>
Имя:<br/><input type="text"/><br/>
Сайт:<br/><input type="text" value="http://"/>
</body>
</html>

Превосходно. Теперь нужно разобраться с чекбоксами. Для того, чтобы вопрос находился через строчку, добавляем два тега BR, а после добавляем наш вопрос и ещё один инпут:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Текстовые поля и формы</title>
</head>
<body>
Имя:<br/><input type="text"/><br/>
Сайт:<br/><input type="text" value="http://"/><br/>
<br/>
Какие языки вам нравятся?<br/>
<input/>
</body>
</html>

Если сейчас откроем наш документ в браузере, то увидим, что мы получили текстовое поле, но нам нужен чекбокс, поэтому добавляем атрибут type с параметром checkbox и дописываем текст, который будет находиться рядом с чекбоксом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Текстовые поля и формы</title>
</head>
<body>
Имя:<br/><input type="text"/><br/>
Сайт:<br/><input type="text" value="http://"/><br/>
<br/>
Какие языки вам нравятся?<br/>
<input type="checkbox"/>PHP
</body>
</html>

Аналогичным образом проделываем операцию и для остальных вариантов, только не забывайте добавлять тег BR для переноса. В результате у вас получится:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Текстовые поля и формы</title>
</head>
<body>
Имя:<br/><input type="text"/><br/>
Сайт:<br/><input type="text" value="http://"/><br/>
<br/>
Какие языки вам нравятся?<br/>
<input type="checkbox"/>PHP<br/>
<input type="checkbox"/>HTML<br/>
<input type="checkbox"/>CSS<br/>
<input type="checkbox"/>JS<br/>
<input type="checkbox"/>SQL<br/>
</body>
</html>

Следующий этап - радио-переключатели - идентичен чекбоксам с той разницей, что теперь вы будете использовать type с параметром radio. Вы попробуйте сделать это саймостоятельно. Полученный результат:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Текстовые поля и формы</title>
</head>
<body>
Имя:<br/><input type="text"/><br/>
Сайт:<br/><input type="text" value="http://"/><br/>
<br/>
Какие языки вам нравятся?<br/>
<input type="checkbox"/>PHP<br/>
<input type="checkbox"/>HTML<br/>
<input type="checkbox"/>CSS<br/>
<input type="checkbox"/>JS<br/>
<input type="checkbox"/>SQL<br/>
<br/>
Какому типу оптимизации вы отдаёте приоритет?<br/>
<input type="radio"/>SMO<br/>
<input type="radio"/>SEO<br/>
</body>
</html>

От финишной ленты нас отделяет ещё одно поле, но поле это непростое, а золотое((: Дело в том, что текст, содержащийся в этом поле, нельзя изменить. Чего-то не хватает. А не хватает атрибута readonly. Именно он и отвечает за блокирование поля. Кстати, здесь нужно ещё использовать value, ведь текст появляется в поле по умолчанию. Пробуем и получаем итог:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Текстовые поля и формы</title>
</head>
<body>
Имя:<br/><input type="text"/><br/>
Сайт:<br/><input type="text" value="http://"/><br/>
<br/>
Какие языки вам нравятся?<br/>
<input type="checkbox"/>PHP<br/>
<input type="checkbox"/>HTML<br/>
<input type="checkbox"/>CSS<br/>
<input type="checkbox"/>JS<br/>
<input type="checkbox"/>SQL<br/>
<br/>
Какому типу оптимизации вы отдаёте приоритет?<br/>
<input type="radio"/>SMO<br/>
<input type="radio"/>SEO<br/>
<br/>
Правило сайта:<br/>
<input type="text" value="Не ругаться!" readonly/>
</body>
</html>

На этом пока притормозим. Пережуйте всё, а в следующим уроке будем создавать форму с кнопками и остальными полями.

Отсебятина:

В ближайшее време ждите статью на тему правильного правописания HTML-кода. Также есть идея написать пост, в котором буду рассказывать, как реализуется система комментариев.