HTML формы MEIN ARBEIT
   

Формы HTML

Дата: 13/11/2014

Вот вы и добрались до статьи, где я вам расскажу о HTML форме. Приветствую всех. Все предыдущие статьи были ориентированы в основном на создание и разметку web-страничек, но какой сайт обходится без HTML форм? Мало какой. Правда, можно обойтись и без них, но всё же рано или поздно вам понадобятся формы или его элементы.

Создаём HTML форму

Сама форма создаётся при помощи тега <form> и закрывающим </form>. Если вы думаете это всё, спешу вас огорчить. Это лишь начало! Вы помните, что в формах есть строчки, куда нужно вводить текст, и кнопка, которая отправляет этот текст, куда вы укажете. Такая кнопка часто прикрепляется к PHP, поэтому пока затрагивать обработчик не будем, а лучше узнаем всё о форме и его текстовых элементах на следующем примере.

Пример простой формы в HTML


<document HTML>
<html>
<head>
<title> Простая форма в HTML </title>
</head>
<body>
<form method="post" action="Ваш путь на файл обработчик файл.php">
<p>Введите ваше имя:
<input type="text" name="imya" size="20" value=""> </p>
<p>Сколько вам лет:</p>
<p> <input type="number" name="vozrast" size="3" value="18" min="10" max="999" step="1"></p></p>
<p>Напишите немного о себе.</p>
<textarea name="vash_text" cols="30" rows="5" required>
</textarea>
<p>Выберите из списка, какое время суток вы любите
<select name="vremya_sutok" size="1">
<option value="s1" selected>Ночь</option>
<option value="s2">День</option></select></p>
<p>Какой напиток вы любите больше всего:</p>
<p><input type="radio" name="napitki" value="voda" checked>ВОДА</p>
<p><input type="radio" name="napitki" value="KOMPOT">КОМПОТ</p>
<p><input type="radio" name="napitki" value="SOK"> СОК</p>
<p>Если вы ответили правдиво, поставьте галочку:<input type="checkbox" name="soglashenie" value="Yes"></p>
<input type="submit" value="отправить" name="submit">
<body>
</html>

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

Я немного покривил душой, назвав эту форму простой, но подумав, решил эту статью не разбивать на части и привёл действительно простую форму, только вставив в неё все возможности, какие бывают у формы. Поэтому сейчас всё подробно вам расскажу, что и как в нашей форме.
Первым делом, что я сделал в форме, это указал при помощи method="post" и action="Ваш путь на файл обработчик файл.php", каким образом следует отправить данные из формы и куда. Тут останавливаться я не буду, потому что это отдельная статья. Далее, я создал первую текстовую строчку, куда нужно будет ввести имя.
<input type="text" name="imya" size="20" value=""> </p>
Тегом input дал понять форме, что здесь будет объект. В атрибуте type указал, что это одна текстовая строка. Name нам послужит меткой для обработчика. Size - размер нашей строки для ввода имени, число 20 - это количество вводимых символов. Ну, а value делает нашу строку изначально пустой.
<p> <input type="number" name="vozrast" size="3" value="18" min="10" max="999" step="1"></p></p>
Здесь, при помощи type я дал числовое значение нашему полю. Name и size вы уже поняли для чего, поэтому перейдём к min и max, надеюсь, что вы уже догадались, что эти значения дают минимальные и максимальные значения вводимых в поле чисел, а step - это атрибут шага. Оно нужно, если вы вводите числа не с клавиатуры, а при помощи мыши.
<textarea name="vash_text" cols="30" rows="5" required>
</textarea>
Если в первой строке, куда мы вводили имя, было текстовое значение одной строки, то тег textarea делает поле многострочным. Cols - атрибут ширины, а rows - высоты строчного поля. Required делает поле обязательным для заполнения, то есть, если это поле не заполнить, то форма на обработчик не отправится!
<select name="vremya_sutok" size="1">
<option value="s1" selected>Ночь</option>
<option value="s2">День</option></select></p>
Тег select создаёт выдвижное поле. Option создаёт пункты в этом поле. Size указывает, сколько пунктов показать в этом поле. Value и name здесь служат меткой для обработчика.
<p><input type="radio" name="napitki" value="voda" checked>ВОДА</p>
Тут, при помощи type я создал переключатель для выбора ответа по виду - кружок с точкой. Name и value - метки для обработчика. Checked - этот параметр заранее ставит отметку на ответе.
<input type="checkbox" name="soglashenie" value="Yes">
В отличие от radio, в этом случае type создаёт квадратик с возможностью устанавливать или убирать галочки. Name и value служат метками для обработчика.
<input type="submit" value="отправить" name="submit">
И submit сама кнопка для отправки формы. Name - метка для обработчика. Метки нужны для возможности обращения программы к данной строке или тегу в зависимости от того, что вы хотите совершить. В случае с кнопкой, можно написать программку, которая проверяет форму и, если некоторые поля не заполнены, то кнопка отправки просто не будет срабатывать, но это уже Javascript и PHP, и мы их пока не затрагиваем.

В завершении о формах HTML

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

С уважением, Администратор!


предыдущая следующая
Список статей по теме...




   
Бесплатный Хостинг Яндекс.Метрика