ポリマー-鉄フォーム

<iron-form>は、カスタム要素およびネイティブ要素を検証および送信するために使用されるHTML <form>要素です。 getメソッドとpostメソッドの両方がサポートされており、ironajax要素を使用してデータをアクションURLに送信します。

デフォルトでは、ネイティブボタン要素は次のフォームを送信します-

<form is = "iron-form" id = "form" method = "post" action = "/form/handler">
   <paper-input name = "password" label = "Password"></paper-input>
   <input name = "address">
   ...
</form>

次のコマンドに示すように、カスタム要素のクリックハンドラーからフォームを送信する場合は、フォームのsubmitメソッドを明示的に呼び出します。

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

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

次のコードは、サーバーに送信されるリクエストをカスタマイズする場合に、リッスンできるiron-form-presubmitイベントを示しています。

form.addEventListener('iron-form-presubmit', function() {
   this.request.method = 'put';
   this.request.params = someCustomParams;
});

例

iron-form要素を実装するには、必要な要素をインストールして、indexlファイルにインポートします。

次の例は、鉄フォーム要素の使用を示しています-

<!DOCTYPE html>
<html>
   <head>
      <title>iron-form</title>
      <base href = "https://polygit.org/polymer+1.5.0/components/">
      <script src = "webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel = "import" href = "polymer/polymerl">
      <link rel = "import" href = "iron-form/iron-forml">
      <link rel = "import" href = "paper-input/paper-inputl">
      <link rel = "import" href = "paper-button/paper-buttonl">
      <link rel = "import" href = "paper-dropdown-menu/paper-dropdown-menul">
      <link rel = "import" href = "paper-menu/paper-menul">
      <link rel = "import" href = "paper-item/paper-iteml">

      <style>
         .paperbtn {
            background: #4682B4;
            color: white;
         }
         .paperinput{
            width: 25%;
         }
         .menu{
            width:25%;
         }
      </style>
   </head>

   <body>
      <form is = "iron-form" method = "get" action = "/" id = "basic">
         <paper-input class = "paperinput" name = "name" label = "Enter your name" required<
         </paper-input>
         <br>
         <input type = "checkbox" name = "vehicle" value = "bike"> I have a bike
         <br>
         <input type = "checkbox" name = "vehicle" value = "car"> I have a car
         <br>

         <paper-dropdown-menu class = "menu" label = "Icecream Flavours" name = "Flavours">
            <paper-menu class = "dropdown-content">
               <paper-item value = "vanilla">Vanilla</paper-item>
               <paper-item value = "strawberry">Strawberry</paper-item>
               <paper-item value = "caramel">Caramel</paper-item>
            </paper-menu>
         </paper-dropdown-menu><br>

         <paper-button class = "paperbtn" raised onclick = "_submit(event)">Submit</paper-button>
         <paper-button class = "paperbtn" raised onclick = "_reset(event)">Reset</paper-button>
         <h4>You entered the details:</h4>
         <div class = "output"></div>
      </form>

      <script>
         function _submit(event) {
            Polymer.dom(event).localTarget.parentElement.submit();
         }
         function _reset(event) {
            var form  =  Polymer.dom(event).localTarget.parentElement
            form.reset();
            form.querySelector('.output').innerHTML  =  '';
         }
         basic.addEventListener('iron-form-submit', function(event) {
            this.querySelector('.output').innerHTML  =  JSON.stringify(event.detail);
         });
      </script>
   </body>
</html>

出力

アプリケーションを実行するには、プロジェクトディレクトリに移動し、次のコマンドを実行します。

polymer serve

ここでブラウザを開き、 http：//127.0.0.1：8081/ に移動します。出力は次のようになります。

鉄の形

Polymer-iron-form

ポリマー-鉄フォーム

例

出力