Выпадающий список html форма: Тег | htmlbook.ru

Leave a Comment / Html / By /

Содержание

форма HTML

Предыдущая: Layout HTML

Далее: HTML кадр

Формы HTML используются для сбора различных типов пользовательского ввода.

Онлайн примеры

Создать текстовое поле (поле Текст)
Этот пример демонстрирует, как создать текстовое поле на странице HTML. Пользователь может написать текст в текстовом поле.

Создать поле пароля
Этот пример демонстрирует, как создать поле HTML пароль.

(В нижней части этой страницы вы можете найти еще примеры.)

форма HTML

Форма представляет собой область, которая содержит элементы формы.

Форма элемент, чтобы позволить пользователю вводить содержимое в виде, например: текстовые поля (текстовое поле), выпадающие списки, радио-кнопки (радио-кнопки), флажки (флажки) и так далее.

Форма использует теги формы <form> набор:

<form>
.
input 元素
.
</form>


Формы HTML — Входные элементы

В большинстве случаев используются форма тег является входным тег (<вход>).

Тип входа является атрибутом определения (типа) типа. Наиболее часто используемых типов входных сигналов следующим образом:

Текстовое поле (Text Fields)

Через текстовое поле <входной тип = «текст»> тег, чтобы установить, когда пользователь вводить буквы, цифры и другие материалы в форме, будет использоваться в текстовом поле.

<form>
First name: <input type=»text» name=»firstname»><br>
Last name: <input type=»text» name=»lastname»>
</form>

Браузер будет выглядеть следующим образом:

Имя:
Фамилия:

Примечание: форма сама по себе не видно.Кроме того, в большинстве браузеров, ширина по умолчанию текстового поля составляет 20 символов.

поле для ввода пароля

Пароль поля по тегу <INPUT TYPE = «пароль»>, чтобы определить:

<form>
Password: <input type=»password» name=»pwd»>
</form>

Браузер отображает следующие эффекты:

Пароль:

Примечание: Символы поле пароля не отображаются в текстовом формате, но со звездочкой или точками вместо.

Кнопка радио (Radio Buttons)

<Тип входного = «радио»> тег определяет одна таблица параметров коробки

<form>
<input type=»radio» name=»sex» value=»male»>Male<br>
<input type=»radio» name=»sex» value=»female»>Female
</form>

Браузер отображает следующие эффекты:

мужчина
женщина

Флажки (Флажки)

<Тип входного = «флажок»> определяет флажок. Пользователям необходимо выбрать один или несколько вариантов из нескольких заданных выборов.

<form>
<input type=»checkbox» name=»vehicle» value=»Bike»>I have a bike<br>
<input type=»checkbox» name=»vehicle» value=»Car»>I have a car
</form>

Браузер отображает следующие эффекты:

У меня есть велосипед
У меня есть автомобиль

кнопка (кнопка Добавить) Добавить

<Тип входного = «Отправить»> определяет кнопку отправки.

Когда пользователь нажимает кнопку OK, содержимое формы будут переданы в другой файл. Атрибут Form действие определяет имя файла файла назначения. Определяется атрибутом действия файла обычно получал бы входные данные, связанные с лечением. :

<form name=»input» action=»html_form_action.php» method=»get»>
Username: <input type=»text» name=»user»>

<input type=»submit» value=»Submit»>
</form>

Браузер отображает следующие эффекты:

Имя пользователя:

Если ввести несколько букв в приведенном выше текстовое поле, а затем нажмите кнопку ОК, а затем входные данные передаются на странице «html_form_action.php». На этой странице отображаются результаты введенных.

Другие примеры

Кнопка Radio (Радио кнопки)
Этот пример демонстрирует, как создать радио-кнопки в HTML.

Флажки (Флажки)
Этот пример демонстрирует, как создать флажок в HTML-страницы. Пользователь может выбрать или снимите флажок.

Простой выпадающий список
Этот пример демонстрирует, как создать простой выпадающего списка поле в HTML-страницы. Выпадающее окно списка является необязательным списком.

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

