Работа с формами javascript: Формы, элементы управления
Содержание
Работа с формами в JavaScript фреймворке Vue.js
Главная
Туториалы
Веб-программирование
- 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
Здесь мы продолжаем наше глубокое погружение в элемент
<выход>
элемент.- Прочие формы контроля
Далее мы рассмотрим все не-
- Стилизация веб-форм
В этой статье представлено введение в стилизацию форм с помощью CSS, включая все основы, которые вам могут понадобиться для основных задач стилизации.
- Расширенный стиль формы
Здесь мы рассмотрим некоторые более продвинутые методы стилизации форм, которые необходимо использовать при работе с некоторыми элементами формы, которые сложнее стилизовать.
- Псевдоклассы пользовательского интерфейса
Введение в псевдоклассы пользовательского интерфейса, позволяющие нацеливать элементы управления формы HTML на основе их текущего состояния.
- Проверка формы на стороне клиента
Отправки данных недостаточно — нам также необходимо убедиться, что данные, которые пользователи вводят в формы, имеют правильный формат для их успешной обработки и что это не нарушит работу наших приложений. Мы также хотим помочь нашим пользователям правильно заполнять наши формы и не расстраиваться при попытке использовать наши приложения. Проверка формы помогает нам достичь этих целей — в этой статье рассказывается, что вам нужно знать.
- Отправка данных формы
В этой статье рассматривается, что происходит, когда пользователь отправляет форму — куда идут данные и как мы обрабатываем их, когда они туда попадают? Мы также рассмотрим некоторые проблемы безопасности, связанные с отправкой данных формы.
Следующие статьи не являются обязательными для обучения, но они окажутся интересными и полезными, если вы освоите описанные выше методы и захотите узнать больше.
- Как создавать настраиваемые элементы управления формы
Вы столкнетесь с некоторыми случаями, когда собственные виджеты форм просто не предоставляют то, что вам нужно, например. из-за стиля или функциональности. В таких случаях вам может понадобиться создать собственный виджет формы из необработанного HTML. В этой статье объясняется, как это сделать, и соображения, которые необходимо учитывать при этом, с практическим примером.
- Отправка форм через JavaScript
В этой статье рассматриваются способы использования формы для сборки HTTP-запроса и отправки его с помощью пользовательского JavaScript, а не стандартной отправки формы. Также рассматривается, почему вы хотели бы это сделать, и последствия этого. (См. также Использование объектов FormData.)
- Таблица совместимости свойств CSS для элементов управления формы
В этой последней статье содержится удобный справочник, позволяющий узнать, какие свойства CSS совместимы с элементами формы.
- Ссылка на элемент формы HTML
- Ссылка на типы HTML
- Ссылка на атрибут HTML
Последнее изменение: , участниками MDN
Учебник по HTML-формам | JavaScript Coder
В то время как другие элементы HTML придают стиль и смысл вашему веб-сайту, HTML-форма добавляет интерактивности. HTML-формы выполняют важные функции, такие как прием заказов, опросы, регистрация пользователей и многое другое. Вы вряд ли найдете хоть один веб-сайт без форм.
Как работает HTML-форма?
Веб-форма состоит из двух частей: HTML-интерфейса и внутреннего обработчика форм. Интерфейсная часть HTML обрабатывает презентацию, а серверная часть обрабатывает отправку форм (например, сохранение отправленных форм, отправку электронных писем и т. д.). Сценарий процессора внутренней формы обычно пишется на таких языках, как PHP, ASP или Perl. Изображение ниже иллюстрирует концепцию:
- Посетитель посещает веб-страницу, содержащую форму.
- Веб-браузер отображает HTML-форму.
- Посетитель заполняет форму и отправляет
- Браузер отправляет отправленные данные формы на веб-сервер
- Сценарий обработчика форм, запущенный на веб-сервере, обрабатывает данные формы
- Страница ответа отправляется обратно в браузер.
Также см. Видеоруководство по созданию формы здесь:
Тег формы HTML
Все входные элементы должны быть заключены в отверстие и закрытие