Select html значение по умолчанию: html — Элемент по умолчанию в select’е

Leave a Comment / Html / By /

Теги select и textarea в HTML5

Select

<select> — элемент содержащий меню опций <option> или меню групп опций <optgroup>. Имеет схожие с <input> атрибуты, а также атрибуты multiple и size. Обычно select располагается внутри тега <form> или связывается с ним атрибутом form.

<form action="">
    <select name="some_list"></select>
</form>

<option> — тег, который используется для определения пункта списка внутри тега <select>, но также его можно встретить и в тегах. Атрибуты: selected — позволяет пред-выбрать элемент. disabled — работает как всегда. и другие.

<form action="">
    <label for="select">Select item</label>
    <select name="list">
        <option value="item-1">Item #1</option>
        <option value="item-2">Item #2</option>
        <option value="item-3">Item #3</option>
        <option value="item-4">Item #4</option>
    </select>
</form>

<optgroup> — позволяет группировать опции внутри <select>. Имеет атрибуты — name и disabled.

name — задает имя группы.

disabled — исключает возможность выбора элементов из группы.

label — Задает имя группы которое видно пользователю.

<form action="">
    <label for="select2">Select item</label>
    <select name="list">
        <optgroup label="Veggie">
            <option value="item-1" selected>Mushrooms</option>
            <option value="item-2">Carrot</option>
        </optgroup>
        <optgroup label="Meat" disabled>
            <option value="item-3">Pork</option>
            <option value="item-4">Chicken</option>
        </optgroup>
    </select>
</form>

Атрибут multiple тега <select> позволяет выбирать не один, а сразу несколько <option> если зажата клавиша CTRL (для windows или linux) или COMMAND (для macOS)

<form action="">
    <label for="select3">Select item</label>
    <select name="list" multiple>
        <optgroup label="Veggie">
            <option value="item-1" selected>Mushrooms</option>
            <option value="item-2">Carrot</option>
        </optgroup>
        <optgroup label="Meat" disabled>
            <option value="item-3">Pork</option>
            <option value="item-4">Chicken</option>
        </optgroup>
    </select>
</form>

Textarea

<textarea> — позволяет добавить поле для ввода большого количества текста, обычно располагается внутри тега <form>.

Имеет атрибуты схожие с <input>, а также cols и rows.

cols — определяет ширину <textarea>

rows — определяет высоту <textarea>

<form action="">
    <label for="message">Your massage</label>
    <textarea
            name="user_message"
           
            cols="30"
            rows="10"
            placeholder="Your message..."
    ></textarea>
</form>

У тега <textarea> нет атрибута value, а если вы ходите установить ему какое-то значение по-умолчанию, нужно писать его между открывающим и закрывающим тегами.

<form action="">
    <label for="message2">Your massage</label>
    <textarea
            name="user_message"
           
            cols="30"
            rows="10"
            placeholder="Your message..."
    >Some predefined data goes here</textarea>
</form>

* * *

Файлы с урока 

select

textarea

P. S. Подписывайся на мой youtube и telegram каналы чтобы получать больше контента )

НОУ ИНТУИТ | Лекция | HTML-формы

Аннотация: В данной лекции подробным образом разбираются элементы разметки, входящие в группу HTML-FORM. Рассматриваются их атрибуты, совместимость атрибутов и форматы записи данных при формировании запросов к HTTP-серверу.

Ключевые слова: form, контейнер, тег, атрибут, Action, методы передачи данных, разбиение, HTTP, схема URL, CGI, QUERY_STRING, submit, input, mosaic, textarea, SELECT

Элемент разметки FORM и его компоненты

Контейнер (элемент разметки) FORM позволяет определить в рамках HTML-документа форму ввода. В рамках этого контейнера размещаются все поля ввода, куда пользователь может поместить свою информацию. Если контейнер формы открыт, т.е. в документе указан тег начала контейнера <FORM …>, то обязательно нужно указать и тег конца контейнера </FORM>.

intuit.ru/2010/edi»>В общем случае контейнер имеет следующий вид:

<FORM 
NAME=...
ACTION=url
METHOD=POST|GET|PUT|...
enctype=application/x-www-form-urlencoded|
        multipart/form-data
[target=window_name]
>
...
</FORM>

Атрибут NAME используется для именования формы. Это делается главным образом в JavaScript-программах. Атрибут ACTION задает URL, по которому отправляются данные из формы. Атрибут METHOD определяет метод передачи данных (фактически, речь идет о формировании сообщения, передаваемого по сети). Атрибут ENCTYPE определяет тип кодирования данных в теле сообщения и разбиение сообщения на части. Необязательный атрибут TARGET позволяет адресовать окно, в котором будет отображаться результат обработки данных из формы.

В рамках обзора применения контейнера FORM мы рассмотрим:

  • передачу данных по электронной почте;
  • intuit.ru/2010/edi»>передачу данных скрипту через атрибут ACTION ;
  • передачу данных через Server Side Include.

Инициировать обмен можно при помощи JavaScript-кода, но рассматривать данный способ программирования обмена данными мы здесь не будем.

FORM (mailto)

Контейнер FORM позволяет определить в рамках HTML-документа форму ввода. В рамках этого контейнера размещаются все поля ввода, в которые пользователь может поместить информацию. Часто автор страниц Web-сайта по тем или иным причинам не имеет возможности программировать на стороне сервера. Однако это не означает, что он не может применять формы. Формы можно применять для отправки почты. Однако, как и в любом деле, здесь есть свои особенности, например:

<FORM ACTION=mailto:[email protected]>
<INPUT NAME=n1 VALUE="Поле1">
<INPUT TYPE=SUBMIT VALUE="Отправить">
</FORM>

intuit.ru/2010/edi»>В данном примере ( cgimail1.htm ) мы пытаемся отправить значение поля формы n1 по электронной почте абоненту [email protected]. После заполнения поля и выбора кнопки «Отправить», браузер откроет окно программы почтового клиента, что не входило в наши планы. При этом само значение поля куда-то исчезнет.

Почему открывается новое окно? Несмотря на полный произвол, который царит в Web, и жесточайшую конкуренцию между Netscape и Microsoft, логика, заложенная в архитектуру World Wide Web Бернерсом Ли, обеими компаниями соблюдается. Дело в том, что, согласно спецификации RFC 822 (формат текстового сообщения Internet), на которую опираются протоколы HTTP и SMTP (Simple Mail Transfer Protocol, простой протокол электронной почты), сообщение может состоять из двух частей: заголовка и тела. В том виде, в каком мы используем контейнер FORM , метод доступа к ресурсу не указан и, следовательно, по умолчанию выбирается GET. У нас нет тела сообщения, а есть только заголовок.

Кроме того, в примере мы применяем схему URL mailto. Она соответствует спецификации протокола SMTP (обмен почтовыми сообщениями в Internet). В этой схеме, в отличие от схемы HTTP, расширенный путь после доменного имени стандартом не предусмотрен.

Итак, для того, чтобы получить тело сообщения, необходимо указать метод POST ( cgimail2.htm ). В этом случае сообщение должно уйти абоненту без открытия окна почтового клиента:

<FORM METHOD=post 
      ACTION=mailto:[email protected]>
<INPUT NAME=n1 VALUE="Поле1">
<INPUT TYPE=SUBMIT VALUE="Отправить">
</FORM>

Любопытно, что в данном случае мы использовали протокол, отличный от HTTP — SMTP. В нем нет понятия метода доступа вообще. Тем не менее логика разбиения текстовых сообщений для всех протоколов одна и та же, как, собственно, и предполагалось при создании Web-технологии — унификация доступа к ресурсам.

На этом примере хорошо видны отличия URI от URL. В данном случае были возможны различные механизмы обработки данных в запросе на ресурс, который задается URI. Но конкретная реализация преобразования данных в запрос в рамках Web — это и есть URL, т.е. URI в рамках World Wide Web.

Расширим наш пример, добавив в него отправку абоненту внешнего файла по электронной почте. Такая задача встречается довольно часто. Например, поддержка архива электронных публикаций. Здесь нет необходимости в немедленном опубликовании материалов. Все статьи должны пройти экспертизу, которая требует определенного времени. Для этого модифицируем наш пример, добавив в него поле типа FILE:

<FORM METHOD=post 
      ACTION=mailto:[email protected]>
<INPUT NAME=n1 VALUE="Поле1">
<INPUT NAME=file TYPE=file>
<INPUT TYPE=SUBMIT VALUE="Отправить">
</FORM>

ru/2010/edi»>Почему в данном случае нельзя использовать метод GET, объяснялось выше. Метод POST должен обеспечить нам размещение всего файла в теле сообщения.

Однако все это верно, пока мы работаем с текстовыми файлами и находимся в рамках RFC822. А если нам нужно передать файл с длинными строками (Postscript) или просто двоичный файл? В таком случае необходимо обратиться к формату MIME. Это можно сделать при помощи еще одного атрибута контейнера FORM — ENCTYPE:

<FORM
ENCTYPE=multipart/form-data
METHOD=post
ACTION=mailto:[email protected]>
<INPUT NAME=n1 VALUE="Поле1">
<INPUT NAME=file TYPE=file>
<INPUT TYPE=BUTTON VALUE="Отправить">
</FORM>

В данном случае по почте отправляется сообщение не в стандарте RFC822, а в стандарте MIME. Тело сообщения будет состоять из нескольких частей, а файл будет преобразован в ASCII-символы в соответствии со спецификацией BASE-64. Стандартный почтовый клиент воспринимает такой файл как присоединенный и позволяет его либо просмотреть, либо сохранить на диске.

FORM (HTTP)

Основной целью введения форм в HTML было обеспечение ввода данных в прикладную программу из универсального мультипротокольного браузера. При этом нужно отдавать себе отчет, что прикладная программа естественным образом должна выполняться на компьютере, где функционирует HTTP -сервер. Она не может работать в пустоте. Программу должен кто-то загружать, настраивать в адресном пространстве компьютера (linking), передавать ей управление и удалять из памяти после ее завершения.

Раз запрос от клиента принимает сервер, следовательно, и инициировать изложенные выше действия должен именно он.

Механизм инициирования такой прикладной программы определен в спецификации Common Gateway Interface. Там же задан и порядок обмена данными между HTTP -сервером и программой, которая в спецификации CGI именуется скриптом.

Метод GET

Основная задача формы — это предоставление шаблона ввода данных, которые будут переданы скрипту. Сам скрипт при этом указывается через URL, который задается в атрибуте ACTION :

<FORM ACTION=script.cgi>
<INPUT NAME=n1 VALUE="Поле1">
<INPUT NAME=n2 VALUE="Поле2">
<INPUT TYPE=SUBMIT VALUE="Отправить">
</FORM>

В данном примере скрипт просто распечатывает пару «имя поля формы — значение поля формы» в виде HTML-таблицы ( formcgi1.htm ). Правда, если присмотреться внимательно к происходящему на экране, можно обнаружить любопытную метаморфозу с URL скрипта при выборе кнопки «Отправить». В поле location окна браузера к скрипту после символа » ?» приписываются пары «поле-значение», разделенные символом » & «.

Данный запрос из формы определяют как запрос типа URLENCODED, переданный по методу GET. При передаче значений по методу GET формируется только заголовок HTTP -сообщения и не формируется его тело. Поэтому все содержание полей формы помещается в URL и таким образом передается скрипту. Из текста скрипта ( formcgi2.htm ) видно, что данные извлекаются из переменной окружения QUERY_STRING, в которую сервер помещает запрос.

Запросы, которые передаются в методе GET, можно условно разделить на два типа: ISINDEX и FORM-URLENCODED. FORM-URLENCODED мы только что рассмотрели, а ISINDEX был описан в разделах «Заголовок HTML-документа» и «Спецификация Common Gateway Interface», поэтому не будем повторяться.

Метод POST

Очевидно, что в строку URL нельзя втиснуть бесконечное число символов. И браузер, и среда, в которой функционирует сервер, имеют ограничения либо, как в случае браузера, по длине поля location, либо по длине области переменных окружения. Правда, последнее для современных систем не очень актуально. Например, операционная система IRIX 6.2 позволяет размещать в области переменных окружения данные объемом до 4 Mбайт. Тем не менее, для передачи относительно больших объемов предпочтительнее использовать метод доступа POST:

