Часто возникают случаи, когда дизайн требует вложить форму в форму.

Форма в форме

Stfw.Ru: Можно, конечно, использовать слой (<div>) и указать ему абсолютные или относительные координаты что бы влепить его внутри главной формы, но такой вариант, при использовании разных браузеров, вызывает только головную боль. Решение есть гораздо проще - использовать поля основной формы для передачи из них данных в скрытую форму с последующим её подтверждением. Такой вариант визуально позволяет разместить форму внутри формы без каких-либо ограничений и требований к HTML-коду. Итак, пример страницы:

<html>
<head>
<script language="JavaScript"> function SIF () { document.InternalForm.input4.value = document.MainForm.input4.value; document.InternalForm.input5.value = document.MainForm.input5.value; document.InternalForm.submit(); }
</script>
</head>
<body> <form action="http://script1/" method="post" name="MainForm"> <input type="text" name="input1"><br> <input type="text" name="input2"><br>

<!- Вложенная форма -> <input type="text" name="input4"><br> <input type="text" name="input5"><br> <input type="button" name="input6" onclick="javascript:SIF();"><br>
<!- Конец вложенная форма ->
 <input type="text" name="input7"><br> <input type="text" name="input8"><br> <input type="submit" name="submit"> </form>

<!- Скрытая форма ->
<form action="http://script2/" method="post" name="InternalForm"> <input type="hidden" name="input4"> <input type="hidden" name="input5">
</form>
<!- Конец скрытая форма ->
</body>
</html>

Как видно из представленного кода, во вторую форму передаются только два поля (input4 и input5). На самом деле количество полей не имеет значения, лишь бы имена полей не пересекались между собой. Так же не имеет ни малейшего значения тип тега input, будь то radio или checkbox, то же самое относится и к тегам select и textarea.

HTML   Теги: Html



Редакция портала:

Благодарим за просмотр этой информации на нашем компьютерном портале. Надеемся, что обзор Форма в форме, в разделе HTML вам понравился. Есть небольшая рекомендация, если вы хотите быть в курсе всех событий сферы информационных технологий, то рекомендуем зарегистрироваться на портале www.stfw.ru.


Живая лента

•  The Station: наблюдение за наблюдателями - 24.02.2018: STFW.Ru: Действие большинства интерактивных историй происходит в удаленном


•  Дизельная дуель: Mazda CX-5 против SEAT Ateca - 24.02.2018: STFW.Ru: В прошлом кроссоверы Mazda CX-5 и SEAT Ateca уже были героями публикаций, но теперь


•  Разработчик с помощью платформы Apple ARKit воссоздал культовую сцену из фильма ужасов «Звонок» в дополненной реальности - 24.02.2018: STFW.Ru: Разработчик Абхишек Сингх (@shekitup) опубликовал на своей страничке в Twitter


•  Новые SoC Qualcomm Snapdragon с модемами 5G будут производиться по 7-нанометровому техпроцессу на мощностях Samsung, а не TSMC - 24.02.2018: STFW.Ru: Компании Samsung и Qualcomm опубликовали официальное заявление, а вернее – два


•  В сеть попали официальные рендеры и характеристики планшета Huawei MediaPad M5, который представят на MWC 2018 - 24.02.2018: STFW.Ru: До начала выставки MWC 2018 остаются считанные дни, так что производителям


•  В Final Fantasy XV для ПК будет костюм Гордона Фримена из Half-Life и демо-версия с первой главой - 24.02.2018: STFW.Ru: В скором времени поклонникам игры Final Fantasy XV станет доступна версия Final