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

Содержание

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

Узнайте как работать с формами в бесплатном уроке Vue School

Обычное использование

Можно использовать директиву 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 Работа с формами: обычное использование 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 Работа с формами: многострочный текст
by Vue (@Vue)
on CodePen.

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

<!-- НЕ РАБОТАЕТ -->
<textarea>{{ text }}</textarea>
<!-- ok -->
<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 Работа с формами: чекбоксы
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 Работа с формами: список чекбоксов
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 Работа с формами: радиокнопки
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 Работа с формами: выпадающие списки
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 Работа с формами: выпадающий список с привязкой к массиву
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 Работа с формами: выпадающий список с динамическими опциями
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="нет" />

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

1
2
3
4
5

Совет

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

Радиокнопки

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

// когда выбран
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:

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

Это часто бывает полезно при использовании полей с типом text. При указании типа поля number — Vue автоматически станет конвертировать строковое значение в число, добавлять модификатор .number к v-model не потребуется. Если значение не получится привести к числу с помощью parseFloat(), то будет возвращено исходное значение.

.trim

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

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

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

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

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

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

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

JavaScript для профессионалов. Формы и элементы формы

org/ListItem»>

Главная

>

Каталог

>

JavaScript Базовый 2015

>

Формы и элементы формы

Для прохождения теста нужно авторизироваться

Войти
Регистрация

Вы открыли доступ к тесту!
Пройти тест

Войдите или зарегестрируйтесь для того чтоб продолжить просмотр бесплатного видео

Войти
Регистрация

№1

Знакомство с курсом JavaScript Advanced

0:03:11

Материалы урокаДомашние заданияТестирование

Видео курс JavaScript Advanced позволит вам углубится в изучение языка JavaScript. Программа обучения состоит из 10-ти уроков, на протяжении которых детально рассматриваются принципы работы с объектами, документами, CSS, событиями, формами, Cookies, графикой. Каждый урок насыщен как теорией, так и практикой. По завершению интенсивного обучения вы сможете создавать более эффективные веб-решения и повысите свою стоимость в глазах работодателя.

№2

Конструкторы и прототипы

1:41:14

Материалы урокаДомашние заданияТестирование

В видео уроке рассматриваться следующие темы:

Основные конструкторы – Object(), Array(), Function(), Date(), String(). Принцип работы конструкторов, назначение ключевого слова this в конструкторе.

Создание пользовательских конструкторов.

Что такое прототип, использование прототипов и добавление свойств и методов в прототип.

Работа с конструктором Object

Объектно-ориентированные техники в языке JavaScript. Реализация наследования в JavaScript.

Работа с документами.

1:43:50

Материалы урокаДомашние заданияТестирование

В видео уроке рассматриваться следующие темы:

Способы подключения JavaScript сценариев к HTML документу.

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

Использование свойств объекта document. Методы для получения объектов со страницы.

DOM – Document Object Model, примеры создания новых узлов, манипулирование существующими узлами, удаление узлов.

Объект window. Регулярные выражения.

1:27:15

Материалы урокаДомашние заданияТестирование

В видео уроке рассматриваться следующие темы:

Создание и использование таймеров, использование функций setInterval и setTimeout в языке JavaScript

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

Использование объекта Navigator

Создание всплывающих окон с помощью JavaScript кода.

Работа с типом данных string. Методы для работы со строковыми значениями.

Регулярные выражения в языке JavaScript. Синтаксис и методы, которые могут работать с регулярными выражениями.

JavaScript и CSS

1:07:31

Материалы урокаДомашние заданияТестирование

В видео уроке рассматриваться следующие темы:

Основы работы с CSS. Создание CSS правил и подключение правил к HTML документам.

Рассмотрение отдельных CSS свойств, которые часто используются при создании динамических страниц.

Способы изменения CSS стилей через JavaScript код. Работа с вычисляемыми стилями (computed styles).

События и обработка событий (Часть 1)

1:10:06

Материалы урокаДомашние заданияТестирование

В видео уроке рассматриваться следующие темы:

Модель обработки события DOM Level 0. Варианты создания обработчиков, преимущества и недостатки.

Модель обработки события DOM Level 2. Маршрутизация события, контроль распространения события по дереву разметки с помощью методов stopPropagation() и preventDefault()

Модель обработки событий Internet Explorer.

События и обработка событий (Часть 2)

0:47:56

Материалы урокаДомашние заданияТестирование

В видео уроке рассматриваться следующие темы:

Интерфейс объекта события (Event)

События мыши.

Обработка событий клавиатуры.

Примеры обработки событий.

Формы и элементы формы

1:08:42

Материалы урокаДомашние заданияТестирование

В видео уроке рассматриваться следующие темы:

Элемент form, его назначение и способы получения к нему доступа с помощью JavaScript кода.

Элемент input, свойства и типы элементов.

Примеры проверки (валидации) данных введенных пользователем в форму.

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

Cookies и сохранение данных на стороне клиента

0:45:56

Материалы урокаДомашние заданияТестирование

В видео уроке рассматриваться следующие темы:

Назначение cookies рассмотрение принципов хранения данных на стороне клиента.

Свойство cookie объекта document. Примеры создания, удаления и изменения значений.

Другие механизмы хранения данных на стороне клиента — WebStorage, использование свойств localStorage и sessionStorage.

Читать дальше. ..

Работа с графикой на стороне клиента

1:00:15

Материалы урокаДомашние заданияТестирование

В видео уроке рассматриваться следующие темы:

Элемент img, способы получения объекта элемента с изображением и основные его свойства.

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

Создание графики на стороне клиента с помощью CSS.

Создание графики на стороне клиента с помощью SVG.

Создание графики на стороне клиента с помощью Canvas(HTML5).

AJAX и HTTP протокол

1:06:39

Материалы урокаДомашние заданияТестирование

В видео уроке рассматриваться следующие темы:

Основы работы веб приложений. Разбор протокола HTTP. Использование приложения Fiddler для откладки HTTP запросов.

AJAX – Asynchronous JavaScript And XML.

Использование объекта XMLHttpRequest для создания синхронных и асинхронных HTTP запросов.

Использование XMLHttpRequest для отправки данных с POST и GET запросами.

Примеры простого AJAX приложения.

ПОКАЗАТЬ ВСЕ

основные темы, рассматриваемые на уроке

0:00:33