Формы

Ter <form> контейнер для формы размещенной на странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.

У него есть следующие атрибуты:

  1. action - ссылка на файл, который должен будет обработать данные
    формы.

  2. method - метод запроса на сервер, есть два основных значения: GET и
    POST. По умолчанию GET

  3. target - указывает как будут отображены результаты, в текущем окне
    либо новой вкладке.

  4. autocomplete - контролирует автозаполнение форм, имеет
    проблемы с кроссбраузерностью.

GET POST
Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Метод POST посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу GET, поскольку у него установлено ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных, при пересылке файлов и др.

В html5 добавили update и delete. <<

Элементы формы, тег <input>

Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.

<input type="text" name="inp" value=" same value " />

Имеет следующие обязательные атрибуты:

  1. name - имя элемента формы

  2. value - значение, которое будет передано на сервер

  3. type - тип поля

Типы элементов формы, атрибут type

  1. input type="text" - элемент формы, создает текстовое поле для ввода.

  2. input type="password" - элемент формы, который реализует текстовое поле для ввода пароля. При этом все символы внутри заменяются на маркер "точка".

  3. input type="checkbox" - элемент формы, который реализует квадратное поле с галочкой. Имеет два состояния - выбранный и не выбранный.

  4. input type="radio" - элемент формы, который реализует radio-переключатель. Имеет два состояния - выбранный и не выбранный.

  5. input type="email" - тип ввода данных почтового адреса

  6. input type="url" - тип ввода данных url

  7. input type="date" - тип ввода данных даты

  8. input type="time" - тип ввода данных времени

  9. input type="datetime" - тип ввода данных объединяет предыдущие 2-а в один

  10. input type="month" - тип ввода данных месяца

  11. input type="week" - тип ввода данных номера недели

  12. input type="number" - тип ввода данных числа(но не телефонных номеров)

  13. input type="range" - тип ввода данных range отображается в виде ползунка

  14. input type="search" - тип ввода данных search. Разница с "text" чисто стилистическая. Так же в Safary есть уникальный атрибут добавляющий историю недавних запросов.

  15. input type="tel" - используется для ввода телефонного номера.

  16. input type="color" - позволяет пользователю ввести значение цвета выбрав из палитры.

Создание кнопок на форме

Есть несколько основных способов реализовать кнопки в разметке.

Первый - использовать элементы input с особенным значением атрибута type (submit, reset):

  1. type="submit" - элемент формы, который реализует кнопку отправки данных на сервер. При нажатии формируется запрос и отправляется файлу, указанному в атрибуте action^"".

  2. type="reset" - элемент формы, который реализует кнопку очистки полей формы. При этом поля не просто очищаются от внесенных данных, но и восстанавливают значения по умолчанию.

Второй - создание элемента input со значением атрибута type = button. При этом созданная кнопка может реализовать любой функционал, указанный в ее дополнительных атрибутах обработчиков событий.

<inputtype="button" name="button" value="Do" onclick="ToDo()" />

Выпадающий список, тег <select>...</select>

Тег select- тег, контейнер, содержащий в себе описание выпадающего списка. Каждый элемент списка описан внутри с помощью отдельного тега option. Содержимое тега option будет отображено пользователям в качестве элементов выпадающего списка, но на сервер будут отправлены именно значения атрибутов value и name.

<select name="select">
    <option value="fl">TeKCTl</option> 
    <optionvalue="f2">TeKCT2</option> 
    <option value="f3">TeKCT3</option> 
    <optionvalue="f4">TeKCT4</option> 
    <option value="f5">TeKCT5</option>
</select>

Если Вам необходимо реализовать список с многозначным выбором, то следует указать атрибут

multiple="multiple"

Различные типы тега <input>

Также есть еще несколько особенных типов элементов input:

1- type = "hidden" - элемент формы, который не отображается пользователю, при этом передается на сервер при отправке. Используется для передачи параметров, которые не должны быть видны либо изменяться пользователем.

  1. type = "file" - элемент формы, предназначенный для создания поля выбора загрузки файла. Реализован в каждом браузере по-разному.

Группировка элементов формы, тег <fieldset>

Тег <fieldset> предназначен для группирования элементов формы. Такая
группировка облегчает работу с формами, содержащими большое число
данных.

Тег <legend> применяется для создания заголовка группы элементов
формы, которая определяется с помощью тега <fieldset>.