<FORM METHOD=post ACTION=script.cgi>
<INPUT NAME=n1 VALUE="Поле1">
<INPUT NAME=n2 VALUE="Поле2">
<INPUT TYPE=BUTTON VALUE="Отправить">
</FORM>

В нашем примере в контейнере FORM появился атрибут METHOD, который принял значение POST. Результат работы скрипта не изменился, но сам скрипт претерпел существенные изменения. Теперь запрос принимается со стандартного ввода, а не из переменной окружения QUERY_STRING.

При методе POST данные передаются как тело HTTP -сообщения, и скрипт читает их со стандартного ввода. При этом есть один существенный нюанс, который ограничивает круг средств разработки скриптов для приема данных по POST. Он заключается в том, что сервер не закрывает канал передачи данных скрипту после передачи последнего символа запроса. В переменной CONTENT_LENGTH сервер сообщает, сколько данных со стандартного ввода нужно считать. Таким образом, язык программирования сценариев или универсальный язык программирования должны уметь читать определенное количество символов из стандартного ввода. Например, многие разновидности командных языков UNIX (Bourn-shell, Kernel-shell и т.п.) могут читать только строками и ждут закрытия входного потока.

Обычно при описании программирования CGI -скриптов рассматривают только методы GET и POST. В принципе, в форме можно указывать любые другие методы, например, PUT. Просто серверы не имеют стандартных модулей обработки этих методов, поэтому, кроме формы и скрипта, в случае нестандартного метода требуется произвести еще и соответствующую настройку сервера.

Кодирование

Существует два типа кодирования содержания (тела) HTTP -сообщения, которые можно определить в форме:

  • intuit.ru/2010/edi»>application/x-www-form-urlencoded
  • multipart/form-data

Все, что рассматривалось в данном разделе до сих пор, относилось к первому типу кодирования тела HTTP -сообщения. Первый тип кодирования выбирается по умолчанию и является основным способом. Единственное, что пока не было рассмотрено, так это то, что, собственно, представляет собой этот самый URLENCODED.

В URL документа можно использовать только символы набора Latin1. Это первая половина таблицы ASCII за вычетом первых 20 символов. Все остальные символы заменяются своими шестнадцатеричными эквивалентами. Кроме того, такие символы, как » + » или » & «, играют роль разделителей или коннекторов. Если они встречаются в значении поля, то тоже заменяются на шестнадцатеричный эквивалент. Наиболее характерно это для работы с русским алфавитом. Поэтому скрипт, который принимает запросы, должен уметь эти символы декодировать.

Второй тип применяется для передачи двоичной информации в теле HTTP -сообщения. Если проводить аналогии с электронной почтой, то multipart/form-data обеспечивает присоединение файла данных (attachment) к HTTP -запросу. Наиболее типичным примером является передача файла с машины пользователя на сервер:

<FORM ACTION=script.cgi METHOD=post 
      ENCTYPE=multipart/form-data>
<INPUT NAME=n1 VALUE="Поле1">
<INPUT NAME=n2 TYPE=file>
<INPUT TYPE=SUBMIT VALUE="Отправить">
</FORM>

В данном случае HTTP -сообщение будет очень похоже на почтовое сообщение в стандарте MIME (собственно, это и есть MIME-сообщение, только передается оно по протоколу HTTP ). Естественно, что для приема такого сообщения нужен скрипт, который бы смог разобрать его на части, а потом декодировать необходимую информацию.

FORM (SSI)

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

Во-первых, атрибут ACTION можно не указывать в том случае, если данные, введенные в форму, обрабатываются JavaScript-программой. В этом случае достаточно дать форме имя, чтобы к ее элементам (контейнерам) можно было обращаться. Передачу данных можно реализовать через метод submit , который будет выполняться при нажатии на гипертекстовую ссылку, например, formssi1.htm. Более подробно данный материал описан в главе «Программирование на JavaScript».

Во-вторых, принять данные можно через скрипт, который встроен в документ как Server Side Include. Этот способ мы рассмотрим более подробно.

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

