Выпуск №9. HTML-теги формы

html формы

Всем привет!

В этом уроке речь пойдет о тегах html форм.

Формы HTML — это те поля, куда мы, например, вводим свои данные при регистрации на каком — либо сайте, форуме и т.д.

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

И так, начнем.

<form action="" method="get">
<input type="text" name="t1" maxlength="25" size="40" />
<input type="text" name="t2" maxlength="25" size="40" />
<input type="button" name="but" value="отправить данные" />
</form>

Все формы начинаются с тега <form> и заканчиваются тегом </form>.

Далее, параметр action в теге указывает на адрес программы (скрипта), которая будет обрабатывать данные из нашей формы.

Параметр method указывает на способ передачи данных.

Есть два способа: GET и POST. GET:при передачи этим способом, данные добавятся в конец адрес сайта (URL), и мы их увидим в адресной строке.

Если будем передавать методом POST, то данные будут переданы скрыто от пользователя.

Тег <input> определяет как раз саму форму. Рассмотрим параметры тега <input>:

CHECKED — означает, что CHECKBOX или RADIOBUTTON будет выбран.

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

NAME — имя поля ввода. Данное имя используется как уникальный идентификатор поля, по которому, впоследствии, вы сможете получить данные, помещенные пользователем в это поле.

SIZE - определяет визуальный размер поля ввода на экране в символах.

VALUE — присваивает полю значение по умолчанию или значение, которое будет выбрано при использовании типа RADIO (для типа RADIO данный атрибут обязателен)

TYPE — определяет тип поля ввода. По умолчанию это простое поле ввода для одной строки текста. Поскольку параметр type определяет тип формы, то рассмотрим подробно его значения.

СНЕСKBOX - используется для выбора пользователем нескольких значений из предложенных.

Пример использования:

<form action="" method="get">
<input type="checkbox" name="ch1" checked="checked"/>Вариант 1
<input type="checkbox" name="ch2"/>Вариант 2
<input type="checkbox" name="ch3"/>Вариант 3
<input type="checkbox" name="ch4"/>Вариант 4
</form>

RADIO — то же что и checkbox, но пользователь может выбрать только одно значение.

Для создания набора альтернатив вам необходимо создать несколько полей ввода с атрибутом TYPE="RADIO" с разными значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME.

Пример использования:

<form action="" "method="get">
<input type="radio" value="v1" name="ch1"/>Вариант 1
<input type="radio" value="v2" name="ch2"/>Вариант 2
<input type="radio" value="v3" name="ch3" checked="checked"/>Вариант 3
<input type="radio" value="v4" name="ch4"/>Вариант 4
</form>

PASSWORD — то же самое, что и атрибут TEXT, но вводимое пользователем значение не отображается браузером на экране (отображаются звездочки вместо символов).

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

SUBMIT — данный тип обозначает кнопку, при нажатии которой будет вызвана CGI-программа (или URL), описанная в заголовке формы (action).

Атрибут VALUE может содержать строку, которая будет высвечена на кнопке.

TEXT — данный тип поля ввода описывает однострочное поле ввода. Это как раз те поля, которые используются для регистрации, ввода логина и пароля. Этот тип поля наиболее часто встречающийся.

SELECT — тег SELECT позволяет пользователю выбрать значение из фиксированного списка значений. Обычно это представлено выпадающим меню.

Тег SELECT имеет один или более параметр между стартовым тегом <SELECT> и завершающим </SELECT>. По умолчанию, первый элемент отображается в строке выбора.

Пример использования:

<form action="" method="get">
<select name="n">
<option>Вариант 1</option>
<option>Вариант 2</option>
<option>Вариант 3</option>
<option>Вариант 4</option>
</select>
</form>

TEXTAREA — Тег (Обращаю внимание! Это именно тег, а не значение параметра type) используется для того, чтобы позволить пользователю вводить свободный текст.

Пример использования:

<form action="" method="get">
<textarea name="namm" rows="4" cols="30">
</textarea>
</form>

NAME - имя поля ввода

ROWS — высота поля ввода в символах

COLS — ширина поля ввода в символах

На этом выпуск посвященный HTML-тегам формы, завершим, если возникли вопросы, пишите.

Просьба присылать с вопросом ваш код того, что вы делаете.

Так будет проще и мне понять, что у вас не получилось и дать вам четкий ответ, и вам меньше объяснять в письме, что у вас не выходит.

Всегда Ваш, Андрей Бернацкий.
киберсант-вебмастер

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (11)

  1. Андрей

    Можно узнать почему у вас в поле chekbox одинаковые значения параметра name хотя они должны быть разными.

  2. Виктор

    Мда… Очень ждал этого урока. А более подробной информации не получилось. Все значения и тэги и так можно узнать в Нете. Хотелось бы пример формы и как заставить ее работать. Как минимум для меня это более важно. Но все равно спасибо. Надеюсь в будущем увидеть более подробные уроки с примерами)))

  3. Елена

    Спасибо большое Андрей! HTML формы получились! Пример HTML формы можно легко создать самостоятельно, если внимательно прочитать текст. Все понятно и доступно написано в уроке! Спасибо!!!

  4. Tanuxa

    Спасибо за урок!!! С ФОРМАМИ разобралась, всё получилось! :)
    Выдержка с урока:
    Для создания набора альтернатив вам необходимо создать несколько полей ввода с атрибутом TYPE=»RADIO» с
    разными значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME.
    Так вот, в уроке в примере — значения у атрибута NAME разные, но ведь должны же все значения быть одинаковыми. Или я чего-то не понимаю? :)

    • Ирина

      Да, всё верно. Значения атрибута NAME должны быть одинаковые, иначе не будет переключаться кнопка, т.е. нельзя будет выбрать. В уроке в примере нужно поставить одинаковые значение. Автору — исправте пожалуйста!

  5. Маргарита

    Андрей, спасибо за урок.

  6. Семён

    Андрей, спасибо за классные уроки.

  7. Владимир

    Хочу скачать Ваши уроки, на бумажный носитель, так легче усваивать, но комментарий мне не нужен, экономлю бумагу, как быть?

  8. Василий

    Андрей,спасибо за уроки.Это то,что я не мог найти в инете.

  9. Станислав

    Андрей! Спасибо за урок.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree