Как заставить HTML5 работать в форме с несколькими компонентами полимерного дротика

Я читал блог Сета Лэдда по адресу http://blog.sethladd.com/2013/09/forms-http-servers-and-polymer-with-dart.html

Допустим, я добавляю еще один компонент формы (Form2), повторяя шаги 3 и 4, а затем импортирую Form2 на шаге 5. Таким образом, шаг 5 должен выглядеть как код ниже:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Sample app</title>
    <link rel="stylesheet" href="parse_form_submit.css">
    <link rel="import" href="person_form.html">
    <script src="packages/polymer/boot.js"></script>
 </head>
 <body>
   <h1>Forms</h1>

<!-- Due to a bug in polymer, we can't use custom attributes.
     See https://code.google.com/p/dart/issues/detail?id=12262
     <person-form action="http://localhost:8888/submit"></person-form>
-->

<!-- in the meantime -->
    <person-form></person-form>
    <form-2><form-2>

  </body>
</html>

Куда мне теперь поместить кнопку "Отправить" - в одну из форм или в родительскую, в которую импортируются формы? В любом случае, как мне получить автоматическую проверку и т. д. с помощью htnl5 при нажатии кнопки отправки? Все работает нормально для одной формы, которая содержит собственную кнопку отправки внутри тега, но не так, когда кнопка отправки размещена вне тега.

Спасибо


person st_clair_clarke    schedule 21.11.2013    source источник


Ответы (1)


Предполагая, что и person-form, и form-2 являются инкапсулированными формами, каждая из них будет иметь свою собственную кнопку отправки.

Я не думаю, что тег <form> заглянет в Shadow DOM, чтобы найти поля внутри пользовательского элемента. Так что лучше думать об этом так:

my-special-form extends form

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

person Seth Ladd    schedule 30.01.2014