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>
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?
No hay comentarios, anímate y deja el primero.
