наверх





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


В этом уроке мы разберем элементарные понятия и теги с атрибутами, которые всегда вам пригодятся. Делаться это все будет на примере регистрации посетителя.

Итак, давайте начнем. Сначала создадим документ и вставим форму:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<form name="reg" method="post" action="reg.php">

</form>
</body>
</html>


Наш документ готов, форма тоже. Теперь, что нам нужно? Итак, для того, что бы пользователь зарегистрировался, нужно несколько полей. Это имя и фамилия посетителя и пароль. Дальше обязательно создадим кнопочку "Отправить" и еще можно создать кнопку "Очистить". Теория понятна, давайте перейдем к практике и изучим нужные нам теги.

<input>


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

У тега <input> имеется несколько очень важных значений атрибутов. Но давайте сначала разберем атрибуты, какие у него есть:

name


Этот атрибут обязателен, он предназначен для того, что бы обрабатываемый скрипт мог различать его от остальных. К тому же, он нужен еще и для того, что бы с помощью него обрабатываемый скрипт, смог заносить в базу данных в определенное поле именно это значение поля.

type


Именно с помощью этого поля создается тип поля. Это может быть текстовое поле, файл или кнопка.

size


Это размер поля, в ширину. Необязательный атрибут, так как ширину поля можно задать через CSS.

Вот три важных атрибута, которые пригодятся в начале изучения. Конечно, у тега <input> много атрибутов, здесь показаны лишь самые важные.

Итак, мы изучили три атрибута. Теперь давайте разберемся, как сделать поле. За тип, как было написано выше, отвечает атрибут type, с ним то мы и поработаем. У него так же, достаточно много значений, однако сейчас мы изучим лишь несколько:

text


Как видно из названия, это значение определяет тег <input> как текстовое поле.

password


Определяет тег, как поле для написания пароля. По виду она ничем не отличается от text, она отличается лишь тем, что вместо букв и цифр, в ней показаны лишь звездочки.

submit


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

reset


Тоже кнопка, однако она создана для того, что бы очистить все поля и посетитель заново смог их всех заполнять.

Итак, нужные нам атрибуты и значения я вам разъяснил, теперь давайте напишем форму регистрации посетителя:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<form name="reg" method="post" action="reg.php">
<label>Имя:<br>
<input name="Name" type="text" size="20"></label><br>
<label>Фамилия:<br>
<input name="LastName" type="text" size="30"></label><br>
<label>Пароль:<br>
<input name="pass" type="password" size="20"></label><br>
<br>
<input type="submit" value="Отправить"> <input type="reset" value="Очистить">
</form>
</body>
</html>




Если вы внимательно рассмотрите код, то увидите, что здесь мы еще использовали тег <label>. Он предназначен, что бы при нажатии, к примеру, на слово "Имя:", поле "Name" была активировано. Для этого, данный тег ставится перед полем вместе с нужным нам словом и в конце поля.
Так же, еще один момент. По сути, тег <input> можно использовать и без формы, но если дальше эта форма не будет обрабатываться и отправляться в обработчик. А без этого, она не так уж и нужна.

Кстати, вот получившийся у нас результат, который можно опробовать самому.



Поделиться
Border-radius генератор
Занимаетесь веб-разработкой? Кроссбраузерный border-radius генератор с поддержкой выборочных скруглений краев.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.