Как сделать текстовое поле html. Формы в HTML. Пример использования формы

Не всегда текст, который нужно ввести, помещается в одной строке. Бывает, что он растягивается на несколько строк или даже абзацев. Конечно, можно обойтись текстовой строкой "бесконечной" длины (без указания значения параметра maxlength). Однако выглядит такая строка - без начала, без конца - неизящно, а пользоваться ею очень неудобно.

Поэтому для ввода крупных блоков текста предусмотрен другой элемент формы - поле ввода.

Для создания текстового поля используется дескриптор . Он создает внутри формы поле для ввода многострочного текста, отображаемое в окне браузера в виде прямоугольной области с горизонтальной и вертикальной полосами прокрутки.</p><p>Дескриптор <TEXTAREA> - парный. Внутри него помещается текст, который должен оказаться в поле ввода по умолчанию. Это логичнее, чем делать его значением параметра value: ведь текст может быть довольно длинным.</p><p><TEXTAREA COLS="25" ROWS="5" NAME="comment">Ваш комментарий...

Весь текст выводится, как правило, моноширинным шрифтом ("пишущая машинка").

Основные параметры тега </p><table width="695" cellpadding="7" cellspacing="0"><tr valign="top"><td width="89" bgcolor="#d9d9d9"> <p><b>Параметр </b></p> </td><td width="577" bgcolor="#d9d9d9"> <p><b>Описание </b></p> </td> </tr><tbody><tr valign="top"><td width="89"> </td><td width="577"> <p>Определение количества столбцов текстового поля</p> </td> </tr><tr valign="top"><td width="89"> </td><td width="577"> <p>Определение количества рядов текстового поля</p> </td> </tr><tr valign="top"><td width="89"> </td><td width="577"> <p>Присвоение <a href="/settings/chetkie-niki-v-igrah-sozdanie-unikalnyh-imen-teper-k-glavnomu-voprosu.html">уникального имени</a>, необходимого для идентификации программой-обработчиком</p> </td> </tr><tr valign="top"><td width="89"> </td><td width="577"> <p>Позволяет создать элемент, недоступный для редактирования</p> </td> </tr><tr valign="top"><td width="89"> </td><td width="577"> <p>Способ представления текста, вводимого в окно.</p><ul><p>Virtual - в окне текст автоматически разбивается на строки, но при передаче эта <a href="/phone/avtomaticheskaya-razbivka-diska-windows-xp-kak-razbit-zhestkii-disk-na-razdely.html">автоматическая разбивка</a> не сохраняется если вы ввели все одной строкой, то оно так и будет передано. Используется по умолчанию.</p><p>Off - Если мы хотим, чтобы переход на <a href="/rates/komandnaya-stroka-v-vindovs-10-novyi-i-samyi-udobnyi-sposob-otkryt.html">новую строку</a> в окне происходил только когда пользователь нажимает <Enter></p><p>Hard - если мы хотим, чтобы переход на новую строку происходил автоматически и эта разбивка сохранялась при передаче текста на обработку</p> </ul></td> </tr></tbody></table><h2>Раскрывающиеся списки</h2><p>Списки часто бывают очень длинными и скучными. И занимают много места. Если форма бумажная - ничего не поделаешь. Тяжко вздыхаем и заправляем в принтер еще один лист. Но если форма электронная и мы не хотим зря занимать место, можно воспользоваться раскрывающимся списком. Что это такое, знает любой, кто имел дело с <a href="/services/dolgo-zagruzhaetsya-kompyuter-windows-7-pri-vklyuchenii-reshaem-problemu-s.html">Windows дольше</a> получаса: строка, в которой что-то написано, а справа - небольшая кнопка со стрелкой. Если щелкнуть на стрелке, вниз "выпадает" список. Щелкаем на одном из его пунктов - и список сворачивается обратно, а в строке появляется выбранный пункт.</p><p>Как сделать подобный список на HTML-странице? Сам список создается с помощью дескриптора <SELECT>, а отдельные элементы - с помощью дескрипторов <OPTION>.</p><p><<b>SELECT name= day> </b></p><p><b><OPTION value="He </b><b>помню </b><b>"> </b><b>Не </b><b>помню </b></p><p><b>< </b><b>OPTION </b><b>value </b><b>= Понедельник > Понедельник </b></p><p><b>< </b><b>OPTION </b><b>value </b><b> =Вторник>Вторник </b></p><p><b>< </b><b>OPTION </b><b>value </b><b>=Среда>Среда </b></p><p><b>< </b><b>OPTION </b><b>value </b><b>=Четверг>Четверг </b></p><p><b><OPTION </b><b>value </b><b>=Пятница>Пятница </b></p><p><b><OPTION </b><b>value </b><b>=Суббота>Суббота </b></p><p><b>< </b><b>OPTION </b><b>value </b><b>=Воскресенье>Воскресенье </b></p><p><b></ </b><b>SELECT </b><b>> </b></p><p>Однако на этом возможности раскрывающегося списка не исчерпываются. По умолчанию список представляет собой одну строку, которая "раскрывается" при щелчке на кнопке. Но мы можем модифицировать список так, чтобы он принял вид окна, содержащего несколько строк и - при необходимости - полосу прокрутки.</p><p>Для этого нам потребуется параметр size дескриптора <SELECT>. Этот параметр определяет количество строк, из которых состоит список в "закрытом" состоянии, и по умолчанию равен 1.</p><p>Но ведь иногда из списка требуется выбрать не одно, а сразу несколько вариантов. И тогда возможность видеть их все сразу может очень пригодиться. Для того чтобы список позволял выбрать сразу несколько вариантов, используется параметр multiple. Как и checked, этот параметр не имеет значений.</p><p>Просто проставляем его - и все. Обратите внимание: в результате программе-обработчику передается несколько значений с одинаковым именем.</p><p>Для того чтобы выбрать несколько пунктов из такого списка, используется стандартный подход Windows: если эти пункты следуют подряд, выбираем первый, нажимаем клавишу <Shift> и, удерживая ее, выбираем последний пункт. Если же пункты разбросаны, выбираем их в произвольном порядке, удерживая нажатой клавишу <Ctrl>.</p><p>При разработке электронной формы рекомендуется придерживаться следующего правила: то, что посетитель страницы видит на экране одновременно, должно представлять собой законченный блок информации. По возможности, разумеется: если вам это не удастся, никто не подаст на вас в суд. Однако мало кому понравится пользоваться прокруткой только для того, чтобы добраться до кнопки отправки. Тому, чтобы форма выглядела эстетично и чтобы ею было удобно пользоваться, очень способствует рациональная комбинация различных списков.</p><p>Элемент OPTION имеет следующие атрибуты. Selected (без значений) определяет, какой из пунктов списка должен быть выбран по умолчанию, то есть при загрузке страницы. В списке только один из элементов OPTION может быть помечен таким способом. Атрибут value необходим для обработки данных на стороне сервера. Следует отметить, что тег <OPTION> не требует обязательного присутствия закрывающего тега.</p><p><FIELDSET> <LEGEND> </LEGEND> </FIELDSET></p><p>Эти два элемента предназначены для создания группы полей в форме. Чтобы понять, как используются эти элементы, рассмотрим небольшой пример.</p><p><LEGEND>3a<i>головок </i><i> </i>группы</LEGEND></p><p>Имя: <INPUT name="imya" type="text"></p><p>Фамилия: <INPUT <i>name="familiya" </i> type="text"><BR></p><p>Телефон: <INPUT <i>name="telefon" </i> type="text"><BR></p><p><i>Текст подсказки </i></p><p></FIELDSET></p><p>С помощью элемента FIELDSET несколько элементов объединяются: пользователь видит их заключенными в рамку. Внутри группы элементы формы используются обычным способом.</p><p>Элемент LEGEND позволяет создать заголовок группы. Поскольку этот элемент является контейнером, в нем можно размещать другие <a href="/phone/izmenit-shirinu-stranicy-html-parametry-css-width-i-height-dlya-zadaniya-razmerov.html">элементы HTML</a>. Например заголовок группы можно составить из двух строк, если использовать тег <BR>.</p><p>В этом случае размер шрифта заголовка целесообразно уменьшить.</p><p>С помощью <a href="/phone/atribut-align-i-ego-znacheniya-vyravnivanie-elementov-v-html-atributy-i-ih.html">атрибута align</a> можно регулировать положение заголовка:</p><p>Top - заголовок сверху;</p><p>Bottom - заголовок внизу (что не всегда удается реализовать);</p><p>Left - заголовок вверху и слева (значение по умолчанию);</p><p>Right - заголовок вверху и справа.</p> <p>Для создания области, в которую можно вводить несколько строк текста, предназначен элемент <textarea> . В отличие от <input> в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.</p><p>Поле для <a href="/settings/mnogostrochnyi-tekst-vvod-dannyh-polya-formy---teg-atributy-formy--.html">многострочного текста</a> незаменимо для добавления комментариев к статьям, написания сообщений форума, вставки и редактирования постов в блоге и во многих других случаях, когда одной строки текста явно недостаточно. Синтаксис создания поля следующий.</p><p> <textarea атрибуты> Текст

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

