Вставка элементов формы в html документ. Создание HTML форм

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

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

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

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

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

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

Элемент

является блочным элементом, который определяет интерактивную часть веб-страницы. Как результат, все элементы управления (такие как , или <button> ) должны находиться <i>внутри </i> элемента <form> .</p><p>Два атрибута HTML <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="/politiki-bezopasnosti-v-otnoshenii-elektronnoi-pochty-elektronnaya-pochta-i/">электронной почты</a> <input type="email"> </li><li>поле для пароля <input type="password"> </li><li>кнопка отправки <input type="submit"> </li> </ul><p>Эти три <a href="/kak-dobavit-shirinu-ramke-css-nalozhenie-tenei-dlya-sozdaniya-neskolkih/">элемента HTML</a> будут заключены внутри одной формы <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> также может быть связан с <a href="/kak-udalit-opredelennyi-element-massiva-javascript-metody-massivov/">определённым элементом</a> формы с помощью атрибута for , соответствующему значению id у поля.</p><p> <label for="first_name">Имя</label> <input id="first_name" type="text"> </p><p>При щелчке по метке фокус переходит к <a href="/forma-dlya-zapolneniya-css-html-textarea-sozdanie-tekstovogo-polya-v-forme-select-option-textarea/">текстовому полю</a> и помещает курсор внутрь него. Пока эта связка кажется бесполезной, но пригодится с флажками и переключателями.</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 (в <a href="/papki-na-fleshke-stali-yarlykami-chto-delat-chto-delat-v-sluchae/">данном случае</a> значение 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-ustanovit-rasshireniya-dlya-google-chrome-luchshie-rasshireniya-dlya/">Google Chrome</a></option> <option><a href="/novyi-internet-explorer-obnovlyaem-brauzer-internet-explorer-do-aktualnoi-versii/">Internet Explorer</a></option> <option><a href="/sohranenie-parolei-v-mozilla-firefox-kak-pochistit-brauzer-mozilla-firefox-udalyaem/">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>Перед отправкой данных браузер подготавливает информацию в виде пары «имя=значение», где имя определяется <a href="/atribut-target-tega-a-osnovy-html-rabota-so-ssylkami-teg-a-i-ego-atributy-rel-target/">атрибутом name</a> тега <input> или другим тегом допустимым в форме, а значение введено пользователем или установлено в поле формы по умолчанию. После нажатия пользователем кнопки Submit, происходит вызов обработчика формы, который получает введенную в форме информацию, а дальше делает с ней то, что предполагает разработчик. В качестве обработчика формы обычно выступает программа, заданная атрибутом <a href="/atribut-tega-form-action-soderzhit-html-formy-atributy-formy---teg/">action тега</a> <form> . Программа может быть написана на любом серверном языке вроде PHP, Python, C# и др.</p> <p>Часто бывает, что <a href="/kak-v-vorde-udalit-stranicu-samaya-polnaya-instrukciya-ustanavlivaem-tip/">текущая страница</a> написанная, допустим, на 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="/programma-dlya-sbora-klyuchevyh-slov-podbor-klyuchevyh-slov-filtraciya/">ключевого слова</a> mailto: . При отправке формы будет запущена <a href="/kak-nastroit-pochtovuyu-programmu-the-bat-nastroika-pochtovoi/">почтовая программа</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> <p><i> </i> 26.02.2016</p> <br><p>Всем привет!<br> Продолжаем изучать <a href="/chto-takoe-html-yazyk-uchebnik-html-osnovy-html/">основы HTML</a>. В этом уроке мы разберем, <b>что такое </b><b>HTML </b> <b>форма </b> и как она создается.<br> Если вы обратили внимание, сегодня ни один веб сайт не обходится без форм. Эти формы могут быть различные, например, форма <a href="/wordpress-forma-obratnoi-svyazi-forma-obratnoi-svyazi-wordpress-pyat-luchshih/">обратной связи</a>, форма для подачи заказа, форма регистрации и входа на сайт, форма отправки комментариев, отзывов, форма поиска и многие др.</p> <p>Я думаю сейчас нужно вам показать примеры, как выглядят HTML формы визуально.</p> <p>○ <b>Форма поиска: </b></p> <p><img src='https://i0.wp.com/stepkinblog.ru/wp-content/uploads/2016/02/html-formy-osnovy-html-dlya-nachinayushhix-urok-18-1.png' height="209" width="381" loading=lazy></p> <p><img src='https://i0.wp.com/stepkinblog.ru/wp-content/uploads/2016/02/html-formy-osnovy-html-dlya-nachinayushhix-urok-18-2.png' width="100%" loading=lazy></p> <p>○ <b>Форма входа на сайт: </b></p> <p><img src='https://i1.wp.com/stepkinblog.ru/wp-content/uploads/2016/02/html-formy-osnovy-html-dlya-nachinayushhix-urok-18-3.png' height="482" width="360" loading=lazy></p> <p>○ <b>Форма обратной связи: </b></p> <p><img src='https://i0.wp.com/stepkinblog.ru/wp-content/uploads/2016/02/html-formy-osnovy-html-dlya-nachinayushhix-urok-18-4.png' height="424" width="340" loading=lazy></p> <p>○ <b>Форма для подачи заказа: </b></p> <p><img src='https://i2.wp.com/stepkinblog.ru/wp-content/uploads/2016/02/html-formy-osnovy-html-dlya-nachinayushhix-urok-18-5.png' height="304" width="338" loading=lazy></p> <p>Я думаю, вы уловили саму суть создания HTML форм. Итак, в сегодняшнем уроке я расскажу, <b>как создать простую </b><b>HTML </b><b> форму </b> и какие теги можно использовать для создания различных полей формы.</p> <p>Вот с этого момента прошу вашего особого внимания, потому как тема сложна и важная.</p> <p><b>HTML </b><b> форма </b> – это поле, в которое пользователь вводит некую информацию. Но, эта информация должна каким-то образом еще и отправляться. Своего рода, HTML форма – это как мотоцикл без бензина, вроде все есть, но почему-то не едет. Так вот, чтобы форма заработала и отправляла информацию, которую ввел пользователь, нужно создать обработчик форм на языке . Но вы с обработчиком не заморачивайтесь, так как вы сейчас проходите только курс для начинающих. Мы еще разберем тему обработчика для форм в разделе «PHP». Так, что-то я отвлекся от основной темы.</p> <h3><span>Учимся создавать HTML формы </span></h3> <p>Любая HTML форма будет состоять из основного тега <form> </form> . Внутри тега <form> </form> вставляются остальные элементы формы, которые будут отображаться на веб странице.</p><p> <form></form> </p><p>Форма должна размещаться между тегами <body></body> .<br> Для тега <form> <span><u>закрывающий тег обязателен </u> </span>.</p> <p>*<i><b>атрибуты для тега <fo </b> </i><i><b>rm </b> </i><i><b>> </b> </i> </p> <p>NAME – уникальное имя формы. Оно используется тогда, когда на одном сайте несколько форм.<br>ACTION – этот атрибут указывает путь к обработчику формы. Является обязательным.<br>METHOD – способ отправки.</p> <ul><li>POST - данные передаются в скрытом виде</li> <li>GET (по умолчанию) - данные передаются в <a href="/hranyatsya-li-paroli-k-uchetnym-zapisyam-v-android-v-otkrytom-vide-hranenie/">открытом виде</a> через браузерную строку.</li> </ul><p>Пример, как выглядит тег <form> с перечисленными атрибутами:</p><p> <form name="forma1" method="post" action="obrabotchik.php"> здесь будут различные элементы формы, которые будут отображаться на веб странице. </form> </p><h3>Элементы формы </h3> <p>○ <b>Тег </b><b>input </b></p> <p><b>Тег </b><b>input </b> – эта часть элемента поля формы предназначена для ввода не<a href="/hitrosti-raboty-v-vorde-maloizvestnye-poleznye-sekrety-word-bystroe/">большого текста</a>, цифр.<br> Для тега <input> <span><u>закрывающий тег не нужен </u> </span>.</p> <p>*<i><b>атрибуты для тега < </b> </i><i><b>input </b> </i><i><b>> </b> </i> </p> <ul><li>name - имя элемента</li> <li>size - размер поля</li> <li>required – поле обязательное для заполнения</li> <li>autofocus – указатель мышки при загрузке веб-страницы сразу будет на поле</li> <li>maxlength – этим атрибутом можно указать максимальное количество ввода символов в поле. По умолчанию, без атрибута maxlength, в поле можно будет вводить неограниченное количество символов</li> <li>placeholder – подсказка для пользователя, которая будет отображаться прямо внутри формы поля (раньше использовали атрибут value).</li> <li>type - тип элемента</li> </ul><p>Пример заполнений:</p><p> <input type="text" name="nameforma" autofocus maxlength="8" size="100" required placeholder="Как вас зовут?"> </p><h3>Тип элемента type </h3> <p><b>Текстовое поле </b></p> <p><b>○ Текстовое поле «text» </b>:</p><p> <input type="text"> </p><p>Результат:</p> <p><input type="text"></p> <p>○ <b>Поле для пароля «password» </b>:</p><p> <input type="password"/> </p><p>Результат:</p> <p><input type="password"></p> <p>○ <b>Поле для email «email» </b>:</p><p> <input type="email"/> </p><p>Результат:</p> <p><input type="email"></p> <p>○ <b>Кнопка для выбора файла с компьютера «file» </b>:</p><p> <input type="file"/> </p><p>Результат:</p> <p><input type="file"></p> <p>○ <b>Поле для ввода телефона «tel» </b>:</p><p> <input type="tel"> </p><p>Результат:</p> <p><input type="tel"></p> <p>○ <b>Поле поиска «search» </b>:</p><p> <input type="search" results="5"> </p><p>Результат:</p> <p><input type="search"></p> <p>○ <b>Поле выбора цвета «color» </b>:</p><p> <input type="color"/> </p><p>Результат:</p> <p><input type="color"></p> <p>○ <b>Поле для ввода и выбора цифр «number» </b>:</p><p> <input type="number" min="0" max="10" step="5"/> </p><ul><li>min – минимальное значение</li> <li>max – максимальное значение</li> <li>step – шаг.</li> </ul><p>Результат:</p> <p><input max="10" min="0" step="5" type="number"></p> <p>○ <b>Поле для выбора даты «date» </b>:</p><p> <input type="date"> </p><p>Результат:</p> <p><input type="date"></p> <p>○ <b>Поле для выбора даты и местного времени в формате (05.05.2015 00:00) </b>:</p><p> <input type="datetime-local"/> </p><p>Результат:</p> <p><input type="datetime-local"></p> <p>○ <b>Выводить выпадающий календарь. </b><br> Поле для выбора года и месяца в формате (Июль 2015 г.).:</p><p> <input type="month"/> </p><p>Результат:</p> <p><input type="month"></p> <p>○ <b>Поле для выбора времени «time» </b>:</p><p> <input type="time"/> </p><p>Результат:</p> <p><input type="time"></p> <p>○ <b>Ползунок «range» </b>:</p><p> <input type="range"/> </p><p>Результат:</p> <p><input type="range"></p> <p>○ <b>Флажок (checkbox) </b>:</p><p> <input type="checkbox" checked><input type="checkbox"/> </p><p>checked – этот атрибут указывает, какой флажок должен быть включен по умолчанию</p><p>Результат:</p> <p><input checked type="checkbox"><input type="checkbox"></p> <p>○ <b>Радиопереключатель «radio» </b>:</p><p> <input type="radio" checked="checked"> <input type="radio"> </p><p>checked – этот атрибут указывает, какой радиопереключатель должен быть включен по умолчанию</p> <p>Результат:</p> <p><input checked type="radio"><input type="radio"></p> <p><b>Кнопки </b></p> <p>○ <b>Кнопка «button» </b>:</p><p> <input type="button" value="кнопка"/> </p><p>value - надпись на кнопке</p> <p>Результат:</p> <p><input type="button" value="кнопка"></p> <p>○ <b>Кнопка для отправки данных «submit» </b>:</p><p> <input type="submit" value="кнопка"/> </p><p>value - надпись на кнопке</p> <p>Результат:</p> <p><input type="submit" value="кнопка"></p> <p>○ <b>Кнопка сброса «reset» </b>:</p><p> <input type="reset" value="сброс"/> </p><p>value - надпись на кнопке</p> <p>Результат:</p> <p><input type="reset" value="сброс"></p> <p>○ <b>Кнопка картинкой </b>:</p><p>Результат:</p> <p><input src="http://stepkinblog.ru/wp-content/themes/stepkinblog/images/icon-html.jpg" type="image"></p> <p>○ <b>Скрытое поле «hidden» </b></p><p> <input type="hidden" value="Любое значение "/> </p><p>○ <b>Тег select </b></p> <p><b>Тег </b><b>select </b> – это часть элемента формы, предназначен для ввода выпадающего списка.<br> Для тега <SELECT></SELECT> <span><u>закрывающий тег обязателен </u> </span>.<br> Тег <SELECT> является каркасом для выпадающего списка.</p> <p>Чтобы создавать пункты выпадающего списка существует тег <OPTION> .<br> Для тега <OPTION></OPTION> <span><u>закрывающий тег обязателен </u> </span>.</p> <p>*<i><b>атрибуты для тега </b> </i><SELECT> и <OPTION> </p> <ul><li>Name – это имя всего списка. Задается только для тега <SELECT> .</li> <li>multiple – для множественного выбора, только при выборе нужно удерживать клавишу «CTRL». Задается только для тега <SELECT> .</li> <li>Value – задается для каждого пункта списка для тега <OPTION> .</li> <li>disabled - блокирует выбор элемента в выпадающем списке. Задается только для тега <OPTION> .</li> </ul><p> <select name="dostavka"> <option value="ne-srochnaya"> Не срочная </option> <option value="srochnaya"> Срочная </option> <option value="kurierom"> Курьером </option> </select> </p><p>Результат:</p> <p>Не срочная Срочная Курьером</p> <p>Или вот так:</p><p> <select name="dostavka"> <option> </option> <option value="ne-srochnaya"> Не срочная </option> <option value="srochnaya"> Срочная </option> <option value="kurierom"> Курьером </option> </select> </p><p>Результат:</p> <p>Не срочная Срочная Курьером</p> <p>Теперь заблокируем из списка «Срочная » атрибутом «disabled »:</p><p> <select name="dostavka"> <option value="ne-srochnaya"> Не срочная </option> <option value="srochnaya" disabled > Срочная </option> <option value="kurierom"> Курьером </option> </select> </p><p>Результат:</p> <p>Не срочная Срочная Курьером</p> <p>○ <b>выпадающий список по группам </b>:</p> <p>Для создания списка группы используется тег <optgroup> </p><p> <optgroup label="Группа 1"></optgroup> </p><p> <select> <optgroup label="Группа 1"> <option value="1">Option</option> <option value="2">Textarea</option> </optgroup> <optgroup label="Группа 2"> <option value="3">Label</option> <option value="4">Fieldset</option> <option value="5">Legend</option> </optgroup> </select> </p><p>Результат:</p><p>Option Textarea <br> Label <a href="/chto-znachit-input-select-option-textarea-label-fieldset-legend-vypadayushchie-spiski-tekstovye/">Fieldset Legend</a> <br></p> <p>○ <b>для множественного выбора </b>:</p><p> <select multiple> <option>Option</option> <option>Textarea</option> <option>Label</option> <option>Fieldset</option> <option>Legend</option> </select> </p><p>В теге <select> используется атрибут «multiple ».</p> <p>Результат:</p> <p>Option <a href="/atributy-kotorye-prinadlezhat-tegu-input-skrytoe-pole-hidden-select-option/">Textarea Label</a> Fieldset Legend</p> <h3><span>Многострочное текстовое поле </span></h3> <p>○ <b>Тег textarea </b></p> <p><b>Тег </b><b>textarea </b> – это часть элемента поля формы, предназначен для ввода большого текста, цифр.<br><span> <u>закрывающий тег обязателен </u> </span>.</p><p> <textarea>

*атрибуты для тега < textarea >

• name – имя поля
• cols – ширина поля
• rows – высота поля
• placeholder – подсказка для пользователя, которая будет отображаться прямо внутри формы поля.

Результат:

Или вот так:

Введите текст

Результат:

Введите текст

Или вот так:

Результат:

Оформление «Рамка» (fieldset)

○ Тег fieldset

Тег fieldset – с помощью этого тега можно нарисовать рамку вокруг объекта.
Закрывающий тег обязателен .

Дополнительные теги

Тег legend – указывает на заголовок.
Закрывающий тег обязателен .

Результат:

Это все, что я хотел рассказать по теме «HTML-формы». Сейчас подведем итог и на практике попробуем создать простую форму, используя уже те знания, которые вы почерпнули из этой статьи.

Вот моя форма:

Результат:

Предыдущая запись
Следующая запись