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

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


Оглавление

1. HTML тег <input>

2. Текстовое элемент (input text)

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

4. Кнопки (input submit)

5. Радиокнопки (input radio)

6. Флажки (input checkbox)

7. Загрузка файлов (input file)

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

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>

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


Выберите число

1

2

3

В поле 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 уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.