SimplyBooks
In
Найти
Новинки
Жанры
Контакты
Владимир Вуль
Электронные издания читать онлайн
страница 41
Назад
39
40
41
42
43
Вперед
Для создания отдельных полей внутри контейнера
и
используются тэги
(ввод данных),
(выбор) и
(текстовая область). Первый из этих тэгов употребляется чаще других и обеспечивает многочисленные возможности ввода информации. Так, с его помощью можно осуществить ввод текста различного назначения, создать группу элементов-переключателей, одиночные кнопки для выполнения некоторых стандартных операций (например, сброс введенных данных), поля для установки флажков, поле для ввода имени файла, присоединяемого к форме.</p><p>Тэг <SELECT> используется для организации компактной структуры для выбора одного варианта из нескольких, задаваемых в виде списка прокрутки. А тэг <TEXTAREA> создает внутри формы поле для ввода многострочного текста в виде прямоугольной области, снабженной при необходимости полосами прокрутки. Кратко рассмотрим использование всех этих тэгов.</p><p>Тэг <INPUT> содержит 2 обязательных параметра: TYPE, который задает тип поля ввода и NAME, с помощью которого имя переменной, соответствующей этому полю ввода передается CGI-программе.</p><p>Параметр TYPE может принимать несколько значений. Одно из этих значений TYPE="TEXT". В этом случае в форме создается узкая прямоугольная область (фрагмент строки) для ввода текста. Причем при этом значении параметра TYPE в тэге INPUT могут использоваться 3 дополнительных параметра, а именно: MAXLENGTH (наибольшая длина) = <число>, который определяет максимальное число вводимых символов, SIZE=<число>, задающий количество отображаемых в форме символов, и VALUE, который определяет значение текстового поля по умолчанию.</p><p>Другой вариант текстового поля – это TYPE="PASSWORD" (пароль). В этом случае вводимые символы отображаются в форме звездочками. Однако, реальная безопасность передаваемого пароля не обеспечивается, так как на сервер эта строка передается в незашифрованном виде, то есть открыто.</p><p>Еще одно значение TYPE="FILE", причем в этом случае одновременно с полем для ввода текста (имени локального, то есть размещенного на компьютере клиента, файла) в форме создается кнопка с подписью <b>BROWSE</b> (просмотр). Файл, выбираемый в процессе просмотра (локальный адрес его может быть сразу введен в поле), подсоединяется к содержимому формы при ее пересылке на сервер. Для корректного выполнения этой операции должны быть правильно заданы параметры формы: METHOD="POST" и ENCTYPE="MULTIPART/FORM-DATA". В противном случае вместо содержимого файла на сервер будет передано только его имя.</p><p>Значение TYPE="CHECKBOX" (переключатель) создает поле ввода одного символа–флажка или переключателя типа "включено" либо "выключено". Такие поля могут объединяться в группы путем задания для всех одного имени (NAME). Используется параметр VALUE, который передает на сервер выбранные переключатели. Может присутствовать также параметр CHECKED (установленное значение, обычно по умолчанию), указывающий, что определенное значение соответствующего элемента является выбранным по умолчанию.</p><p>Значение TYPE="RADIO" (селективная кнопка, зависимый переключатель) определяет структуру, подобную многопозиционному переключателю, то есть набор из нескольких выключателей (иначе радиокнопок), один (и только один) из которых включен в любой отрезок времени. Каждый выключатель оформлен в виде круга, внутри которого при его выборе появляется точка. Здесь строковая переменная VALUE передает на сервер значение выбранной кнопки, а параметр CHECKED устанавливает значение по умолчанию.</p><p>Значение параметра TYPE="RESET" (сброс, возврат в исходное состояние) или же "SUBMIT" (запустить, инициализировать выполнение) соответственно отменяет все введенные в форму значения или же пересылает содержимое формы на сервер. В обоих случаях в форме отображаются кнопки с соответствующими надписями. Надписи на кнопках можно русифицировать, задав значение параметра VALUE равным </p></div></div> </section> <div class="pagination pagination_text pagination_text_bot"> <div class="page-nav__item"> <a rel="nofollow" href="/reader/elektronnye-izdaniya-vul/40" class="pagination__item">Назад</a> </div> <div class="page-nav__group"> <input id="change-page" type="number" class="page-nav__control" pattern="\d+" min="1" max="63" data-route="/reader/elektronnye-izdaniya-vul" value="41"> </div> <div class="page-nav__item"> <a rel="nofollow" href="/reader/elektronnye-izdaniya-vul/42" class="pagination__item">Вперед</a> </div> </div> </div> </div> </main> <footer class="footer"> <div class="container footer__inner"> <div class="footer__logo logo logo_footer"> <a class="logo__link" href="/"> <span class="logo__name"> SimplyBooks <span class="logo__dot">In</span> </span> </a> </div> <nav class="footer__nav"> <ul class="footer-menu"> <li class="footer-menu__item"><a href="/new" class="footer-menu__link">Новинки</a></li> <li class="footer-menu__item"><a href="/tag" class="footer-menu__link">Жанры</a></li> <li class="footer-menu__item"><a href="/hello" class="footer-menu__link">Контакты</a></li> </ul> </nav> </div> </footer> <div class="mobile-bar" id="mobileMenu"> <div class="mobile-bar__head"> <div class="mobile-bar__head-inner container"> <div class="mobile-bar__close"> <button class="mobile-bar__close-btn" id="menuClose"></button> </div> </div> </div> <div class="mobile-bar__body"> <div class="mobile-bar__body-inner container"> <ul class="mobile-menu"> <li class="mobile-menu__item"><a href="/new" class="mobile-menu__link">Новинки</a></li> <li class="mobile-menu__item"><a href="/tag" class="mobile-menu__link">Жанры</a></li> <li class="mobile-menu__item"><a href="/hello" class="mobile-menu__link">Контакты</a></li> <li class="mobile-menu__item mobile-search"> <form action="/find" class="form mobile-search__form" method="get"> <div class="form__group form-group_inline"> <input placeholder="Поиск" type="search" value="" name="query" class="form__control mobile-search__input" required="required"> <button type="submit" class="mobile-search__submit search__btn">Найти</button> </div> </form> </li> </ul> </div> </div> </div> <script src="/build/runtime.5332280c.js" defer></script><script src="/build/site.01974e7b.js" defer></script> <!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.webvisor.org/metrika/tag_ww.js", "ym"); ym(97862865, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true }); </script> <!-- /Yandex.Metrika counter --> </div> </body> </html>