Materiales diseño inspirado controles de formulario-material-entrada

Vista prévia

Descripción

Material-INPUT es un componente web liviano y libre de dependencia que le permite crear campos de formulario inspirados en Google material Design utilizando Vanilla JavaScript y HTML/CSS.

Funcionamiento

Cargue los archivos webcomponents. js y material-INPUT necesarios en la Página Web.

<script src="webcomponentsjs/webcomponents.js"></script>
<script src="material-input.js"></script>

Cree campos de formulario de la siguiente manera:

<material-input name="name" label="name" autovalidate required></material-input>
<material-input name="username" label="Username" type="text" valid autovalidate required pattern=".{3,}"></material-input>
<material-input name="email" label="Email" placeholder="Your Email" type="email"></material-input>
<material-input name="password" type="password" placeholder="Placeholder" pattern=".{8,}"></material-input>
<material-input name="phone" label="Phone Number" placeholder="Your Phone Number" value="+49 12 345 678"></material-input>
<material-input name="address" label="Address" value="Baker Street" invalid
message="Are you Sherlock Holmes? Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."></material-input>

Estilo de los campos de formulario lo que quieras:

material-input[name=name] { font-size: 26px;
--accent-color: yellow;
 --material-input-text-color: orange;
 --material-input-highlight-color: indigo;
 --material-input-invalid-color: red;
 --material-input-valid-color: green;
 --material-input-border-color: gray;
 --material-input-line-height: 3px;
 --material-input-highlight-line-height: 8px;
}

material-input[name=password] {
 --accent-color: teal;
 --material-input-placeholder-color: gray; width: 200px; }