<FORM>
<INPUT NAME=n1 VALUE="Поле1">
<INPUT NAME=n2 VALUE="Поле2">
<INPUT TYPE=SUBMIT VALUE="Отправить">
</FORM>

то после перезагрузки документа мы получим этот же документ, только в URL после символа » ?» будет добавлено содержание формы ( formssi2.htm ).

Если теперь несколько видоизменить документ — вставить в него Server Side Include — получим:

<FORM>
<INPUT NAME=n1 VALUE="Поле1">
<INPUT NAME=n2 VALUE="Поле2">
<INPUT TYPE=SUBMIT VALUE="Отправить">
<HR>
<!--#exec cgi=./cgi.cgi -->
</FORM>

Сам скрипт принимает запрос из QUERY_STRING и распечатывает его в виде HTML-таблицы ( formssi3.htm ). При этом результат распечатывается вслед за формой после горизонтального отчеркивания.

intuit.ru/2010/edi»>Точно так же можно обработать данные и методом POST, только для этого необходимо указать его в атрибуте METHOD контейнера FORM .

Как установить значение по умолчанию для элемента HTML?

Улучшить статью

Сохранить статью

  • Уровень сложности: Hard
  • Последнее обновление: 22 ноя, 2021

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    В этой статье мы узнаем об установке значения по умолчанию для элемента выбора HTML, а также разберемся с их реализацией на примерах.

    Тег выбора в HTML используется для создания раскрывающегося списка параметров, которые можно выбрать . Тег option содержит значение, которое будет использоваться при выборе. Значение по умолчанию для элемента select может быть установлено с помощью атрибута «selected» требуемой опции. Это логический атрибут. Параметр с атрибутом «выбрано» будет отображаться по умолчанию в раскрывающемся списке. Мы можем даже установить выбранных 9Атрибут 0026 после загрузки страницы с помощью Javascript.

    Синтаксис:

    Пример 1: отображаться первым из выпадающего списка.

    HTML

    < HTML >

    < HEAD >

    . Название >

    HEAD >

    < BODY > < . 0058

         < h2 style = "color: green" >GeeksforGeeks h2 >

         < b >

             Как установить значение по умолчанию 

             для элемента HTML < select >?

         b >

         < p >The Starter option will be selected by default p >

       

         < P > Выберите свой план ниже: P >

    < SELECT ИЗДА0058 = "plan" id = "plan" >

             < option value = "free" >Free Опция >

    < Опция Значение = "Стартер" Выбор> стартер опция > Стартер опция > > > > > > > > 0058

             < option value = "professional" >Professional option >

             < option value = "Корпоративный" >Корпоративный вариант >

         выбрать >

    body >

       

    html >

    Output:

    selected Attribute

    Example 2: Это также можно использовать для добавления в список таких сообщений, как «Выберите вариант» . Эта опция будет иметь скрытый и отключенный атрибут в дополнение к выбранному.

    HTML

    < html >

       

    < head >

         < title > Установите значение по умолчанию для < select > element title >

    head >

       

    < body >

         < h2 style = "color: green" >GeeksforGeeks h2 >

    < B > Как установить значение по умолчанию для

    HTML < SELECT > Элемент?

    B >

    < P > Выбор AN AR будет показан на защите.

    < P > Выберите свой план ниже: P >

    <

    <

    <0058 select name = "plan" id = "plan" >

             < option value = "none" Выбранные отключенные Hidden> Выберите опцию Опция >

    < Опция Значение = "БЕСПЛАТНО" = " = " = " 0057 >Free option >

             < option value = "starter" >Starter option >

             < вариант значение = "профессиональный" >профессиональный вариант >

     

    058

    < option value = "corporate" >Corporate option >

         select >

    body >

       

    html >

    Output:

    Отключен выбранный атрибут

    HTML является основой веб-страниц, используется для разработки веб-страниц путем структурирования веб-сайтов и веб-приложений. Вы можете изучить HTML с нуля, следуя этому руководству по HTML и примерам HTML.


    Связанные статьи

    Выберите одно или несколько полей значений или заполнителей

    shadow

    Элементы выбора — это элементы управления формы для выбора параметра или параметров из набора параметров, аналогично нативному