Форма

{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Весь интерактив — поля ввода, флажки, переключатели, раскрывающиеся списки, кнопки — это веб-формы и их элементы. В форме вы оставляете комментарий, с помощью формы регистрируетесь, через форму авторизуетесь, пользуетесь формой поиска, голосуете в опросах, загружаете файлы, оформляете подписки — всё это вы делаете с помощью веб-форм.","type":"unstyled","key":"bmq9k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внутреннее устройство","type":"header-two","key":"8aqqd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фактически форма состоит из двух частей: визуального оформления и скрипта, который обрабатывает введённые данные. Чтобы написать скрипт, нужно владеть одним из языков программирования. Мы здесь их изучением не занимаемся, поэтому будем разбирать HTML-составляющую — учиться создавать интерфейс формы, предполагая, что где-то у нас уже есть обрабатывающий её скрипт.","type":"unstyled","key":"3m4oa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":44,"style":"BOLD"}],"text":"HTML-форма создаётся с помощью парного тега

, внутри которого располагаются теги её элементов.","type":"unstyled","key":"fr49k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теги","type":"header-two","key":"bejn0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Перед тем, как показывать примеры, пройдёмся по тегам.","type":"unstyled","key":"avcbl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"},{"length":6,"offset":65,"style":"BOLD"},{"length":7,"offset":105,"style":"BOLD"}],"text":" . Создаёт форму. Если сравнивать форму с таблицей, то тег выполняет ту же роль, что и тег . К нему прилагаются следующие атрибуты.","type":"unstyled","key":"c4goh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"action . Адрес скрипта или документа, который обрабатывает данные формы. В качестве значения указывается URL.","type":"unordered-list-item","key":"foish"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"method . Метод передачи данных обработчику. Можно указать GET (по умолчанию) или POST. GET подразумевает передачу данных в виде части URL. Возможно, вы видели в адресах что-то вроде ?id=225. Это оно и есть. Метод POST работает по-другому, а потому передаваемые данные от пользователя скрыты. Он более безопасен, позволяет передавать больше информации, в том числе и файлы. Но всё это больше касается программирования, нежели HTML-разметки.","type":"unordered-list-item","key":"ftm8d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"accept-charset . Устанавливает кодировку.","type":"unordered-list-item","key":"6ik4o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"autocomplete . Включает (on) или отключает (off) автозаполнение форм, когда браузер сам подсказывает вам, что вводить, основываясь на том, что вы набирали в прошлый раз. Отключать функцию имеет смысл для конфиденциальных форм, чтобы обозреватель ненароком не показал важных данных.","type":"unordered-list-item","key":"dl6jo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"name. Имя формы.","type":"unordered-list-item","key":"bdr9i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Есть и ещё атрибуты, но используются они крайне редко.","type":"unstyled","key":"268m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":" . Интересный тег, с помощью которого можно создать любой элемент ввода, какой именно — задаётся атрибутом type. Строго говоря, этот тег можно использовать и вне формы, но тогда вы не сможете указать адрес обработчика, и элемент страницы будет нефункциональным.","type":"unstyled","key":"fcf9m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"},{"length":7,"offset":28,"style":"BOLD"}],"text":"type . Главный атрибут тега , определяющий, как уже говорилось, тип элемента ввода. Значений у него так много, и они так важны, что хватило на целую таблицу (см. ниже).","type":"unordered-list-item","key":"464d3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Значение","type":"unstyled","key":"bbqh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Описание","type":"unstyled","key":"5v0i8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"button","type":"unstyled","key":"8eve"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кнопка","type":"unstyled","key":"avkf1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"checkbox","type":"unstyled","key":"9sjfk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Флажки. С их помощью вы можете выбрать сразу несколько вариантов","type":"unstyled","key":"astvd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"file","type":"unstyled","key":"4g91a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кнопка выбора файла","type":"unstyled","key":"5f8m7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"hidden","type":"unstyled","key":"e23nj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Скрытое поле, в браузере не отображается","type":"unstyled","key":"7ca5f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"image","type":"unstyled","key":"2365f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кнопка с картинкой","type":"unstyled","key":"chee9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"password","type":"unstyled","key":"7bqud"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поле для ввода пароля. Обычное текстовое поле, но вводимые символы скрываются за звёздочками (*)","type":"unstyled","key":"agfdi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"radio","type":"unstyled","key":"feib4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переключатели. Почти флажки, но с их помощью можно выбрать только один из предложенных вариантов","type":"unstyled","key":"61jdm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"reset","type":"unstyled","key":"scb9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кнопка сброса данных формы к первоначальным значениям","type":"unstyled","key":"7mbvm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"submit","type":"unstyled","key":"9a7cn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":83,"style":"BOLD"}],"text":"Кнопка отправки данных на сервер. Обычно вы нажимаете их, чтобы подтвердить ввод — Сохранить, Применить, ОК","type":"unstyled","key":"2rh3t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"text","type":"unstyled","key":"f8ed8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Текстовое поле","type":"unstyled","key":"fb4qe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Множество новых значений появилось в HTML5, но они, к сожалению, пока (июнь 2016) поддерживаются только частично.","type":"unstyled","key":"4vc9c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"autofocus . Фокус ввода будет по умолчанию устанавливаться на том элементе, для которого указан этот атрибут.","type":"unordered-list-item","key":"cnm6m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"checked . Установить флажок или радиокнопку по умолчанию.","type":"unordered-list-item","key":"27guv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"pattern . С помощью этого атрибута можно заставить пользователя ввести данные в определённом формате. Например, ввести только одну цифру от 0 до 9 или только буквы латинского алфавита (должно быть знакомо). Пока поле не будет заполнено правильно, данные формы не будут переданы на обработку.","type":"unordered-list-item","key":"folh2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"placeholder . Задаёт текст-подсказку.","type":"unordered-list-item","key":"ar9ua"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"},{"length":8,"offset":176,"style":"BOLD"}],"text":" .","type":"unordered-list-item","key":"29dsg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"value . Значение пункта списка для обработки скриптом.","type":"unordered-list-item","key":"a1gvj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"selected . Пункт с этим атрибутом по умолчанию будет выделен, как будто пользователь выбрал именно его.","type":"unordered-list-item","key":"65skb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"},{"length":8,"offset":62,"style":"BOLD"}],"text":" . Контейнер позволяет группировать элементы списка