El complemento de formulario de material jQuery es un complemento de forma jQuery de diseño de material basado en bootstrap. Esta forma cambia la forma de Bootstrap a una forma de estilo plano a través de estilos personalizados y jQuery, con efectos de etiqueta flotantes.
Descargar código fuente de vista previa en línea
Cómo usar
El uso de este formulario de estilo de diseño de material requiere la introducción de jQuery, archivos relacionados con Bootstrap, MaterialFormStyles.css, MaterialForm.js archivos en la página.
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"> <link rel = "stylesheet" href = "css/materialformstyles.css"> <script " src = "js/jquery.min.js"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"> </script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"> </script> <script src = "js/materialform.js"> </script>
Estructura html
La estructura HTML del formulario de estilo de diseño de material es fija, puede copiar el siguiente código.
<div id = "FormoutterWrapper"> <Div id = "FormOnnerWrapper"> <Form ID = "MaterialForm" Method = "Post" Action = "role =" Form "Autocomplete =" Off "> <Div> <Viv> <Label For =" FirstName "> Nombre de usuario </Label> <Tipo de entrada =" Texto "Id =" Nombre "Nombre de primer nombre =" FirstName "> </Div Div> <DivIname" for="lastName">Nickname</label><input type="text" id="lastName" name="lastName"></div></div><div><div><label for="email">Email</label><input type="text" id="email" name="email"></div><div><label for="phone">Telephone</label><input type="tel" id="phone" name = "Phone"> </div> </div> <div> <div> <label for = "Descripción"> Proyecto Descripción </etiqueta> <input type = "text" id = "descripción" name = "description"> </div> </div> <div> <div> <boton type = "button" id = "enviar"> enviar </botón> </div> </div> </form> </div> </div>
La dirección de GitHub de este complemento de formulario es: https://github.com/ch0chi/jquery-form-plugin