Текстовые поля (TEXTAREA)
Этот пример демонстрирует, как создать текстовое поле (многострочный текст управления вводом). Пользователь может написать текст в текстовом поле. Writable характер слов не ограничивается.

кнопку Создать
Этот пример демонстрирует, как создать кнопку. Вы можете текст на кнопке может быть изменен.

Форма экземпляра

Форма с границей
Этот пример демонстрирует, как нарисовать прямоугольник вокруг данных с заголовком.

Поле ввода и подтвердите форму с кнопками
Этот пример демонстрирует, как добавить форму страницы. Эта форма содержит два поля ввода и кнопку подтверждения.

Форма с флажками
Эта форма содержит две галочки и кнопку подтверждения.

Форма с кнопками радио
Эта форма содержит две коробки и кнопку подтверждения.

Отправить по электронной почте из формы
Этот пример демонстрирует, как отправить по электронной почте из формы.

теги HTML формы

Новое: HTML5 новый лейбл

标签 描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签，一般为输入标题
<fieldset> 定义了一组相关的表单元素，并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist> New 指定一个预先定义的输入控件选项列表
<keygen> New 定义了表单的密钥对生成器字段
<output> New 定义一个计算结果

Предыдущая: Layout HTML

Далее: HTML кадр

html input radio

Перейти к содержанию

Search for:

Главная » HTML

Автор admin Просмотров 780 Обновлено

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

Содержание

  1. HTML-флажок
  2. Кнопка HTML-радио
  3. Выпадающий список HTML select

HTML-флажок

С помощью флажков мы можем позволить пользователю сделать несколько вариантов. Например:

<form action="">
<fieldset>
<legend>Известные языки</legend><br>
<input type="checkbox" name="html" value="html"/> html
<br />
<input type="checkbox" name="css" value="css"/> css
<br />
<input type="checkbox" name="javascript" value="javascript"/> JavaScript
</fieldset>
</form>
Известные языки
html
css
JavaScript

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

<form action="">
<input name="html" type="checkbox" value="html" checked="checked"/>
</form>

Кроме того, благодаря отключенной функции мы можем сделать чекбокс недоступным:

<form action="">
<input name="html" type="checkbox" value="html" disabled="disabled"/>
</form>

Кнопка HTML-радио

radio button  ( «радио — кнопка» ) эта кнопка чтобы позволить вам сделать эксклюзивный выбор.  Следовательно, в этом случае один выбор исключает другой. Чтобы получить этот эффект, поля должны иметь одинаковое имя и другое значение:

<form action="">
<fieldset>
<legend>Известные языки</legend>
HTML <input type="radio" name="language" value="html"/>
CSS <input type="radio" name="language" value="css"/>
JavaScript <input type="radio" name="language" value="javascript"/>
</fieldset>
</form>
Известные языки HTML CSS JavaScript

Также в этом случае можно назначить значение по умолчанию или отключить кнопку.

<form action="">
<input type="radio" name="language" value="html" checked="checked" disabled="disabled"/>
</form>

Выпадающий список HTML select

Благодаря тегу <select> вы можете создавать меню опций.  В этом случае каждая запись должна быть включена в тег <option> (закрытие тега необязательно), а значение должно быть указано с помощью атрибута «value» . С атрибутом «selected» вы можете указать выбор по умолчанию:

 <form>
<fieldset>
<legend>Выберите язык программирования</legend>
<select name="siti" >
<option value="html" selected="selected">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</select>
</fieldset>
</form>
Выберите язык программирования htmlcssjavascript

Наконец, с помощью тега выбора также можно установить несколько вариантов. Как вы можете видеть, при использовании атрибута «multiple» внешний вид тега select значительно меняется:

<form>
<fieldset>
<legend>Выберите язык программирования</legend>
<select name="siti" multiple="multiple">
<option value="html" selected="selected">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</select>
</fieldset>
</form>
Выберите язык программирования htmlcssjavascript

Используя клавишу CTRL, пользователь может сделать несколько вариантов.

