Формы в HTML

  • Открытие ооо новогиреево диспетчерские службы гбу жилищник района новогиреево. .

В этой статье я покажу как в HTML можно создать форму с различными элементами (поля ввода, кнопки, переключатели и т.п.)
HTML форма обязательно начинается тегом <form> и заканчивается закрывающим тегом </form>.

Начинающий тег <form> имеет 2 атрибута:

  1. Action — задает адрес сценария, которому будут переданы данные формы.
  2. 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>, и атрибутов:

  1. name — Имя флажка
  2. type — Тип элемента <input>, в нашем случае это флажок «checkbox»
  3. value — Подпись переключателя, например «Синий»
  4. 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>, и атрибутов:

  1. name — Имя переключателя
  2. type — Тип элемента <input>, в нашем случае это переключатель «radio»
  3. value — Подпись переключателя, например «Синий»
  4. checked — Необязательный параметр, задает выбран ли данный элемент по умолчанию

 

3) Текстровое поле (text):


[html]
<form>
<input type="text" name="familiya" value="Текст по умолчанию" size="30" maxlength="50" />
</form>
[/html]

Текстовое поле делается с помощью элемента <input>, и атрибутов:

  1. name — Имя поля
  2. type — Тип элемента <input>, в нашем случае это текстовое поле «text»
  3. value — Текст вписанный по умолчанию, к примеру «Поле для фамилии»
  4. size — Ширина поля ввода в символах
  5. maxlength — максимальное количество символов которое можно ввести в текстовое поле

Три последних атрибута можно не использовать.

 

4) Поле для ввода пароля (password):


[html]
<form>
<input type="password" name="passw" size="15" maxlength="10" />
</form>
[/html]

Поле аналогично текстовому, только специализировано для ввода пароля (скрывает все вводимые символы). Делается с помощью элемента <input>, и атрибутов:

  1. name — Имя поля
  2. type — Тип элемента <input>, в нашем случае это поле для пароля «password»
  3. size — Ширина поля ввода в символах
  4. maxlength — максимальное количество символов которое можно ввести в текстовое поле

Два последних атрибута можно не использовать.

 

5) Многострочное поле ввода текста (textarea):


[html]
<form>
<textarea name="txtArea" cols="15" rows="10" readonly>
Многострочное поле ввода. Вы не можете вводить или изменять текст с атрибутом readonly
</textarea>
</form>
[/html]

Многострочное текстовое поле делается с помощью элемента <textarea>, и атрибутов:

  1. name — Имя поля
  2. cols и rows — Задают ширину и высоту поля (в символах)
  3. readonly— Запрещает редактирование текста в данном поле

Для того что бы задать текст по умолчанию его необходимо писать между тегами <textarea></textarea>

 

6) Скрытое текстовое поле (hidden):

[html]
<form>
<input name="email" type="hidden" value="nik@vfram.net">
</form>
[/html]

Данное поле никак не отображатеся, оно скрыто. Предназначено для передачи скрипту информации, которая не отображается на странице.
Скрытое поле делается с помощью элемента <input>, и атрибутов:

  1. name — Имя поля
  2. type — Тип элемента <input>, в нашем случае это скрытое поле «hidden»
  3. 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>:

  1. name — Имя списка
  2. size — Высота списка в строках. Если этот атрибут не задавать список будет выпадающим
  3. multiple — С этим атрибутом можно выбырать несколько элементов в списке (если size > 1)

Атрибуты для <option>:

  1. value — Значение которое передасться скрипту если выбран данный элемент списка

 

8) Кнопка сброса формы(Reset):


[html]
<form>
<input type="reset" name="Reset" value="Очистить форму">
</form>
[/html]

Кнопка сброса формы делается с помощью элемента <input>, и атрибутов:

  1. name — Имя кнопки
  2. type — Тип элемента <input>, в нашем случае это кнопка сброса формы «reset»
  3. value — Надпись на кнопке

Предназначена для установления элементов формы в исходное состояние.

 

9) Кнопка для загрузки файлов (browse):


[html]
<form enctype="multipart/form-data" action="../test.php" method="post">
<input name="my_file" type="file">
</form>
[/html]

Служит для реализации загрузки файлов на сервер. Объект browse начитается с парных тегов

. Начинающий тэг

содержит необходимый атрибут enctype. Атрибут enctype принимает значение multipart/form-data, который извещает сервер о том, что вместе с обычной информацией посылается и файл.
Атрибуты элемента <input>:

  1. name — Имя кнопки
  2. type — Тип элемента <input>, в нашем случае это кнопка выгрузки файлов «file»

 

10) Кнопка отправки формы (submit):


[html]
<form>
<input type="submit" value="Отправить">
</form>
[/html]

Данная кнопка служит для оптравки данных элементов формы, делается с помощью элемента <input>, и атрибутов:

  1. type — Тип элемента <input>, в нашем случае это кнопка отправки данных элементов формы «sumbit»
  2. value — Надпись на кнопке

 

11) Рамка (fieldset):

Персональные данные

Фамилия: Петров Иван Иваныч

[html]
<form>
<fieldset>
<legend>Персональные данные</legend>
Фамилия: Петров Иван Иваныч</fieldset>
</form>
[/html]

Элемент <fieldset> позволяет делать рамку вокруг Вашего текста или полей ввода и прочего, с помощью <legend></legend> задается заголок рамки.

VN:F [1.9.20_1166]
Пожалуйста оцените статью, мне очень важно Ваше мнение!
Rating: 9.3/10 (3 votes cast)
Формы в HTML, 9.3 out of 10 based on 3 ratings
Поделиться ссылкой с друзьями:

Comments

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

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