Como Crear un Formulario con Material Design (Responsive)

Nube Colectiva

hace 1 año

Demo Github

Los formularios son parte importante dentro de los diferentes medios o formas para comunicarse entre una organización o una celebridad con los usuarios. Material Design nos permite crear diferentes elementos siguiendo su propia base de estilos para una página web, entre estos elementos están los formularios y crear uno es fácil, solo debes entender como funciona y practicando lograrás dominarlo. En este tutorial te enseñaré a Como Crear un Formulario con Material Design (Responsive), vamos con ello.

Antes de continuar te invito a leer los siguientes artículos:

Asimismo, te invito a scuchar el Podcast: “Porque Algunos Desarrolladores no Terminan El Proyecto de Un Cliente” (En Spotify, Sound Cloud y Apple Podcasts)” y “ChatGPT ¿ Dejará sin empleo a los Desarrolladores ?” (Anchor Podcast):

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Bien ahora continuemos con el Post: Como Crear un Formulario con Material Design (Responsive).

Como Crear un Formulario con Material Design (Responsive)

Primero crearé un archivo con el nombre index.html y le agrego el siguiente código:


<div class="mdl-cell mdl-cell--8-col">
  <div class="mdl-cell mdl-cell--8-col">
    <div class="mdl-seccion-formulario mdl-card mdl-shadow--2dp">
      <div class="mdl-card__supporting-text">
        <h3 class="txt_formulario">Formulario de Contacto</h3>
        <form action="#">
          <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="text" id="nya" required>
            <label class="mdl-textfield__label" for="nya">Nombres y Apellidos</label>
          </div>
          <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="email" id="email" required>
            <label class="mdl-textfield__label" for="email">Email</label>
          </div>
          <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="text" id="telefono">
            <label class="mdl-textfield__label" for="telefono">Teléfono</label>
          </div>
          <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="text" id="asunto" required>
            <label class="mdl-textfield__label" for="asunto">Asunto</label>
          </div>
          <div class="mdl-textfield mdl-js-textfield frmensaje">
            <textarea class="mdl-textfield__input" type="text" rows="6" id="mensaje" required></textarea>
            <label class="mdl-textfield__label" for="mensaje">Mensaje</label>
          </div>
          <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"> Aceptar </button>
        </form>
      </div>
    </div>
  </div>
</div>

<h3 class="txt_formulario">Formulario de Contacto</h3>

<label class="mdl-textfield__label" for="nya">Nombres y Apellidos</label>

</div>

<label class="mdl-textfield__label" for="email">Email</label>

</div>

<label class="mdl-textfield__label" for="telefono">Teléfono</label>

</div>

<label class="mdl-textfield__label" for="asunto">Asunto</label>

</div>

<label class="mdl-textfield__label" for="mensaje">Mensaje</label>

</div>

<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"> Aceptar </button>

</form>

</div>

Ahora pasemos al código CSS, creamos un archivo llamado estilos.css y le agregamos el siguiente código (Recuerda que puedes usar @media queries para personalizar el diseño responsive para otros tamaños de pantalla):


.mdl-seccion-formulario.mdl-card {
  width: 100%;
}

.mdl-seccion-formulario > .mdl-card__menu {
  color: #444444;
}

.txt_formulario {
  text-align: center;
  font-family: "Roboto","Helvetica","Arial",sans-serif;
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
  color: inherit;
  font-size: 24px;
  font-weight: 300;
  line-height: normal;
  overflow: hidden;
  -webkit-transform-origin: 149px 48px;
  transform-origin: 149px 48px;
  margin: 0;
}

.frmensaje {
  width: 100%;
}

.mdl-seccion-formulario.mdl-card {

width: 100%;

}

.mdl-seccion-formulario > .mdl-card__menu {

color: #444444;

}

.txt_formulario {

text-align: center;

font-family: "Roboto","Helvetica","Arial",sans-serif;

-webkit-align-self: flex-end;

-ms-flex-item-align: end;

align-self: flex-end;

color: inherit;

font-size: 24px;

font-weight: 300;

line-height: normal;

overflow: hidden;

-webkit-transform-origin: 149px 48px;

transform-origin: 149px 48px;

margin: 0;

}

.frmensaje {

width: 100%;

}

Entonces si vamos al navegador podemos que nuestro formulario se ha creado correctamente:

Al inicio de este Post he colocado una Demo para que veas el proyecto en acción, asimismo he colocado un enlace a un repositorio de GitHub en donde puedes encontrar todo el código del proyecto.

Nota: Recuerda que puedes usar @media queries para personalizar el diseño responsive para otros tamaños de pantalla.

Conclusión

En este post has aprendido a como crear un formulario con Material Design, aprender a como hacerlo te servirá de base para crear formulario más complejos con Material Design.

Nota(s)

No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.