No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Materialize

Curso de Materialize

Diego De Granda

Diego De Granda

Desarrollo del formulario de registro

14/17
Recursos

Aportes 14

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Totalmente valido copiar, el curso es de Materize pero para las prácticas personales pueden usar PUG del curso de preprocesadores y no repetir.
Saludos!

Creo que al profe se le paso corregir el type=text del input de contraseña a type=password para que al escribir sobre el campo aparezcan los circulitos, pero fue una excelente clase!

Me gusta como esta quedando el formulario

Don’t repeat yourself: Es aconsejable tener dividido el codigo en componentes para no repetir el mismo codigo en las demas paginas. Por este momento, es válido porque solo se esta usando HTML y CSS

  • Aplicar hide al section de la imagen principal para que no aparezca en nuestro registro.html

  • class container delimitara la zona del contenido y se ajustara al tamaño del nav

  • HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aviation News</title>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>

    <!-- HEADER -->
    <header>
        <nav class="container">
            <a href="#" class="brand-logo valign-wrapper"><!-- valing-wrapper centra verticalemnte el contenido -->
                <img src="assets/img/Logo.jpg" class="responsive-img left z-depth-2" alt="Logo"> <!-- make responsive images -->
            </a>

            <ul class="right valign-wrapper">
                <li><a href="">About us</a></li>
                <li><a href="">Contact us</a></li>
                <li><a class="btn" href="registro.html">Register</a></li>
            </ul>
        </nav>

        <!-- Promotional image -->

        <section class="header-main-pic z-depth-2 hide">

        </section>

        <!-- TITLE -->

        <section class="container">
            <div class="row registro-titulo">
                <div class="col s12">
                    <h1 class="center-align">Register in Aviation News</h1>
                </div>
            </div>
        </section>
    </header>

    <!-- END OF HEADER -->

    <!-- MAIN -->

    <main class="container">

       <div class="row">
           <div class="col s12">
               <div class="card-panel">
                   <form action="">

                       <div class="row section">
                           <div class="input-field col s12 m6">
                               <input type="text" id="first-name" class="activate">
                               <label for="first-name">Name</label>
                            </div>
                           <div class="input-field col s12 m6">
                               <input type="text" id="last-name" class="activate">
                               <label for="last-name">Last Name</label>
                            </div>
                       </div>

                       <div class="row">
                            <div class="input-field col s12 m6">
                                <input type="text" id="email" class="activate">
                                <label for="email">Email</label>
                            </div>
                            <div class="input-field col s12 m6">
                                <input type="password" id="password" class="activate">
                                <label for="password">Password</label>
                            </div>
                       </div>

                   </form>
               </div>
           </div>
       </div>


    </main>

    <!-- END OF MAIN -->

    <footer class="page-footer"></footer>


<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
  • Clase que da estilo a una caja de un formulario
    card-panel

  • Clase que da estilo a una caja de un input
    input-field

  • Alinea al centro un texto
    center-align

Me encanto el formulario

Estuvo bacán este formulario limpio y agradable

Don’t repeat your self

¿¿Para qué es exactamente la clase “Section”??

Va quedando muy cool ♥

Otro pequeño detalle no olviden cambiar el link del reader de registro en el resto de las páginas.

Don’t repeat yourself!

En la parte del password, deben cambiar el TYPE para que lo que se escriba sea cifrado

                <input id="password" type="password" class="validate">

s