Допустимые атрибуты перечислены в табл. 1.

Создание поля многострочного текста показано в примере 1.

Ни один из этих атрибутов не является обязательным, поэтому простая форма для отправки текста выглядит так (пример 1).

Пример 1. Текстовое поле

Результат примера показан на рис. 1.

Рис. 1. Вид текстового поля по умолчанию

При оформлении многострочного поля применяются те же стилевые свойства, что и для однострочного текста. А именно можно изменять ширину (свойство width ), высоту (height ), границу (border ), цвет текста и фона (color и background соответственно) и др. Пример создания текстового поля с разными характеристиками приведен в примере 2.

Пример 2. Оформление текстового поля

Результат данного примера показан на рис. 2.

Рис. 2. Изменение вида текстового поля

Все браузеры кроме Internet Explorer поддерживают изменение размера для . Достаточно потянуть за правый нижний уголок, который по своему виду отличается от остальных. Вот как выглядит такой уголок в Firefox (рис. 3). Вид в <a href="/rates/v-vashem-brauzere-ne-rabotaet-javascript-kak-vklyuchit-java-ili-javascript.html">разных браузерах</a> может несколько различаться, но общая схожесть сохраняется.</p> <br><p>Формы в HTML - это самая сложная, но с другой стороны, пожалуй самая <a href="/services/pyat-prostyh-sposobov-delat-krutye-posty-v-socsetyah-samye.html">интересная тема</a> в HTML.</p> <p>Веб-формы позволяют посетителям сайта внести в специальные поля ту или иную информацию, а разработчику ее получить в удобном для него виде.</p> <p>Примером формы может служить <a href="/services/skript-gostevoi-knigi-na-php-stoimost-gostevoi-vizy-priglashenie-dlya.html">гостевая книга</a>, анкета, <a href="/phone/stress-test-onlain-pk-stress-test-processora-testirovanie.html">онлайн тест</a>. Формы заполняют при регистрации на сайте, при оформлении заказов в интернет магазине и т.п.</p> <p>Пользуясь HTML, Вы можете создать каркас формы: текстовые поля, меню, списки, кнопки, флажки и переключатели. То есть те элементы, при помощи которых в форму вносится определенная информация.</p> <p>Затем данные, внесенные в форму, отправляются на сервер для обработки. Но HTML здесь бессилен - над обработкой формы уже работает программа или скрипт, который к ней привязывается. Такие программы обычно пишут на <a href="/internet/izuchit-yazyk-php-s-nulya-ne-budte-slishkom-gordy-dlya-togo-chtoby-menyatsya.html">языке php</a> или javascript.</p> <h4> Атрибуты формы - тег <form></h4> <p>Форм на веб-странице может несколько (<i>столько, сколько нужно разработчику </i>). Каждая из них начинается тегом <form> и завершается закрывающим тегом </form> .</p> <p>Атрибут action является обязательным для любой формы - он указывает адрес к файлу, который обслуживает форму (<i>обрабатывает внесенные в нее данные </i>).</p> <p>Атрибут method определяет способ отправки содержимого формы. Существует два метода - GET и POST . Сейчас не имеет смысла вникать в эти параметры, так как тема отправки информации <a href="/internet/php-scenarii-obrabotki-html-form-kak-peredat-dannye-v-drugoi-fail.html">методами GET</a> и POST относится к языкам обработки данных (<i>например, PHP </i>). Достаточно знать, что именно метод передачи <a href="/services/html-formy-forma-otpravki-dannyh-v-php-post-get.html">данных POST</a> в большинстве случаях используется в формах.</p> <p>Атрибут name тега <form> не является обязательным. Но если в документе несколько форм, то каждая из них должна быть как-то идентифицирована обработчиком. Поэтому наличие <a href="/settings/chto-takoe-product-data-name-kak-ispolzovat-data-atributy-html5.html">атрибута name</a> в этом случае необходимо - он задает уникально имя формы.</p> <p>Можно также установить кодировку для вводимых данных - за это отвечает атрибут accept-charset , а также, при помощи <a href="/settings/vstavka-giperssylki-v-html-giperssylka-chto-eto-takoe-kak-sdelat.html">атрибута target</a> , определить окно, в котором будет отображаться результат обработки отправленной формы (<i>в новом или в текущем окне </i>).</p> <p>Но сам по себе тег <form> не имеет смысла, ведь форма передает данные, которые сначала нужно куда-то внести!</p> <h4> Ввод данных. Поля формы - тег <input></h4> <p>Тег <input> это наиболее часто встречающийся в формах тег. Он предназначен для создания <a href="/services/css-parametry-ramki-elementa-primery-s-razlichnymi-granicami.html">различных элементов</a>, служащих для ввода данных в форму: это текстовые поля, кнопки, флажки, переключатели.</p> <p>type - это основной атрибут тега <input> . Он устанавливает тип поля (<i>элемента </i>) формы:</p> <table width="100%" border="1"><tr><td width="300px"> <p>Значение атрибута type= "..." </p> </td> <td width="245px"> <p>Результат</p> </td> <td> <p>Описание</p> </td> </tr><tr><td> <p><input type="text" size="20" value="Ваше Имя..." ></p> </td> <td align="center"><form> <input type="text" size="20" value="Ваше Имя..."></form> </td> <td><p>Однострочное текстовое поле для ввода текста. Атрибут size задает ширину поля в символах.</p> </td> </tr><tr><td><p><input type="password" maxlength="10" size="20" ></p> </td> <td align="center"><form> <input type="password" maxlength="10" size="20"></form> </td> <td><p>Текстовое поле для ввода пароля. <br>Атрибут maxlength устанавливает <a href="/rates/maksimalnoe-kolichestvo-naryadov-vne-ocheredi-tri-naryada-vne-ocheredi.html">максимальное количество</a> символов, которое можно ввести</p> </td> </tr><tr><td><p><input type="radio" name="radio" value="1" checked></p> <p><input type="radio" name="radio" value="2" ></p> <p><input type="radio" name="radio" value="3" ></p> </td> <td align="center"> <form> <input type="radio" name="radio" value="1" checked> 1 <input type="radio" name="radio" value="2"> 2 <input type="radio" name="radio" value="3"> 3 </form> </td> <td><p>Переключатель. <br>Возможен выбор лишь одного варианта из предложенных. Атрибут checked определяет заранее помеченное поле.</p> </td> </tr><tr><td><p><input type="checkbox" name="flag" value="1" checked></p> <p><input type="checkbox" name="flag" value="2" ></p> <p><input type="checkbox" name="flag" value="3" ></p> </td> <td align="center"> <form> <input type="checkbox" checked>1 <input type="checkbox">2 <input type="checkbox">3 </form> </td> <td><p>Флажок. <br> Возможен выбор нескольких вариантов. </span> Атрибут <span>checked определяет заранее помеченное поле. </p> </td> </tr><tr><td><p><input type="button" value="Кнопка" ></p> </td> <td align="center"><form> <input type="button" value="Кнопка"></form> </td> <td><p>Кнопка. <br>Атрибут value устанавливает надпись на кнопке.</p> </td> </tr><tr><td><p><input type="reset" value="Сбросить" ></p> </td> <td align="center"><form> <input type="reset" value="Сбросить"></form> </td> <td><p>Кнопка сброса. <br>Возвращает поля формы к их первоначальному виду. Сброс внесенных данных.</p> </td> </tr><tr><td><p><input type="submit" ></p> </td> <td align="center"><form> <input type="submit"></form> </td> <td><p>Кнопка для отправки внесенных данных.</p> </td> </tr><tr><td><p><input type="file" ></p> </td> <td align="center"><form> <input type="file"></form> </td> <td><p>Поле для ввода имени пересылаемого файла.</p> </td> </tr><tr><td><p><input type="image" src="img/buttom.gif" ></p> </td> <td align="center"><form> <input type="image" src="img/buttom.gif"></form> </td> <td><p>Кнопка-изображение. <br> Служит также для отправки данных на сервер. Атрибут src указывает адрес файла с изображением.</p> </td> </tr><tr><td><p><input type="hidden" size="20" ></p> </td> <td align="center"><form> <input type="hidden" size="20"></form> </td> <td><p>Скрытое поле - невидимое для пользователя.</p> </td> </tr></table><h3> Раскрывающийся список - теги <select> и <option></h3> <p>Тег <select> также как и тег <input> служит для сбора информации - он создает список, из которого возможен выбор одного или нескольких элементов. Каждому элементу соответствует какое-либо значение, которое и отправляется на сервер для обработки.</p> <p>Вид <a href="/phone/sozdanie-vypadayushchego-spiska-v-excel-sozdaem-svyazannye-vypadayushchie-spiski.html">создаваемого списка</a> зависит от значения <a href="/rates/atribut-size-elementa-input-type-text-ustanavlivaet-znachenie-po-umolchaniyu-tipy.html">атрибута size</a> : при size= "1" (<i>значение по умолчанию </i>) список будет раскрывающимся.</p> <p>Иное значение атрибута size будет соответствовать количеству отображаемых пунктов списка. Например, при size= "3" , видимыми будут три элемента. Для просмотра остальных пунктов списка (<i>если таковые есть </i>) следует воспользоваться <a href="/services/chernaya-liniya-na-ekrane-noutbuka-vertikalnaya-polosa-na-ekrane-zhk-televizora.html">вертикальной полосой</a> прокрутки, которая добавляется автоматически.</p> <p>По умолчанию возможен выбор лишь одного элемента списка. Добавление атрибута multiple к тегу <select> позволяет выбрать несколько пунктов списка с помощью мыши и <a href="/internet/komanda-sootvetstvuyushchaya-klaviaturnoi-kombinacii-ctrl-f.html">клавиш Ctrl</a> и Shift.</p> <p>При наличии атрибута multiple , будут отображены все пункты списка или их часть (<i>в зависимости от браузера </i>), если атрибутом size не установлено <a href="/rates/proigrat-cikl-javascript-opredelennoe-kolichestvo-raz-cikly-cikl-c.html">определенное количество</a> видимых пунктов.</p> <p>Обязательным элементом раскрывающегося списка является тег <option> . Он располагается внутри тега <select> и создает каждый пункт списка.</p> <p>При помощи атрибута name тега <select> списку дается имя, а при помощи атрибута value тега <option> элементу списка присваивают значение. Таким образом на сервер отправляется пара «имя=значение» - имя списка и значение выбранного элемента/ов.</p> <p>Атрибут selected тега <option> определяет заранее выделенный пункт списка, а <a href="/phone/kak-sdelat-knopku-neaktivnoi-neaktivnaya-knopka-submit-atribut-disabled.html">атрибут disabled</a> блокирует элемент списка - его нельзя выбрать.</p> <p><img src='https://i1.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy></p> <p><form> <br><p>Сторона света - одно из четырех основных направлений: </p> <br> <select name= "storona" > <br> <option value= "North" > Север </option><br> <option value= "South" > Юг </option><br> <option value= "West" > Запад </option><br> <option value= "East" > Восток </option> <br> </select><br><p>7 Чудес света! </p> <br> <select name= "chudo" size= "4" multiple> <br> <option value= "1" > Пирамида Хеопса </option><br> <option value= "2" selected> <span>Висячие сады Семирамиды </span> </option><br> <option value= "3" disabled> <span>Статуя Зевса в Олимпии </span> </option><br> <option value= "4" > <span>Храм Артемиды в Эфесе </span> </option><br> <option value= "5" > <span>Мавзолей в Галикарнасе </span> </option><br> <option value= "6" > <span>Колосс Родосский </span> </option><br> <option value= "7" > <span> Александрийский маяк </span> </option><br> </select><br><p> <input type= "reset" value= "Сброс" > </p> <br> </form> </p> <p><img src='https://i1.wp.com/webpupil.ru/img/java/java_result.jpg' height="61" width="200" loading=lazy></p> <form> <p>Сторона света - одно из четырех основных направлений:</p><p>Север Юг Запад Восток </p><p>7 Чудес света!</p><p>Пирамида Хеопса Висячие сады Семирамиды Статуя Зевса в Олимпии Храм Артемиды в Эфесе Мавзолей в Галикарнасе Колосс Родосский Александрийский маяк </p><p><input type="reset" value="Сброс"></p> </form> <h3> Многострочное текстовое поле - тег <textarea></h3> <p>Тег <textarea> создает многострочное текстовое поле. В нем допустимо делать переносы строк, которые сохраняются при передаче данных обработчику.</p> <p>Атрибут name тега <textarea> является обязательным - при помощи его текстовому полю присваивают имя.</p> <p>Атрибут disabled блокирует поле - содержимое поля нельзя изменить и оно недоступно. Атрибут readonly говорит о том, что поле предназначено только для чтения - пользователь не имеет возможность редактировать содержимое, но оно доступно - его можно выделить и, например, скопировать.</p> <p>Можно задать ширину текстового поля в символах и высоту поля в строках при помощи <a href="/internet/iframe-i-frame-chto-eto-takoe-i-kak-luchshe-ispolzovat-freimy-v-html.html">атрибутов cols</a> и rows соответственно.</p> <p><img src='https://i1.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy></p> <p><p> <textarea name= "text" cols= "40" rows= "5" readonly> <span>Если содержимое поля превысит его размеры - появится бегунок. </span>

