Síntesis de la clase 4: Crear nueva contraseña: HTML

Haremos uso de formularios para facilitarnos el trabajo.

Primero, declararemos encima de todo, un div que contendrá los elementos que tendrán que ver con mencionada labor:

<div class="login"></div>

Dentro, colocaremos otro div, este envolverá elementos estéticos como el logo y algunos títulos, así como nuestro formulario en sí.

<div class="login">
    **<div class="form-container"></div>**
</div>

Ahora que ya tenemos los andamios de esta página, comenzamos a añadir los elementos visuales.

<div class="login">}
		**<img src="" alt="logo">**
    **<h1 class="title">Create new password</h1>
    <p class="subtitle">Enter a new password for your account</p>**
    <div class="form-container"></div>
</div>

¡Con logo incluido!. Te preguntarás, ¿Para que tanto “class=”abcde””?, bueno, cuando definamos los estilos esto cobrará sentido, ya que no tendremos que ir elemento por elemento copando y pegando sino que le asignaremos estilos a cada nombre de clase, luego cada elemento, irá a buscar los estilos que definamos para el nombre de su clase.

Hecho esto, añadiremos los campos de texto y botón. de envío

<div class="login">
    <img src="" alt="logo">

    <h1 class="title">Create new password</h1>
    <p class="subtitle">Enter a new password for your account</p>
    <div class="form-container">
        **<label for="password" class="label">Password</label>
        <input type="password" id="password" placeholder="********" class="input input-password">

        <label for="new-password" class="label">New Password</label>
        <input type="password" id="new-password" placeholder="********" class="input input-password">

        <input type="submit" name="Confirm" class="primary-button login-button">**
    </div>
</div>

Como ves, usamos la etiqueta <input> tres veces, pero no siempre se muestra el mismo elemento en la pantalla. El tipo de elemento que el navegador dibujará, depende en gran medida del atributo “type” que especifiquemos.

En este recurso, puedes encontrar aún más “type”s que puedes usar: https://www.w3schools.com/html/html_form_input_types.asp