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

В уроке про тег <form> мы рассказали про использование форм. В том уроке не затрагивались подробно элементы формы, их атрибуты. В этом уроке будут рассмотрены все возможные элементы формы.

1. HTML тег <input>

Все элементы тега форм создаются с помощью тега <input>.

Синтаксис <input>

<form>
...
<input name="name_field" type="значение" [атрибуты]>
...
</form>

Первое на что стоит обратить внимание, что тег <input> не нужен закрывающий тег. У поля есть два самых важных параметра, которые я вынес в обязательные, это name и type.

• name="name_field" — параметр для задания имени конкретному input. Это нужно, чтобы при дальнейшей обработке данных формы можно было получить значение этого поля.
• type="значение" — отвечает за тип элемента, т.е. что именно будет представлять из себя поле. И здесь есть множество возможных значений:
  • text — текстовое поле. Одно из самых часто используемых значений
  • password — текстовое поле, но с той особенностью, что при вводе символы скрыты
  • radio — радиокнопки
  • checkbox — переключатели
  • submit — кнопка для отправки значений формы (управление передается на адрес указанный в адрес, указанный в action атрибута формы)
  • reset — кнопка для очистки всей формы
  • hidden — скрытое поле
  • button — кнопки для обработки каких-то действий (не путать с submit!)
  • file — для загрузки файлов на сервер
  • image — поле с изображением (используется крайне редко)
• value="значение" — указывается значение по умолчанию

Теперь разберем более подробно каждый элемент

2. Текстовое элемент (<input type="text"...>)

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

<form>
Имя: <input name="name_user" type="text" size="10">
<br/>Пароль: <input name="pass_user" type="password" size="10">
<br/>Комментарий: <input name="comm_user" type="text" size="15" value="Напишите свой комментарий">
</form>

Результат:

Мы использовали атрибут size="10", которое отвечает за размер (ширину) поля. Помимо этого варианта, можно воспользоваться было стилем: style="width:300px".

Обратите внимание, что форма немного перекосилась. Чтобы сделать ее более красивой, я советую записывать форму в таблицу (тег <table>) или в блоки (тег <div>). Улучшим вышеприведенный пример следующим образом:

<form>
<table border="0" cellpadding="5" cellspacing="10">
<tr>
	<td>Имя:</td>
	<td><input name="name_user" type="text" size="10"></td>
</tr>	
<tr>
	<td>Пароль:</td>
	<td><input name="pass_user" type="password" size="10"></td>
</tr>
<tr>
	<td>Комментарий:</td>
	<td><input name="comm_user" type="text" size="25" value="Напишите свой комментарий"></td>
</tr>
</table>
</form>

Преобразуется на странице:

3. Текстовое поле (html <textarea>)

У только что рассмотренного текстового поля input type="text" есть недостаток по ограничению вводимой информации. Для ввода большого числа символов есть специальный тег <textarea></textarea>, в котором можно писать огромные тексты.

<form>
<table border="0" cellpadding="5" cellspacing="10">
<tr>
	<td>Имя:</td>
	<td><input name="name_user" type="text" size="10"></td>
</tr>	
<tr>
	<td>Пароль:</td>
	<td><input name="pass_user" type="password" size="10"></td>
</tr>
<tr>
	<td>Комментарий:</td>
	<td><textarea name="comm_user" cols="20" rows="5"></textarea></td>
</tr>
</table>
</form>

Преобразуется на странице:

Чтобы задать размеры <textarea> есть два атрибута cols="размер по ширине" и rows="размер по высоте". Например, rows="5" означает, что текстовое поле рассчитано на 5 строк.

4. Кнопки (<input type="submit/button"...>)

Html тег <form> позволяет создавать несколько вариантов различных кнопок. Тип type="submit" отвечает за отправку данных. Т.е. при нажатии на эту кнопку произойдет переход на страницу, которая указана в атрибуте формы action="URL".

Также есть тип type="reset", при нажатии на которую очистит все поля формы.