Если содержимое поля превысит его размеры - появится бегунок.

Пример использования формы

Теперь давайте посмотрим: как работает форма.

Форма заказа обучающего видеоматериала:

Для объемных текстов, например для почтовых сообщений, удобно использовать именно этот элемент. Он создается тегами … и имеет следующие параметры:

– name - имя поля,

– cols - ширина поля в символах,

– rows - количество строк текста, видимых на экране,

– wrap - способ переноса слов:

– off - переноса не происходит,

– virtual - перенос отображается, но на сервер поступает неделимая строка,

– physical - перенос и на экране и при поступлении на сервер.

– disabled - неактивное поле,

– readonly - разрешено только чтение.

Результат:

Раскрывающиеся списки

Списки бывают с возможностью выбора одного элемента и с множественным выбором. Задаются и те, и другие с помощью тегов …, внутри которых располагаются элементы значений, заданных тегом . Рассмотрим параметры этих тегов:

:

– name - имя списка. Каждый выбранный элемент списка при передаче на сервер будет иметь вид: name.value, где значение (value) берется из тега option;

– size - определяет количество видимых элементов в списке: 1 - простой раскрывающийся список, больше 1 - список с полосой прокрутки;

– multiple - разрешает выбор нескольких элементов списка.

:

– selected - им помечают наиболее вероятный для выбора элемент списка, если список со множественным выбором, то можно пометить несколько пунктов;

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

Какой язык вы хотите изучать: