В этой статье я покажу как в HTML можно создать форму с различными элементами (поля ввода, кнопки, переключатели и т.п.)
HTML форма обязательно начинается тегом <form> и заканчивается закрывающим тегом </form>.
Начинающий тег <form> имеет 2 атрибута:
- Action — задает адрес сценария, которому будут переданы данные формы.
- Method — задает метод передачи данных. Возможные варианты GET и POST. Если нет особой необходимости, я бы советовал выбирать метод POST.
Пример:
[html]
<form action="../test.php" method="post"></form>
[/html]
И так, рассмотрим элементы HTML формы:
1) Флажок (checkbox):
[html]
<form><input type="checkbox" name="color" value="black" />Черный
<input type="checkbox" name="color" value="red" checked="checked" />Красный(Выбран)
<input type="checkbox" name="color" value="white" />Белый
<input type="checkbox" name="color" value="blue" />Синий</form>
[/html]
Флажок делается с помощью элемента <input>, и атрибутов:
- name — Имя флажка
- type — Тип элемента <input>, в нашем случае это флажок «checkbox»
- value — Подпись переключателя, например «Синий»
- checked — Необязательный параметр, задает выбран ли данный элемент по умолчанию
2) Переключатель (radio):
[html]
<form><input type="radio" name="color" value="black" />Черный
<input type="radio" name="color" value="red" checked="checked" />Красный(Выбран)
<input type="radio" name="color" value="white" />Белый
<input type="radio" name="color" value="blue" />Синий</form>
[/html]
Переключатель делается с помощью элемента <input>, и атрибутов:
- name — Имя переключателя
- type — Тип элемента <input>, в нашем случае это переключатель «radio»
- value — Подпись переключателя, например «Синий»
- checked — Необязательный параметр, задает выбран ли данный элемент по умолчанию
3) Текстровое поле (text):
[html]
<form>
<input type="text" name="familiya" value="Текст по умолчанию" size="30" maxlength="50" />
</form>
[/html]
Текстовое поле делается с помощью элемента <input>, и атрибутов:
- name — Имя поля
- type — Тип элемента <input>, в нашем случае это текстовое поле «text»
- value — Текст вписанный по умолчанию, к примеру «Поле для фамилии»
- size — Ширина поля ввода в символах
- maxlength — максимальное количество символов которое можно ввести в текстовое поле
Три последних атрибута можно не использовать.
4) Поле для ввода пароля (password):
[html]
<form>
<input type="password" name="passw" size="15" maxlength="10" />
</form>
[/html]
Поле аналогично текстовому, только специализировано для ввода пароля (скрывает все вводимые символы). Делается с помощью элемента <input>, и атрибутов:
- name — Имя поля
- type — Тип элемента <input>, в нашем случае это поле для пароля «password»
- size — Ширина поля ввода в символах
- maxlength — максимальное количество символов которое можно ввести в текстовое поле
Два последних атрибута можно не использовать.
5) Многострочное поле ввода текста (textarea):
[html]
<form>
<textarea name="txtArea" cols="15" rows="10" readonly>
Многострочное поле ввода. Вы не можете вводить или изменять текст с атрибутом readonly
</textarea>
</form>
[/html]
Многострочное текстовое поле делается с помощью элемента <textarea>, и атрибутов:
- name — Имя поля
- cols и rows — Задают ширину и высоту поля (в символах)
- readonly— Запрещает редактирование текста в данном поле
Для того что бы задать текст по умолчанию его необходимо писать между тегами <textarea></textarea>
6) Скрытое текстовое поле (hidden):
[html]
<form>
<input name="email" type="hidden" value="nik@vfram.net">
</form>
[/html]
Данное поле никак не отображатеся, оно скрыто. Предназначено для передачи скрипту информации, которая не отображается на странице.
Скрытое поле делается с помощью элемента <input>, и атрибутов:
- name — Имя поля
- type — Тип элемента <input>, в нашем случае это скрытое поле «hidden»
- value — Текст вписанный по умолчанию, к примеру «nik@vfram.net»
7) Выпадающий список (select):
[html]
<form>
<select name="name_spisok" size = "3" multiple>
<option value="line_1">Строка 1</option>
<option value="line_2">Строка 2</option>
<option value="line_3">Строка 3</option>
</select>
<select name="name_spisok">
<option value="line_1">Строка 1</option>
<option value="line_2">Строка 2</option>
<option value="line_3">Строка 3</option>
</select>
</form>
[/html]
Выпадающий список делается с помощью элемента <select> и задающих содержимое списка <option>.
Атрибуты для <select>:
- name — Имя списка
- size — Высота списка в строках. Если этот атрибут не задавать список будет выпадающим
- multiple — С этим атрибутом можно выбырать несколько элементов в списке (если size > 1)
Атрибуты для <option>:
- value — Значение которое передасться скрипту если выбран данный элемент списка
8) Кнопка сброса формы(Reset):
[html]
<form>
<input type="reset" name="Reset" value="Очистить форму">
</form>
[/html]
Кнопка сброса формы делается с помощью элемента <input>, и атрибутов:
- name — Имя кнопки
- type — Тип элемента <input>, в нашем случае это кнопка сброса формы «reset»
- value — Надпись на кнопке
Предназначена для установления элементов формы в исходное состояние.
9) Кнопка для загрузки файлов (browse):
[html]
<form enctype="multipart/form-data" action="../test.php" method="post">
<input name="my_file" type="file">
</form>
[/html]
Служит для реализации загрузки файлов на сервер. Объект browse начитается с парных тегов
. Начинающий тэг
[html]
<form>
<input type="submit" value="Отправить">
</form>
[/html]
Данная кнопка служит для оптравки данных элементов формы, делается с помощью элемента <input>, и атрибутов:
- type — Тип элемента <input>, в нашем случае это кнопка отправки данных элементов формы «sumbit»
- value — Надпись на кнопке
11) Рамка (fieldset):
[html]
<form>
<fieldset>
<legend>Персональные данные</legend>
Фамилия: Петров Иван Иваныч</fieldset>
</form>
[/html]
Элемент <fieldset> позволяет делать рамку вокруг Вашего текста или полей ввода и прочего, с помощью <legend></legend> задается заголок рамки.
Здравствуйте. А Вы сайты не изготавливаете на заказ? В ты на английском языке? Спасибо.
Правильный адрес gemoglobin@163.com или на саппорт сайта