<form action="obrabotka.php">
<table border="0" cellpadding="5" cellspacing="10">
<tr>
	<td>Имя:</td>
	<td><input name="name_user" type="text" size="10"></td>
</tr>	
<tr>
	<td>Пароль:</td>
	<td><input name="pass_user" type="password" size="10"></td>
</tr>
<tr>
	<td colspan="2">
	<input type="submit" value="Отправить">
	<input type="reset" value="Очистить">
	</td>
</tr>
</table>
</form>

Результат:

Также есть тип кнопки type="button", с помощью которой можно просто создавать какие-то произвольные кнопки. Например, для обработки каких-то действий.

5. Радиокнопки (<input type="radio"...>)

Если нужно выбрать одно из предложенных значений — то радиокнопки помогают решать эту задачу. Например

<form>
Какой цвет Вам нравится больше: 
<br/><input name="color" type="radio" value="1">Красный
<br/><input name="color" type="radio" value="2">Зеленый
<br/><input name="color" type="radio" value="3">Синий
<br/><input name="color" type="radio" value="4">Желтый
<br/><input name="color" type="radio" value="5">Пурпурный
</form>

Преобразуется в:

Чтобы задать значение, которое будет стоять по умолчанию, нужно написать дополнительный атрибут checked. Например:

<form>
Выберите число
<br/><input name="number" type="radio" value="1" checked>1
<br/><input name="number" type="radio" value="2" >2
<br/><input name="number" type="radio" value="3" >3
</form>

Преобразуется в:

В поле value записывается значение, которое будет прочитано из поля name.

6. Флажки (<input type="checkbox"...>)

В случае, когда нужно выбрать несколько элементов, можно использовать флажки (type="checkbox"). Синтаксис очень похож на радиокнопки, но только за исключением того, что здесь возможен множественный выбор.

<form>
Какие цвета Вам нравятся
<br/><input name="color" type="checkbox" value="1">Красный
<br/><input name="color" type="checkbox" value="2">Зеленый
<br/><input name="color" type="checkbox" value="3">Синий
<br/><input name="color" type="checkbox" value="4">Желтый
<br/><input name="color" type="checkbox" value="5">Пурпурный
</form>

Преобразуется в:

Как и с радиокнопками можно поставить некоторые галочки по умолчанию с помощью атрибута checked.

7. Загрузка файлов (<input type="file"...>)

Если нужно загрузить какой-то файл на сервер, то это также делается через форму и элемента input с типом file: type="file".

Например

<form action="obrabotka.php">
<table border="0" cellpadding="5" cellspacing="10">
<tr>
	<td><input name="file_user" type="file" size="20" value="Выберите файл"></td>
</tr>	
<tr>
	<td>
	<input type="submit" value="Загрузить">
	<input type="reset" value="Очистить">
	</td>
</tr>
</table>
</form>

Результат:

Как правильно обрабатывать файл, который будет загружен — тема отдельной статьи.

8. Раскрывающиеся списки <select> в form

Раскрывающиеся (выпадающие) списки также часто используются в формах. Как правило сделано это для экономии места, поскольку в радиокнопках все варианты выводятся один за одним, занимая много места. Каждый новый элемент задается с помощью <option>.

Например

<form>
Выберите цвет
<select name="color">
	<option>Красный</option>
	<option>Зеленый</option>
	<option>Синий</option>
	<option>Желтый</option>
	<option>Пурпурный</option>
</select>
</form>

Преобразуется в:

Есть атрибут size, который отвечает за количество выводимых строк. Например, если size=5, то выводится 5 видимых элементов списка. Если атрибут size больше 1 и стоит опция multiple, то список будет раскрытом и будет возможен множественный выбор в списке.

Читайте также:
• Как сделать favicon
• Как скрыть ссылку от поисковиков
• Как сделать красивую подсказку для ссылок
• Как увеличивать изображения (все способы)
• Коды и названия html цветов для сайта
• Коды символов для HTML
• Добавление социальных кнопок на сайт
• Коды и названия html цветов для сайта
• Кнопка html

← Перейти в каталог html уроков и советов