logo

Estructura de básica de una web e input autorellenable

octubre 1, 2021, Sin comentarios

En esta entrada vamos a enseñar cómo es la estructura básica de una página web en HTML5 y cómo hacer un input autorellenable que te muestra sugerencias.

Comenzamos con la estructura:

<!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>Document</title>

</head>

<body>

    <header></header>

    <nav></nav>

    <div></div>

    <aside></aside>

    <footer></footer>

</body>

</html>

Todo el cuerpo de una página web como contenido, imágenes... se coloca dentro de la etiqueta <body></body>

Input autorellenable

Para construir un Input con una lista de datos predefinidos tenemos que seguir los siguientes pasos:

Crear un input de tipo texto con el atributo list=”nombre de la lista”

<input type="text" name="lista" id="lista" list="milistapersonal">

Crear una un datalist donde el id sea el mismo que el atributo list que le hemos puesto al input anterior

<datalist id="milistapersonal">
 <option value="dato1"></option>
 <option value="dato2"></option>
 <option value="dato3"></option>
 <option value="dato4"></option>
 <option value="dato5"></option>
</datalist>

Esto sería todo para crear un input con una lista de datos. Os dejamos el ejemplo completo:

<!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>DATALIST</title>

</head>

<body>

   <form action="">

       <input type="text" name="lista" id="lista" list="milistapersonal">

       <datalist id="milistapersonal">

           <option value="dato1"></option>

           <option value="dato2"></option>

           <option value="dato3"></option>

           <option value="dato4"></option>

           <option value="dato5"></option>

       </datalist>

   </form>

</body></html>

¿Quieres compartirlo en las redes sociales?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

No hay comentarios, anímate y deja el primero.

SERVICIOS
PRODUCTOS
clicktec logolocustec
CONTACTO
Horario: Lunes a viernes de 8.30 a 14.00h y 16.00 a 19.30h
Av. de Andalucía, 56, B, bajo, 23006 Jaén – Españainfo@deditec.es(+34) 953 195 077
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram