Блог

У меня есть форма с набором входных данных, и я хочу, чтобы моя страница обновлялась при изменении одного из них. У меня есть второй набор входных данных на ДРУГОЙ стороне страницы, и макет css не позволяет мне помещать их в один и тот же <form> </form> тег. Мне было интересно, есть ли способ, которым я могу убедиться, что те «входные данные», которые находятся за пределами <form> тега, все еще связаны с этой формой.

Есть ли какой-то способ назначить «идентификатор формы» входным данным?

В HTML5 вы можете использовать form атрибут:

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

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

Пример:

 <form id="myform">
    <input id="something" type="text">
</form>

<button form="myform" type="submit">Submit that form over there</button>
 

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

<input type="text" form="myform" /> работал на меня.

Обновить
Это отлично работало с FireFox, однако вызвало у меня проблемы в IE 11, так как атрибут формы не распознается в IE (на момент написания этой статьи).

Мне нужно было просто установить скрытое поле ввода внутри формы и перенести значение в скрытое поле ввода из ввода вне формы; с помощью onclick с помощью jQuery.