Formulario 2

 Ejercicio 34

Viendo las características de la siguiente página, resolverla de la misma manera


---

index.html

<!DOCTYPE html>

<html lang="es">

  <head>

    <title>Formulario de prueba</title>

  </head>

  <body style="background: lightcoral">

    <h1>Formulario de prueba</h1>

    <form id="form-order"> <!-- Formulario -->

      <p>

        <label for="name">Nombre (obligatorio) </label>

        <input

          type="text"

          name="name"

          id="name"

          placeholder="Dafne Perron"

          autofocus

          autocomplete

          required

        />

      </p>

      <p>

        <label for="passwd">Contraseña (obligatorio) </label>

        <input

          type="password"

          name="passwd"

          id="passwd"

          placeholder="qwe1234"

          pattern="[a-z]{3}[0-9]{4}"

          required

        />

        (la contraseña debe contener 3 letras y 4 numeros en dicho orden)

      </p>

      <p>

        <label for="phone">Teléfono (obligatorio) </label>

        <input

          type="tel"

          name="phone"

          id="phone"

          placeholder="+5490000000000"

          autocompleted

          required

        />

      </p>

      <p>

        <label for="email">E-mail </label>

        <input

          type="email"

          name="email"

          id="email"

          placeholder="example@gmail.com"

          autocomplete

        />

      </p>

      <p>

        <label for="website">Pagina Web </label>

        <input

          type="url"

          name="website"

          id="website"

          placeholder="http://www.example.ar"

          size="30"

        />

      </p>

      <p>

        <label for="numberexample">Número de temas </label>

        <input

          type="number"

          name="numberexample"

          id="numberexample"

          min="2"

          max="14"

          placeholder="2"

          step="2"

        />

        (entre 2 y 14, solo números pares)

      </p>

      <p>

        <label for="date">Fecha de envío </label>

        <input

          type="date"

          name="date"

          id="date"

          min="2020-01-01"

        />

        (mínimo el 1 de enero de 2020)

      </p>

      <p>

        <label for="colorexample">Color de item </label>

        <input

          type="color"

          name="colorexample"

          id="colorexample"

        />

      </p>

      <p>

        <label for="search">Buscar </label>

        <input type="search" name="search" id="search" />

      </p>

      <p>

        <label for="points">Rango de valores </label>

        <input type="range" name="points" id="points" min="1" max="10" /> (entre

        1 y 10)

      </p>

      <input type="submit" value="enviar" />

    </form>

  </body>

</html>

Comentarios