Работа с формами javascript: Формы, элементы управления

Работа с формами в JavaScript фреймворке Vue.js

  1. Главная

  2. Туториалы

  3. Веб-программирование

  4. Vue.js

Типичное использование

Для двунаправленного связывания данных с элементами форм можно использовать директиву v-model. В зависимости от типа элемента автоматически выбираеся способ обновления элемента.

v-model игнорирует атрибуты value, checked или selected на любых элементах форм. Данные экземпляра будут рассматриваться как источник истины. Начальное значение нужно объявить на стороне JavaScript, внутри опции data компонента.

Текст


<input v-model="message" placeholder="отредактируй меня">
<p>Введённое сообщение: {{ message }}</p>

Многострочный текст


<span>Введённое многострочное сообщение:</span>
<p>{{ message }}</p>
<br>
<textarea v-model="message" placeholder="введите несколько строчек"></textarea>

Внутри тега textarea интерполяция (<textarea>{{text}}</textarea>) не будет работать. Для этого нужно использовать директиву v-model

Чекбоксы


<input type="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

Один чекбокс, привязанный к boolean значению:


<div>
  <input type="checkbox" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Отмеченные имена: {{ checkedNames }}</span>
</div>

Множество чекбоксов, привязанных к одному массиву: 


new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

Радиокнопки


<input type="radio" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Выбрано: {{ picked }}</span>

Выпадающие списки

Выбор одного варианта из списка:


<select v-model="selected">
  <option disabled value="">Выберите один из вариантов</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Выбрано: {{ selected }}</span>

new Vue({
  el: '. ..',
  data: {
    selected: ''
  }
})

Если начальное значение выражения v-model не соответствует вариантам списка, элемент <select> отобразится в “невыбранном” состоянии. 

В iOS пользователь не сможет выбрать первый элемент, так как iOS не сгенерирует событие change. Рекомендуется предоставлять отключённый вариант выбора с пустым значением value.

Выбор нескольких вариантов из списка (с привязкой к массиву):


<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br>
<span>Выбрано: {{ selected }}</span>

Динамическое отображение опций с помощью v-for:


<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Выбрано: {{ selected }}</span>

Связывание значений

Для радиокнопок, чекбоксов и выпадающих списков выбора в качестве параметров v-model обычно указываются статические строки:


<!-- `picked` получает строковое значение "a" при клике -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` может иметь значение true или false -->
<input type="checkbox" v-model="toggle">

<!-- `selected` при выборе становится равным строке "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

Для связывания значений с динамическим свойством экземпляра Vue, используйте v-bind

Чекбокс


<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

// если чекбокс выбран:
vm. toggle === 'yes'
// если чекбокс сброшен:
vm.toggle === 'no'

Радиокнопки


<input type="radio" v-model="pick" v-bind:value="a">

// если отмечено:
vm.pick === vm.a

Списки выбора


<select v-model="selected">
  <!-- инлайновый объект с данными -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

// когда выбрано:
typeof vm.selected // => 'object'
vm.selected.number // => 123

Модификаторы

.lazy

По умолчанию, v-model синхронизирует ввод с данными на каждое событие input. Можно указать модификатор lazy, чтобы вместо этого использовать для синхронизации события change:


<!-- синхронизируется после "change", а не "input" -->
<input v-model.lazy="msg" >

. number

Чтобы автоматически привести введенные пользователем данные к числу, нужно добавить модификатор number:


<input v-model.number="age" type="number">

.trim

Чтобы автоматически обрезать пробелы в начале и в конце введённой строки, используйте модификатор trim:


<input v-model.trim="msg">

Использование v-model с компонентами

Компоненты Vue позволяют создавать пользовательские аналоги элементов ввода с  настраиваемым поведением, которые тоже могут работать с директивой v-model. 

Работа с формами | Vue.js

Типичное использование

Можно использовать директиву v-model для двунаправленного связывания данных с элементами форм input, textarea и select. Способ обновления элемента выбирается автоматически в зависимости от типа элемента. Хотя v-model и выглядит как нечто волшебное, в действительности это лишь синтаксический сахар для обновления данных в элементах ввода, с некоторыми поправками для исключительных случаев.

Совет

v-model игнорирует начальное значение атрибутов value, checked или selected на любых элементах форм. Данные текущего активного экземпляра всегда считаются источником истины. Начальное значение необходимо объявить на стороне JavaScript, внутри опции data компонента.

Внутренне v-model использует разные свойства и генерирует разные события для различных элементов ввода:

  • элементы для ввода текста и многострочного текста используют свойство value и событие input;
  • чекбоксы и радиокнопки используют свойство checked и событие change;
  • выпадающие списки используют свойство value и событие change.

Примечание

В языках, требующих IME (opens new window) (китайский, японский, корейский и т.д.), можно заметить, что v-model не обновляется по мере IME-композиции. Если необходимо обрабатывать и эти обновления, используйте обработчик события input и привязку к value вместо использования v-model.

Текст

<input v-model="message" placeholder="отредактируй меня" />
<p>Введённое сообщение: {{ message }}</p>

1
2

See the Pen Handling forms: basic v-model
by Vue (@Vue)
on CodePen.

Многострочный текст

<span>Введённое многострочное сообщение:</span>
<p>{{ message }}</p>
<br />
<textarea v-model="message" placeholder="введите несколько строчек"></textarea>

1
2
3
4

See the Pen Handling forms: textarea
by Vue (@Vue)
on CodePen.

Интерполяция внутри textarea не будет работать. Используйте директиву v-model вместо неё.

<!-- плохо -->
<textarea>{{ text }}</textarea>
<!-- хорошо -->
<textarea v-model="text"></textarea>

1
2
3
4
5

Чекбоксы

Один чекбокс, привязанный к булевому значению:

<input type="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

1
2

See the Pen Handling forms: checkbox
by Vue (@Vue)
on CodePen.

Список чекбоксов, привязанных к одному массиву:

<div>
  <input type="checkbox" value="Джек" v-model="checkedNames" />
  <label for="jack">Джек</label>
  <input type="checkbox" value="Джон" v-model="checkedNames" />
  <label for="john">Джон</label>
  <input type="checkbox" value="Майк" v-model="checkedNames" />
  <label for="mike">Майк</label>
  <br />
  <span>Отмеченные имена: {{ checkedNames }}</span>
</div>

1
2
3
4
5
6
7
8
9
10

Vue. createApp({
  data() {
    return {
      checkedNames: []
    }
  }
}).mount('#v-model-multiple-checkboxes')

1
2
3
4
5
6
7

See the Pen Handling forms: multiple checkboxes
by Vue (@Vue)
on CodePen.

Радиокнопки

<div>
  <input type="radio" value="Один" v-model="picked" />
  <label for="one">Один</label>
  <br />
  <input type="radio" value="Два" v-model="picked" />
  <label for="two">Два</label>
  <br />
  <span>Выбрано: {{ picked }}</span>
</div>

1
2
3
4
5
6
7
8
9

Vue.createApp({
  data() {
    return {
      picked: ''
    }
  }
}).mount('#v-model-radiobutton')

1
2
3
4
5
6
7

See the Pen Handling forms: radiobutton
by Vue (@Vue)
on CodePen.

Выпадающие списки

Выбор одного варианта из списка:

<div>
  <select v-model="selected">
    <option disabled value="">Выберите один из вариантов</option>
    <option>А</option>
    <option>Б</option>
    <option>В</option>
  </select>
  <span>Выбрано: {{ selected }}</span>
</div>

1
2
3
4
5
6
7
8
9

Vue.createApp({
  data() {
    return {
      selected: ''
    }
  }
}).mount('#v-model-select')

1
2
3
4
5
6
7

See the Pen Handling forms: select
by Vue (@Vue)
on CodePen.

Примечание

Если начальное значение выражения v-model не соответствует ни одному из вариантов списка, элемент <select> будет отображаться в «невыбранном» состоянии. В iOS это приведёт к тому, что пользователь не сможет выбрать первый элемент, потому что iOS не сгенерирует событие change в этом случае. Поэтому рекомендуется предоставлять отключённый disabled-вариант выбора с пустым значением value, как показано в примере выше.

Выбор нескольких вариантов из списка (с привязкой к массиву):

<select v-model="selected" multiple>
  <option>А</option>
  <option>Б</option>
  <option>В</option>
</select>
<br />
<span>Выбрано: {{ selected }}</span>

1
2
3
4
5
6
7

See the Pen Handling forms: select bound to array
by Vue (@Vue)
on CodePen.

Динамическое отображение списка опций с помощью v-for:

<div>
  <select v-model="selected">
    <option v-for="option in options" :value="option. value">
      {{ option.text }}
    </option>
  </select>
  <span>Выбрано: {{ selected }}</span>
</div>

1
2
3
4
5
6
7
8

Vue.createApp({
  data() {
    return {
      selected: 'A',
      options: [
        { text: 'Один', value: 'A' },
        { text: 'Два', value: 'B' },
        { text: 'Три', value: 'C' }
      ]
    }
  }
}).mount('#v-model-select-dynamic')

1
2
3
4
5
6
7
8
9
10
11
12

See the Pen Handling forms: select with dynamic options
by Vue (@Vue)
on CodePen.

Связывание значений

Для радиокнопок и выпадающих списков в качестве v-model обычно используются статические строки (или булево для чекбокса):

<!-- `picked` получает строковое значение "a" при клике -->
<input type="radio" v-model="picked" value="a" />
<!-- `toggle` может иметь значение true или false -->
<input type="checkbox" v-model="toggle" />
<!-- `selected` при выборе первого пункта становится равным строке "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

1
2
3
4
5
6
7
8
9
10

Иногда необходимо связать значение с динамическим свойством текущего активного экземпляра. Для этого можно использовать v-bind. Кроме того, использование v-bind позволяет связывать поле ввода с нестроковыми значениями.

Чекбокс

<input type="checkbox" v-model="toggle" true-value="да" false-value="нет" />

1

// если чекбокс выбран:
vm.toggle === 'да'
// если чекбокс сброшен:
vm.toggle === 'нет'

1
2
3
4

Совет

Атрибуты true-value и false-value не влияют на атрибут value тега input, потому что браузеры пропускают невыбранные чекбоксы при отправке форм. Чтобы гарантированно отправлять одно из двух значений с формой (например, «да» или «нет») используйте радиокнопки.

Радиокнопки

<input type="radio" v-model="pick" :value="a" />

1

// если отмечено:
vm.pick === vm.a

1
2

Списки выбора

<select v-model="selected">
  <!-- инлайновый объект с данными -->
  <option :value="{ number: 123 }">123</option>
</select>

1
2
3
4

// когда выбрано:
typeof vm. selected // => 'object'
vm.selected.number // => 123

1
2
3

Модификаторы

.lazy

По умолчанию v-model синхронизирует ввод с данными по событию input (за исключением вышеупомянутых событий IME). Можно указать модификатор lazy, чтобы использовать для синхронизации после события change:

<!-- синхронизируется по событию "change", а не "input" -->
<input v-model.lazy="msg" />

1
2

.number

Для автоматического приведения введённого пользователем к Number, добавьте модификатор number:

<input v-model.number="age" type="number" />

1

Зачастую это полезно, потому что даже при указанном атрибуте type="number" значением поля ввода всегда будет строка. Если значение не удаётся распарсить с помощью parseFloat(), то возвращается оригинальное значение.

. trim

Если необходимо, чтобы автоматически обрезались пробелы в начале и в конце строки, используйте модификатор trim для полей ввода, обрабатываемых через v-model:

<input v-model.trim="msg">

1

Использование

v-model с компонентами

Если вы ещё не знакомы с компонентами Vue, пока просто пропустите эту секцию

Встроенных в HTML элементов ввода не всегда достаточно. К счастью, компоненты Vue позволяют создавать собственные аналоги с полностью настраиваемым поведением. Эти элементы тоже могут работать с директивой v-model!

Подробнее в разделе пользовательские элементы ввода.

Веб-формы — Работа с пользовательскими данными — Обучение веб-разработке

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

Хотите стать веб-разработчиком?

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

Начало работы

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

Однако для освоения форм требуется нечто большее, чем просто знание HTML — вам также необходимо изучить некоторые специальные методы оформления элементов управления формы, а также некоторые знания сценариев, необходимые для обработки таких вещей, как проверка и создание настраиваемых элементов управления формы. Поэтому, прежде чем вы посмотрите на другие разделы, перечисленные ниже, мы рекомендуем вам сначала изучить CSS и JavaScript.

Приведенный выше текст является хорошим показателем того, почему мы поместили веб-формы в отдельный автономный модуль, а не пытаемся смешивать его части с темами HTML, CSS и JavaScript — элементы формы более сложны, чем большинство другие элементы HTML, и они также требуют тесного сочетания связанных методов CSS и JavaScript, чтобы получить максимальную отдачу от них.

Примечание: Если вы работаете на компьютере/планшете/другом устройстве, на котором у вас нет возможности создавать собственные файлы, вы можете попробовать (большинство) примеров кода в онлайн-программе кодирования, такой как JSBin или глюк.

Ваша первая форма

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

Как структурировать веб-форму

Избавившись от основ, мы теперь более подробно рассмотрим элементы, используемые для придания структуры и значения различным частям формы.

Базовые собственные элементы управления формой

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

Типы ввода HTML5

Здесь мы продолжаем наше глубокое погружение в элемент , рассматривая дополнительные типы ввода, предоставленные при выпуске HTML5, а также различные элементы управления пользовательского интерфейса и улучшения сбора данных, которые они обеспечивают. Кроме того, мы смотрим на <выход> элемент.

Прочие формы контроля

Далее мы рассмотрим все не- элементы управления формы и связанные с ними инструменты, такие как