Создание формы с помощью html. HTML формы. Многострочное текстовое поле

Пример 1. Форма html с кнопками

Это будут кнопки:
Кнопка один
Кнопка два
Кнопка три
А это будет текстовое поле. Например сюда можно вводить логин

А это будет большое текстовое поле. Например сюда можно ввести информацию о себе

После всего перечисленного будет кнопка ОК

После нажатия кнопки ОК, страница просто обновится, т.к. мы не прописали параметр action

Теперь рассмотрим подробно все атрибуты тега .

Атрибуты и свойства тега

1. Атрибут accept-charset="Кодировка" - определяет кодировку, в которой сервер может принимать и обрабатывать данные формы. Может принимать различные значения, например, CP1251, UTF-8 и т.п.

2. Атрибут action="URL" - адрес скрипта, который обрабатывает передаваемые данные от формы. Если оставить это значение пустым, то данные будут обрабатываться в этом же документе, где расположена форма.

3. Атрибут autocomplete="on/off" - задает или отключает автозаполнение формы. Может принимать два значения:

• on - включить автозаполнение;
• off - выключить автозаполнение;

4. Атрибут enctype="параметр" - задает способ кодирования данных. Может принимать следующие значения:

• application/x-www-form-urlencoded - вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями
• multipart/form-data - данные не кодируются
• text/plain - пробелы заменяются знаком +, буквы и другие символы не кодируются.

5. Атрибут method="POST/GET" - задает метод отправки. Может принимать два значения:

• GET - передача данных в адресной строке (есть ограничение по объёму отправки данных)
• POST - посылает на сервер данные в запросе браузера (может отправить большое количество данных, т.к. нету ограничения объёма)

6. Атрибут name="имя" - задает имя формы. Чаще всего используется в случае наличия множества форм для того, чтобы можно было обратиться к конкретной форме через скрипт.

7. Атрибут novalidate - отменяет встроенную проверку данных формы на корректность ввода.

8. Атрибут target="параметр" - имя окна или фрейма, куда обработчик будет загружать возвращаемый результат. Может принимать следующие значения:

• _blank - загружает страницу в новое окно браузера
• _self - загружает страницу в текущее окно
• _parent - загружает страницу во фрейм-родитель
• _top - отменяет все фреймы и загружает страницу в полном окне браузера

Уважаемый читатель, теперь Вы узнали гораздо больше о html теге form. Теперь советую перейти к следующему уроку.

В процессе навигации по сайтам пользователь, в основном, только щёлкает по ссылкам чтобы перемещаться по веб-страницам.

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

• регистрацию и вход на сайтах;
• ввод личной информации (имя, адрес, данные кредитной карты и др.);
• фильтрацию контента (с помощью выпадающих списков, флажков и др.);
• выполнение поиска;
• загрузку файлов.

Чтобы приспособиться к этим потребностям, HTML предлагает интерактивные элементы управления формы:

• текстовые поля (для одной или нескольких строк);
• переключатели;
• флажки;
• выпадающие списки;
• виджеты для загрузки;
• кнопки отправки.

Эти элементы управления задействуют разные теги HTML, но большинство из них использует тег . Поскольку это самозакрывающий элемент, тип поля определяется его атрибутом type :

Элемент