Используя атрибут «size», вы можете указать количество элементов, которые должны отображаться в меню, и, следовательно, отрегулировать высоту меню, добавив или удалив вертикальную полосу прокрутки.

 <form>
<fieldset>
<legend>Выберите язык программирования</legend>
<select name="siti" size="2" multiple="multiple">
<option value="html" selected="selected">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</select>
</fieldset>
</form>
Выберите язык программирования htmlcssjavascript

Adblock
detector

HTML тег

❮ Назад Вперед ❯

HTML тег <select> используется для определения выпадающего списка, который появляется при нажатии мышью на элемент формы и позволяет пользователю выбрать один из вариантов.

Для определения доступных вариантов выбора используется тег <option>, вложенный в тег <select>.

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

Для объединения нескольких вариантов в одну группу используется тег <optgroup>. Содержимое тега <optgroup> выглядит как заголовок жирного начертания.

Внешний вид списка зависит от использования атрибута size, который устанавливает высоту списка. Ширина списка зависит от длины текста в теге <option>. Ширину можно также задать с помощью CSS стилей.

Если необходимо отправлять данные на сервер, либо обращаться к списку через скрипты, то тег <select> необходимо поместить внутрь формы (тег <form>).

Содержимое элемента заключается между открывающим (<select>) и закрывающим (</select>) тегами. Закрывающий тег обязателен

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <form action="action_form. php" target="_top">
      <select>
        <option value="books">Книги</option>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="php">PHP</option>
        <option value="js">JavaScript</option>
      </select>
    </form>
  </body>
</html>

Попробуйте сами!

Результат

КнигиHTMLCSSPHPJavaScript

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <select>
      <optgroup label="Книги">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
      </optgroup>
      <optgroup label="Сниппеты">
        <option value="git">Git</option>
        <option value="java">Java</option>
      </optgroup>
    </select>
  </body>
</html>

Попробуйте сами!

В этом примере мы использовали тег <optgroup> для сбора опций в группе.

Результат

HTMLCSSGitJava

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p>Аэропорт вылета:</p>
    <form action="action_form.php" target="_top">
      <input type = "text" list = "airports" name="airports"> 
      <datalist id = "airports">
        <option value = "Санкт-Петербург">
        <option value = "Краснодар">
        <option value = "Москва">
        <option value = "Новосибирск">
      </datalist>
      <input type = "submit" value = "подтвердить">
    </form>
  </body>
</html>

Попробуйте сами!

Результат

В этом примере мы использовали тег <form>, так как нам необходимо отправить данные на сервер.

Тег <select> поддерживает также глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <select> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <select>:

  • CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
  • CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
  • CSS свойство font-size задает размер щрифта.
  • CSS свойство font-weight устанавливает насыщенность шрифта.
  • CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
  • CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега <select>:

  • CSS свойство color определяет цвет контента и оформления текста.
  • CSS свойство background-color устанавливает фоновый цвет элемента.

Стили форматирования текста для тега <select>:

  • CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
  • CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
  • CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
  • CSS свойство word-break указывает перенос строки.

Другие свойства для тега <select>:

  • CSS свойство text-shadow добавляет тень к тексту.
  • CSS свойство text-align-last выравнивает последнюю строку текста.
  • CSS свойство line-height устанавливает межстрочный интервал.
  • CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
  • CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Элементы формы HTML

❮ Назад Далее ❯

В этой главе описываются все различные элементы формы HTML.

HTML-элементы

HTML-элемент может содержать один или несколько следующих элементов формы:

  • <метка>
  • <выбрать>
  • <текстовое поле>
  • <кнопка>
  • <набор полей>
  • <легенда>
  • <список данных>
  • <выход>
  • <опция>
  • <оптгруппа>

Элемент

Одним из наиболее часто используемых элементов формы является элемент .

Элемент может отображаться несколькими способами, в зависимости от тип атрибут.

Пример


Попробуйте сами »

Все различные значения типа атрибут рассматривается в следующей главе: Типы ввода HTML.

Элемент