Polymer Elements Form not submitting all fields

My code is as below.

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="/favicon.ico" type="image/png" />
        <title>configurator- Log in</title>

        <link rel="stylesheet" type="text/css" href="/public/stylesheets/style.css">
        <script nonce='d8c9ef6060da432f9a21d440196fa3e17adb185464944bb93fdd1809e02fa1' type="module">
            import('@polymer/iron-form/iron-form.js');
            import('@polymer/paper-input/paper-input.js');
            import('@polymer/paper-button/paper-button.js');
        </script>
        <meta charset="UTF-8">
    </head>
    <body>
       <header>
            <a href="/" class="logo"><img src="/images/logo.gif" alt="Logo"></a>
            <div>
                <h1>Router</h1>
                <h2>Log in</h2>
            </div>
    </header>
    <menu>
        <p><a href="/">Home</a></p>
        <p>Log in</p>
    </menu>
        <section id="_content">
            <div id="_flashes" class="flashes">
            </div>
            <form is="iron-form" allow-redirect method="post" id="_form" action="/login">
                <input type="hidden" name="_csrf" value="iNg6gJDo-k61QJuGnqA8DjEKttgFS6qyUGgo">
                <paper-input type="password" name="password" label="Password"></paper-input>
                <paper-button raised onclick="submitForm()">Log In</paper-button>
            </form>
            <script>
                function submitForm(e) {
                    document.getElementById("_form").submit();
                }
            </script>
        </section>
        <footer>
            Configurator version . &copy;2018
        </footer>
    </body>
</html>

When I click on the submit button, only the field named _csrf is transmitted. The paper-input field is not sent. What am I doing wrong? I have tried a lot of different suggestions from various web sites dealing Polymer, but none seem to be suitable. I notice from browsing the library that there is a submit function that gathers values from those elements where it is to be found in a the Shadow DOM and marshals it into dynamically-created hidden input fields prior to submitting the form. This function doesn't seem to be invoked in my case, and I haven't a clue why.

Solution

You are using a native form, that will pickup on the native elements and send them, and the only "plain" input you have there is _csrf.

I don't think the search goes "down" into the shadowDom to see that there's a input somewhere inside the definition of the paper input.

So you can either use all native inputs (which kind of defeats the purpose of using web compoentnts) or use another web component that "knows" how to handle this, for example wrapping your <form> into an <iron-form> and submit that one.