является блочным элементом, который определяет интерактивную часть веб-страницы. Как результат, все элементы управления (такие как , или <button> ) должны находиться <i>внутри </i> элемента <form> .</p><p>Два <a href="/kak-sozdat-iframe-stranicu-kak-vstavit-v-html-iframe-primer-ispolzovaniya-atributy-i-svoistva-t.html">атрибута HTML</a> <b>необходимы </b>:</p><ul><li>action содержит адрес, который определяет, <i>куда </i> будет отправлена информация формы;</li><li>method может быть либо GET, либо POST и определяет, <i>как </i> будет отправлена информация формы.</li> </ul><p>Как правило, информация формы посылается на <b>сервер </b>. <i>Как </i> эти данные затем будут обработаны выходит за рамки данного руководства.</p><p>Подумайте о форме как о наборе элементов управления, которые работают вместе, чтобы выполнить <b>одну </b> операцию. Если вы написали форму входа на сайт, у вас могло быть <b>три </b> поля:</p><ul><li>поле для <a href="/kak-otpravit-pozdravitelnuyu-otkrytku-po-elektronnoi-pochte.html">электронной почты</a> <input type="email"> </li><li>поле для пароля <input type="password"> </li><li>кнопка отправки <input type="submit"> </li> </ul><p>Эти три элемента HTML будут заключены внутри одной формы <span><form action="/login" method="POST"> </span>.</p><p>Вы можете аналогично добавить форму регистрации на той же HTML-странице, в отдельном элементе <form> .</p><h2>Текстовые поля</h2><p>Почти всем формам требуется <b>текстовый </b> ввод от пользователей, чтобы ввести своё имя, адрес электронной почты, пароль, адрес и др. Текстовые поля формы приходят в разных вариантах.</p><p>Хотя эти поля очень похожи и позволяют пользователям вводить текст любого рода (даже неправильный), их тип обеспечивает специфическую <b>семантику </b> для ввода, определяя, какую информацию поле <b>должно </b> содержать.</p><p>Браузеры могут впоследствии немного изменить интерфейс элемента управления, чтобы повысить <i>интерактивность </i> или подсказать, какое содержимое ожидается.</p><p>К примеру, поле для пароля показывает точки вместо символов. А поле для чисел позволяет увеличивать/уменьшать значение с помощью клавиш вверх и вниз.</p><h2>placeholder</h2><p>Текстовые поля могут отображать <b>подсказывающий </b> текст, который исчезнет, как только будет введён некоторый текст.</p><p> <input type="text" placeholder="Введите своё имя"> </p><p>Если вы начинаете набирать что-то, то увидите как текст «Введите своё имя» исчезнет.</p><h2><label></h2><p>Так как элементы формы сами по себе не очень описательны, им, как правило, предшествует текстовая <b>метка </b>.</p><p> <label>Email</label> <input type="email"> </p><p>В то время как placeholder уже обеспечивает некоторую подсказку о том, какое ожидается содержание, метки имеют преимущество оставаясь видимыми в любое время и могут использоваться наряду с другими типами элементов формы, таких как флажки или переключатели.</p><p>Хотя вы можете применять короткие абзацы для описания элементов формы, использование <label> является семантически более правильным, потому что они существуют только в формах. <label> также может быть связан с определённым элементом формы с помощью атрибута for , <a href="/kakovy-dopustimye-znacheniya-dlya-atributa-id-v-html-identifikatory-gde-teg-id-sootvetstvuyushchego-znachen.html">соответствующему значению</a> id у поля.</p><p> <label for="first_name">Имя</label> <input id="first_name" type="text"> </p><p>При щелчке по метке фокус переходит к текстовому полю и помещает курсор внутрь него. Пока эта связка кажется бесполезной, но пригодится с флажками и переключателями.</p><h2>Флажки</h2><p><b>Флажки </b> - это элементы формы, которые имеют только два состояния: включено или выключено. Они в основном позволяют пользователю сказать: «Да» или «Нет» для чего-то.</p><p> <input type="checkbox"> Запомнить меня </p><p>Поскольку может оказаться сложно щёлкнуть по небольшому флажку, рекомендуется поместить флажок и его описание внутрь <label> .</p><p> <label> <input type="checkbox"> Я согласен с условиями </label> </p><p>Вы можете щёлкнуть по тексту «Я согласен с условиями» чтобы переключить флажок.</p><p>По умолчанию флажок выключен. Вы можете пометить его включенным, просто используя атрибут checked .</p><p> <label> <input type="checkbox" checked> Использовать мой платёжный адрес </label> </p><h2>Переключатели</h2><p>Вы можете предоставить пользователю <b>список вариантов </b> на выбор с помощью переключателей.</p><p>Для работы этого элемента формы, ваш HTML-код должен <b>сгруппировать </b> список переключателей вместе. Это достигается с помощью одного и того же значения для атрибута name:</p><p> <label>Семейное положение</label> <label> <input type="radio" name="status"> Холост </label> <label> <input type="radio" name="status"> Женат </label> <label> <input type="radio" name="status"> Разведён </label> <label> <input type="radio" name="status"> Вдовец </label> </p><p>Поскольку все переключатели используют одинаковое значение атрибута name (в данном случае значение status ), выбор одного из вариантов отменит все остальные. Переключатели являются <b>взаимоисключающими </b>.</p><h3>Разница между переключателями и флажками</h3><p>Хотя флажок существует <b>сам по себе </b>, переключатели могут появляться только в виде <b>списка </b> (что означает, по меньшей мере два варианта).</p><p>Кроме того, щелчок по флажку является <b>произвольным </b>, в то время как выбор одного из переключателей является <b>обязательным </b>. Вот почему невозможно выключить переключатель, если выбрать ближайший вариант. В конце концов, всегда выбирается один из переключателей.</p><h2>Выпадающие меню</h2><p>Если количество вариантов для выбора занимает слишком много места, вы можете воспользоваться выпадающими меню <select> .</p><p>Они работают подобно переключателям, отличается только компоновка.</p><p> <select> <option>Январь</option> <option>Февраль</option> <option>Март</option> <option>Апрель</option> <option>Май</option> <option>Июнь</option> <option>Июль</option> <option>Август</option> <option>Сентябрь</option> <option>Октябрь</option> <option>Ноябрь</option> <option>Декабрь</option> </select> </p><h3>Множественный выбор из выпадающего меню</h3><p>Если добавить атрибут multiple , вы можете предоставить возможность выбрать несколько вариантов.</p><p> <label>Какими браузерами вы пользуетесь?</label> <select multiple> <option><a href="/kak-zablokirovat-vsplyvayushchie-reklamnye-okna-v-hrome-upravlenie-vsplyvayushchimi.html">Google Chrome</a></option> <option><a href="/chtoby-ustanovit-internet-explorer-11-neobhodima-sistema-pochemu-ne-ustanavlivaetsya-internet-explore.html">Internet Explorer</a></option> <option><a href="/kak-pomenyat-domashnyuyu-stranicu-v-mozilla-firefox-nastroika.html">Mozilla Firefox</a></option> <option>Opera</option> <option>Safari</option> </select> </p><p>Выберите несколько вариантов посредством удержания Ctrl (или ⌘) и щелчка. Это может быть хорошей альтернативой применению несколько флажков в строке.</p><h2>Пример: полная форма регистрации</h2> <form action="/signup" method="POST"> <p> <label>Обращение</label> <label> <input type="radio" name="title" value="mr"> Г-н </label> <label> <input type="radio" name="title" value="mrs"> Г-жа </label> </p> <p> <label>Имя</label> <input type="text" name="first_name"> </p> <p> <label>Фамилия</label> <input type="text" name="last_name"> </p> <p> <label>Email</label> <input type="email" name="email"> </p> <p> <label>Телефон</label> <input type="tel" name="phone"> </p> <p> <label>Пароль</label> <input type="password" name="password"> </p> <p> <label>Подтвердите пароль</label> <input type="password" name="password_confirm"> </p> <p> <label>Страна</label> <select name="country"> <option>Канада</option> <option>Франция</option> <option>Германия</option> <option>Италия</option> <option>Япония</option> <option>Россия</option> <option>Великобритания</option> <option>США</option> </select> </p> <p> <label> <input type="checkbox" name="terms"> Я согласен с условиями использования </label> </p> <p> <button> Зарегистрироваться </button> </p> </form> <p>Также доступны и другие элементы форм, но мы рассмотрели наиболее используемые.</p> <p>Сейчас практически ни один сайт не обходится без элементов интерфейса вроде полей ввода текста, кнопок, переключателей и флажков. Они необходимы для взаимодействия с пользователем, чтобы он мог искать на сайте по ключевым словам, писать комментарии, отвечать на опросы, прикреплять фотографии и делать много других подобных вещей. Именно формы и обеспечивают получение данных от пользователя и передачу их на сервер, где они уже подвергаются анализу и обработке. Так что если вы планируете сделать нечто подобное на сайте, без форм не удастся это реализовать.</p> <p>Сама форма создаётся с помощью тега <form> , внутри которой могут быть любые необходимые теги, и характеризуется следующими необязательными параметрами:</p> <ol><li>адрес программы на веб-сервере, которая будет обрабатывать содержимое данных формы;</li> <li>элементами формы, которые представляют собой стандартные поля для ввода информации пользователем;</li> <li>кнопку отправки данных на сервер.</li> </ol><p>Допускается использовать несколько форм на странице, но они не должны вкладываться одна в другую (пример 1).</p> <p>Пример 1. Ошибочное использование форм</p> <p>HTML5 IE Cr Op Sa Fx </p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Формы</title> </head> <body> <form action="handler.php"> <p><input name="a"> <input type="submit"></p> <form action="handler.php"> <p><input name="b"> <input type="submit"></p> </form> </form> </body> </html> </p><p>Перед отправкой данных браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега <input> или другим тегом допустимым в форме, а значение введено пользователем или установлено в поле формы по умолчанию. После нажатия пользователем кнопки Submit, происходит вызов обработчика формы, который получает введенную в форме информацию, а дальше делает с ней то, что предполагает разработчик. В качестве обработчика формы обычно выступает программа, заданная атрибутом action тега <form> . Программа может быть написана на любом серверном языке вроде PHP, Python, C# и др.</p> <p>Часто бывает, что текущая страница написанная, допустим, на PHP, сама является обработчиком формы, в таком случае можно указать пустое значение атрибута action или вообще его опустить. В простейшем случае тег <form> не содержит никаких атрибутов и представлен в примере 2.</p> <p>Пример 2. Простая форма</p> <p>HTML5 IE Cr Op Sa Fx </p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Формы</title> </head> <body> <form> <p><input name="a"> <input type="submit"></p> </form> </body> </html> </p><p>В качестве значения атрибута action можно указать также адрес электронной почты, начиная его с <a href="/uznat-klyuchevye-frazy-konkurentov-v-yandeks-direkt-analiz-reklamy.html">ключевого слова</a> mailto: . При отправке формы будет запущена <a href="/programma-elektronnoi-pochty-the-bat-nastroika-pochtovoi-programmy-the.html">почтовая программа</a>, установленная по умолчанию. В целях безопасности в браузере задано, что отправить незаметно информацию, введенную в форме, по почте невозможно. Для корректной интерпретации данных используйте атрибут enctype со значением text/plain в теге <form> (пример 3).</p> <p>Пример 3. Отправка формы по почте</p> <p>HTML5 IE Cr Op Sa Fx </p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Формы</title> </head> <body> <form action="mailto:vlad@сайт" enctype="text/plain"> <p><input name="a"> <input type="submit"></p> </form> </body> </html> </p><p>Браузеры неоднозначно работают с таким кодом. Firefox предложит список подходящих приложений для отправки почты (рис. 1), Internet Explorer выведет предупреждение (рис. 2) и попытается запустить программу, сопоставленную с почтой, Opera подобно Firefox предложит список вариантов подходящих для отправки почты (рис. 3).</p> <p>Рис. 1. Запуск приложения в Firefox</p> <p><img src='https://i2.wp.com/htmlbook.ru/files/images/form/02.png' width="100%" loading=lazy></p> <p>Рис. 2. Предупреждение Internet Explorer</p> <p><img src='https://i0.wp.com/htmlbook.ru/files/images/form/03.png' height="223" width="384" loading=lazy></p> <p>Рис. 3. Выбор программы в Opera</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> </div> </article> </div> </div> <div id="secondary"> <aside id="text-19" class="widget widget_text clearfix"> <h3 class="widget-title"><span>Реклама</span></h3> <div class="textwidget"> <p> </p> </div> </aside> <aside id="recent-posts-7" class="widget widget_recent_entries clearfix"> <h3 class="widget-title"><span>Новости</span></h3> <ul> <li> <a href="/mozhno-li-dobavit-v-vatsap-2-nomera-kak-sozdat-vtoroi-akkaunt-v-whatsapp.html">Как создать второй аккаунт в WhatsApp на одном смартфоне</a> </li> <li> <a href="/kak-skachat-i-ispolzovat-mobilnoe-prilozhenie-moi-bilain-prilozhenie-moi.html">Как скачать и использовать мобильное приложение «Мой билайн</a> </li> <li> <a href="/prilozhenie-google-planeta-zemlya-besplatnye-programmy-dlya-windows-skachat.html">Бесплатные программы для Windows скачать бесплатно</a> </li> <li> <a href="/el-pochta-voiti-na-moyu-stranicu-email-pochta-registraciya-vybor.html">Емайл почта — регистрация, выбор Эмейл-адреса, как войти в свой ящик и как просмотреть входящие письма на вашей странице</a> </li> <li> <a href="/kak-proverit-sostoyanie-ozu-na-kompyutere-testirovanie-operativnoi-pamyati.html">Тестирование оперативной памяти</a> </li> <li> <a href="/pochemu-vsegda-ispolzuetsya-100-procentov-diska-10-zhestkii-disk-polnostyu.html">Жесткий диск полностью загружен: причины и устранение</a> </li> <li> <a href="/instrumenty-komandnoi-stroki-dlya-veb-razrabotchika-curl-setopt--.html">Curl_setopt - Устанавливает параметр для сеанса CURL Curl linux примеры</a> </li> <li> <a href="/oracle-isklyucheniya-isklyucheniya-oshibki-v-oracle-gruppy-oshibok.html">Исключения (ошибки) в Oracle</a> </li> <li> <a href="/kak-otobrazhat-yazykovuyu-panel-na-vindovs-7-kak-dobavit-yazyk-na-panel.html">Как добавить язык на панель задач</a> </li> <li> <a href="/kak-otsledit-prishla-li-posylka-na-pochtu-otsledit-posylku-pochta-rossii.html">Отследить посылку почта россии</a> </li> </ul> </aside> <aside id="text-20" class="widget widget_text clearfix"> <h3 class="widget-title"><span>Реклама</span></h3> <div class="textwidget"> <p> </p> </div> </aside> </div> </div> </div> <footer id="colophon" class="clearfix"> <div class="footer-widgets-wrapper"> <div class="inner-wrap"> <div class="footer-widgets-area clearfix"> <div class="tg-footer-main-widget"> </div> <div class="tg-footer-other-widgets"> <div class="tg-second-footer-widget"> <aside id="text-28" class="widget widget_text clearfix"> <div class="textwidget"> <p style="text-align: center;"><strong>shyza.ru</strong></p> <p style="text-align: center;"><strong>Советы. Ответы. Решения </strong></p> <p style="text-align: center;"><strong>2024</strong></p> <p style="text-align: center;" <span style="display:scroll;"> <noindex><a target="blank" href="https://www.facebook.com/sharer/sharer.php?u=https://shyza.ru/sozdanie-formy-s-pomoshchyu-html-html-formy-mnogostrochnoe-tekstovoe-pole.html"><img class="animate1" src="https://shyza.ru/wp-content/uploads/2017/01/logo_facebook.png" width="40" height="40" title="Группа в Facebook" alt="Опубликовать в Фейсбук" loading=lazy></a></noindex> </span><span style="display:scroll;"> <noindex><a target="blank" href="https://vk.com/share.php?url=https://shyza.ru/sozdanie-formy-s-pomoshchyu-html-html-formy-mnogostrochnoe-tekstovoe-pole.html"><img class="animate1" src="https://shyza.ru/wp-content/uploads/2017/01/logo_vk.png" width="40" height="40" title="Группа ВКонтакте" alt="Опубликовать ВКонтакте" loading=lazy></a></noindex></span><span style="display:scroll;"> <noindex><a target="blank" href="https://connect.ok.ru/offer?url=https://shyza.ru/sozdanie-formy-s-pomoshchyu-html-html-formy-mnogostrochnoe-tekstovoe-pole.html"><img class="animate1" src="https://shyza.ru/wp-content/uploads/2017/01/logo_odnoklass.png" width="40" height="40" title="Группа в Одноклассниках" alt="Опубликовать в Одноклассниках" loading=lazy></a></noindex></span> <span style="display:scroll;"> </span> </div> </aside> </div> <div class="tg-third-footer-widget"> <aside id="text-32" class="widget widget_text clearfix"> <div class="textwidget"> <div class="footer-socket-left-sectoin"> </div> </div> </div> </div></div> </aside> </div> <div class="tg-fourth-footer-widget"> </div> </div> </div> </div> </div> <div class="footer-socket-wrapper clearfix"> <div class="inner-wrap"> <div class="footer-socket-area"> <div class="footer-socket-right-section"> </div> </div> </div> </div> </footer> <a href="#masthead" id="scroll-up"><i class="fa fa-chevron-up"></i></a> </div> <script type='text/javascript' src='https://shyza.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.0.1'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/themes/colormag/js/jquery.bxslider.min.js?ver=4.1.2'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/themes/colormag/js/colormag-slider-setting.js?ver=4.9.5'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/themes/colormag/js/navigation.js?ver=4.9.5'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/themes/colormag/js/sticky/jquery.sticky.js?ver=20150309'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/themes/colormag/js/sticky/sticky-setting.js?ver=20150309'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/themes/colormag/js/magnific-popup/jquery.magnific-popup.min.js?ver=20150310'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/themes/colormag/js/magnific-popup/image-popup-setting.js?ver=20150310'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/themes/colormag/js/fitvids/jquery.fitvids.js?ver=20150311'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/themes/colormag/js/fitvids/fitvids-setting.js?ver=20150311'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/themes/colormag/js/post-format.js?ver=20150422'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.5'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.8.min.js?ver=1.6.3'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/plugins/easy-fancybox/js/jquery.easing.min.js?ver=1.4.0'></script> <script type='text/javascript' src='https://shyza.ru/wp-content/plugins/easy-fancybox/js/jquery.mousewheel.min.js?ver=3.1.13'></script> <script type="text/javascript"> jQuery(easy_fancybox_handler); jQuery(document.body).on('post-load', easy_fancybox_handler); jQuery(easy_fancybox_auto); </script> </body> </html>