Native Form with Polymer and Material Design

by jorgeluis

HTML

<base href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0/lib/">
<link rel="import" href="iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-input/paper-input.html">
<link rel="import" href="paper-input/paper-textarea.html">
<link rel="import" href="paper-styles/color.html">

<style is="custom-style">
  body {
    @apply(--layout-vertical);
    @apply(--layout-center-center);
  }
  button {
    margin-top: 24px;
  }
  button.no-style {
    background-color: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    -webkit-appearance: none;
  }
  button.no-style::-moz-focus-inner {
    border: 0;
  }
  form {
    @apply(--layout-vertical);
    @apply(--layout-center);
  }
  h1 {
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    margin: 24px 0;
  }
  paper-button {
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    min-width: 88px;
    min-height: 36px;
    margin: 0;
    padding: 6px 16px;
  }
  paper-button.indigo {
    background-color: var(--paper-indigo-500);
    color: #fff;
    text-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.2);
  }
  paper-button.indigo:hover {
    background-color: var(--paper-indigo-400);
  }
  paper-input[autocomplete] {
    --paper-input-container-input: {
      /* Remove autocomplete highlight color in Chrome
         http://stackoverflow.com/a/36140769 */
      -webkit-transition: background-color 0s ease-in-out 50000s, color 0s ease-in-out 5000s;
    };
  }
  paper-textarea {
    width: 100%;
  }
</style>

<h1>Native Form with Polymer and Material Design</h1>

<form action="https://eu.httpbin.org/get" method="get">

  <paper-input name="name" label="Name" auto-validate required></paper-input>
  
  <paper-input name="email" label="Email" auto-validate required 
      autocomplete="email"
      pattern="[^@\s]+@[^@\s]+\.[^@\s]+"
      error-message="Invalid email address."></paper-input>

  <paper-textarea...

CSS

body {
  font-family: 'Roboto', 'Noto', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

JavaScript

var webComponentsSupported = (
  'registerElement' in document
  && 'import' in document.createElement('link')
  && 'content' in document.createElement('template')
);
// Load webcomponents.js polyfill if browser doesn't support native Web Components.
if (!webComponentsSupported) {
  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://cdn.rawgit.com/download/polymer-cdn/1.7.0/lib/webcomponentsjs/webcomponents-lite.min.js';
  document.head.appendChild(script);
}