<div class="big"><input type="text" name="name"></div>
<div class="mobile"><input type="text" name="name"></div>
<style>
input {
all: initial;
}
.mobile {
background: #ffeaea;
display: initial;
}
.big {
background: #d2ffde;
display: none;
}
@media (min-width: 600px) {
.mobile {
display: none;
}
.big {
display: initial;
}
}
</style>
<script>
{
let onResizeHandler = event => {
for(let element of document.querySelectorAll("input[name], input[data-name]")) {
if(!("name" in element.dataset)) element.dataset.name = element.name;
// если элемент формы не виден,
// то удаляем его "name" атрибут;
// иначе восстанавливаем
if(element.offsetWidth > 0 && element.offsetHeight > 0) {
element.setAttribute("name", element.dataset.name);
} else {
element.removeAttribute("name");
}
}
};
addEventListener("resize", onResizeHandler);
onResizeHandler();
};
</script>
<!-- просто кнопка, не к теме, но открывает в новом окне, чтобы можно было изменять его размеры смотря в консоль на inputs -->
<input type="button" style="position:absolute;bottom:0;right:0" value="In new tab" onclick="var o=open('', '', '');o.document.write(document.documentElement.outerHTML);">
Хотя такое решение, не является *на самом деле* решением, поскольку в HTML следует хранить только данные, а не их представление.
У вас на самом деле одна форма, но вы хотите чтобы она по разному выглядела. С помощью CSS можно как угодно оформлять и переставлять элементы на странице.
http://www.mezzoblue.com/zengarden/alldesigns/ Пример одного HTML, и как его можно разными способами при помощи CSS преображать...
