Бумажная кнопка с типом = "отправить" в форму не отправляет?

Ответ 1

Как заметил Гюнтер, вы можете создать пользовательский элемент, который расширяет часть собственного элемента с помощью вашей желаемой семантики.

Я тоже столкнулся с вашей проблемой, и я создал простой элемент, который дает возможность отправлять paper-button

<polymer-element name="paper-button-submit" extends="button" noscript>
  <template>
    <style>
      :host {
        border: 0;
        background: transparent;
        padding: 0;
        font-size: inherit;
      }
    </style>
    <paper-button>
      <content></content>
    </paper-button>
  </template>
</polymer-element>

Затем вы можете написать это

<button type="submit" is="paper-button-submit">Add</button>

И получится кнопка с бумажным видом

Ответ 2

Вы можете получить форму отправки, поместив встроенную кнопку внутри элемента кнопки:

<paper-button>
  <button>Sign Up</button>
</paper-button>

Затем используйте следующий CSS, чтобы скрыть встроенную кнопку, гарантируя, что hitzone заполнит весь элемент кнопки:

<style shim-shadowdom>
  paper-button {
    padding:0;
  }
  paper-button::shadow .button-content {
    padding:0;
  }
  paper-button button {
    padding:1em;
    background-color: transparent;
    border-color: transparent;
  }
  paper-button button::-moz-focus-inner {
    border: 0;
  }
</style>

Ответ 3

Уже было обсуждено использование полимерных элементов, содержащих элементы формы в форме в группе Polymer Google, и, насколько я помню, я ответил на аналогичный вопрос здесь, на SO (я сделаю некоторое исследование впоследствии).

1) Вы можете расширить элемент ввода

<polymer-element name="my-element" extends="input">
   ...
</polymer-element>

и используйте его как

<input is="my-element">

2) Вы можете выполнить обработку формы в пользовательском коде

(прочитайте значения из элементов формы и создайте вызов AJAX для отправки данных на сервер)

3) Создайте пользовательский элемент формы (расширяет второй)
который обрабатывает форму и вызов AJAX

Первая опция не применима к элементам core-elments/paper, потому что они не расширяют <input> (или любой другой элемент формы), а вставляют его. Это относится к элементам ввода формы, а также к кнопке отправки формы.

Некоторые более или менее связанные темы

• Полимер Google Group - полимерный элемент как элемент ввода формы
• Получение HTML5 для работы в форме с несколькими компонентами полимерного дротика
• Блог Сета Лэдда - Формы, HTTP-серверы и Полимер с Дартом
• Поле формы Dart Polymer не показывает ошибки проверки
• Как вы получаете входные данные HTML5 для проверки, находятся ли они в веб-компонентах Polymer?

Что вы можете сделать, если только кнопка отправки является элементом Polymer, вызывается метод click() на невидимой (неполимерной) кнопке отправки в обработчике кликов <paper-button> подробнее см. - Полимер: вручную отправляет форму

Ответ 4

Нет необходимости создавать пользовательский элемент. В соответствии с docs рекомендуется следующее apporach:

<paper-button raised onclick="submitForm()">Submit</paper-button>

function submitForm() {
  document.getElementById('form').submit();
}

поэтому вы просто привязываете событие onclick к функции, которая вручную отправляет вашу форму.

UPDATE

Хотя в предыдущем примере из iron-form используется onclick событие рекомендуется использовать on-tap над on-click:

Совет. Используйте on-tap вместо on-click для события, которое срабатывает последовательно на обоих сенсорных (мобильных) и нажимаемых (настольных) устройствах.

Также неплохо использовать Полимеры собственный DOM API:

function submitForm(e) {
  Polymer.dom(e).localTarget.parentElement.submit();
}