<fieldset>
    <legend>Группировка элементов</legend>
    ...
    Любое содержимое формы
    ...
</fieldset>

Тег <textarea>...</textarea>

<textarea> - тег, предназначенный для создания многострочного поля для ввода. Имеет специальные атрибуты rows cols, которые соответственно указывают его высоту и ширину.

<textarea cols="100" rows="4">content</textarea>

При этом, его реализация в разных браузерах тоже отличается. В некоторых, он приобретает возможность изменять размер, расширяться, в некоторых -отличается визуальным видом.

Устаревшие атрибуты элементов формы

В связи с развитием HTML некоторые элементы, а также атрибуты устарели и потеряли свою значимость, но так как сайты не «совершенствуются» самостоятельно, они еще воспринимаются в некоторых браузерах.

Ниже предоставлен список, некоторых из них:

  1. Align - атрибут, отвечающий за выравнивание, работает не во всех полях для ввода.

  2. Атрибуты alt и title отвечают за значение, которое пользователю браузер будет выдавать как подсказку при наведении на элемент, с текстом, написанном в этих атрибутах.

  3. Атрибут border - устанавливает рамку вокруг элементов, в текущих версиях браузеров не работает.

Атрибут checked

Атрибут checked - отвечает за состояние элемента, выбран он или нет.

Используется для двух типов элемента input, при этом необходимо помнить об особенностях их группировки:

  1. Checkbox - при группировке элементов с помощью одинакового значения атрибута name, в активное состояние могут быть установлены одновременно несколько элементов группы.

  2. Radio - при группировке элементов с помощью одинакового значения
    атрибута name, в активное состояние может быть установлен одновременно только один элемент группы.

Атрибут selected

Атрибут selected - атрибут, который устанавливает определенный элемент выпадающего списка, как значение по умолчанию.

<select name="select">
    <option value="film001n>2 smoking guns</option>
    <option value="film002">Bad Boys</option> 
    <option value="film003">Revenge</option>
    <option value="film004" selected="selected">Crow</option> 
    <option value="film005">Dead Man Walking</option> 
    <option value="film006">Wrong thing</option>
</select>

Атрибуты disabled и readonly

Атрибут disabled - указывает на то, что элемент формы должен отображаться пользователю не активным и быть не восприимчивым к изменениям пользователя.

Атрибут readonly позволяет сделать элемент не восприимчивым к изменениям пользователя.

Отличие между ними зависит от браузера, а точнее от реализации элементов с данными атрибутами.

Атрибуты size и maxlength

Для управления размерами текстовых полей и установкой максимально допустимых значений в разметке предусмотрены специальные атрибуты:

  1. Атрибут size используется для указания размеров текстового поля для ввода.

  2. Атрибут maxlength используется для того, чтобы задать максимально допустимое значение для текстового поля.

<inputtype="text" name="first_name" value="Mickey" size="120" maxlength="100" />

Новые атрибуты элемента <input>

  1. autocomplite - по умолчанию поле ввода наследует состояние автозаполнения формы к которой относится. Автозаполнение для форм включено по умолчанию.

  2. min, max - атрибуты ограничивают диапазон вводимых значений

  3. multiple - в html5 не нов, но позволяет загружать несколько файлов input type=file

  4. pattern - позволяет создавать регулярные выражения

  5. step - отвечает за степень подробности вводимых данных

  6. list - служит для связывания с элементом <datalist> в котором есть заготовленные для выбора элементы и в случае отсутствия подходящего позволяет ввести и отправить свой вариант/информацию.

  7. autofocus - курсор помещается в поле при загрузке страницы

  8. placeholder - подсказка, для какой информации предназначено поле

  9. required - поле должно быть проверенно и заполнено иначе информация не будет отправлена и браузер вернет ошибку

  10. form - атрибут связывающий эл-ты(вынесенные из тега <form>) с формой.

///

Полезные ссылки и материалы к ДЗ

http://html5pattern.com/

<form action="https://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php" method="post" enctype="multipart/form-data" >
...

<script src="https://www.cse.ust.hk/~rossiter/dating_web_site.js"></script>

///

/* Placeholder reset style */
::-webkit-input-placeholder { /* WebKit browsers */
    color: #5c5e64;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #5c5e64;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #5c5e64;
    opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #5c5e64;
}

///

results matching ""

    No results matching ""