Web Developer Fundamentals
Qué aprenderás sobre HTML y CSS
¿Qué es el Frontend?
¿Qué es Backend?
¿Qué es FullStack?
Páginas Estáticas vs. Dinámicas
Quiz: Web Developer Fundamentals
HTML
HTML: anatomía de una página web
Index y su estructura básica: head
Index y su estructura básica: body
Reto: crea tu lista de compras del supermercado
Anatomía de una etiqueta de HTML
Quiz: HTML
Etiquetas multimedia
Tipos de imágenes
Optimización de imágenes
Etiqueta img
Etiqueta figure
Etiqueta video
Quiz: Etiquetas multimedia
Formularios
Etiqueta form e input
Calendar
Autocomplete y require
Select
Input type submit vs. Button tag
Quiz: Formularios
CSS
¿Qué es CSS?
¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID
Pseudo clases y pseudo elementos
Anatomía de una regla de CSS
Modelo de caja
Herencia
Especificidad en selectores
Demo de especificidad y orden en selectores
Más sobre selectores
Combinadores: Adjacent Siblings (combinators)
Combinadores: General Sibling
Combinadores: Hijo y Descendiente
Medidas
Medidas EM
Medidas REM
Max/Min width
Position
Display
Desafío: Layout 1
Display Flex
Flexbox layouts
Variables
Web fonts
Quiz: CSS
Responsive Design
Responsive design: media queries
Estrategias de responsive: mostly fluid
Implementando mostly fluid
Layout shifter CSS
Column drop
Buenas prácticas y ejemplos de responsive
Imágenes responsive
Quiz: Responsive Design
Accesibilidad
Semántica
Textos
Labels, alt y title
Próximos pasos
Próximos pasos como Web Developer
Bonus: tabla de etiquetas HTML
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 239
Preguntas 71
Para crear inputs con una lista de varias opciones, se puede desarrollar de dos maneras diferentes:
.
Etiqueta <select>: Esta permite crear la lista, con las etiquetas <option>:
.
.
Etiqueta <input list = “”>: De este modo, se puede utilizar una etiqueta <datalist> con etiquetas <option> dentro del input. De este modo, el usuario puede escribir dentro del input, y filtrar los resultados de la lista:
.
Input list permite seleccionar por búsqueda 😃
Y pensar que existimos salvajes que hacíamos esto con Javscript 😣
Les comparto este link para estilizar nuestros Select 👉🏼 Dropdown Default Styling
Hola!, no concuerdo con que la forma ideal de presentar opciones sea mediante un datalist, usar datalist es muy útil para algunos formularios pero en la mayoría de casos que se me han presentado como desarrollador el select en mi opinión es la opción mas aduecuada a utilizar, en especial cuando la lista de elementos es reducida, el value de las options es un id de base de datos o algo por el estilo. Usar un datalist generalmente hace que el usuario cometa mas errores cuando el valor seleccionado debe existir en la lista de opciones, normalmente porque escriben con algún error o escriben incompleta la opción. También por parte del desarrollo puede generar bugs debido a que la validación de estas opciones depende del desarrollador. En conclusión creo que el datalist es el elemento a utilizar en casos donde la lista de elementos es grande y se vuelve muy engorroso para el usuario hacer el scroll para escoger una opción.
Ya viene la mejor parte, poder animar los botones y lograr algo así:
<main>
<fieldset>
<legend><b>Input list</b> (recomendado para muchas opciones)</legend>
<form action="">
<input list="cursos1">
<datalist id="cursos1">
<option value="Javascript"></option>
<option value="HTML"></option>
<option value="CSS3"></option>
<option value="Web Standards"></option>
</datalist>
</form>
</fieldset>
<br>
<fieldset>
<legend><b>Select</b> (recomendado para pocas opciones)</legend>
<form action="">
<select name="" id="">
<option value="Javascript">Javascript</option>
<option value="HTML">HTML</option>
<option value="CSS3">CSS3</option>
<option value="Web Standards">Web Standards</option>
</select>
</form>
</fieldset>
</main>
Apuntes de la clase:
.
ESTO ES LARGO PERO NECESARIO
Yo puse mi código asi
<input list=“cursos”>
<datalist id=“cursos”>
<option value=“JavaScript” />
<option value=“HTML5” />
<option value=“CSS3” />
</datalist>
Y en mi navegador no me renderizaba, solo me mostrava una caja de texto.
Pensaba que había un error o mi navegador.
Entendí el verdadero problema.
Estaba haciendo los dos formularios en el mismo documento y debido en la etiqueta <SELECT> del primer formulario el atributo era name=“cursos”, esto el navegador lo confundio con el segundo código que tenia por igual <input list=“cursos”> a pesar de estar señarados por el FORM,
Lo renderizo al poner <input list=“cursos2”>
Agregado fomulario de selección <select> e <input list> y saltos de linea <br> en cada input para una vista más agradable.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista del Super</title>
<meta name="description" content="No olvides lo que debes comprar en el super" />
<meta name="robots" content="index, follow" />
</head>
<body>
<header>
</header>
<main>
<section>
<h1>¡Soy la lista del super!</h1>
<h2>Listado de productos a comprar:</h2>
<ul>
<li>Frutas:</li>
<ol>
<li><a href="https://www.pequerecetas.com/receta/manzana-18-recetas/">Manzana</a></li>
<figure>
<img src="./images/manzanas.png" alt="Deliciosas manzanas" width="100">
<figcaption>Manzana roja o verde</figcaption>
</figure>
<li><a href="https://www.directoalpaladar.com/recetario/aprovechar-platanos-maduros-recetas-bizcochos-tartas-helados">Platano</a></li>
<figure>
<img src="./images/platanos.png" alt="Deliciosos Platanos" width="100">
<figcaption>Platanos dulces</figcaption>
</figure>
</ol>
<li>Carnes:</li>
<ol>
<li><a href="https://www.cocinacaserayfacil.net/recetas-con-pollo/">Pollo</a></li>
<figure>
<img src="./images/pollo.png" alt="Delicioso Pollo" width="100">
<figcaption>Carne de pollo</figcaption>
</figure>
<li><a href="https://www.cocinafacil.com.mx/recetas/recetas-de-carne-molida/">Carne Molida</a></li>
<figure>
<img src="./images/carne-molida.png" alt="Deliciosa carne molida" width="100">
<figcaption>Carne de res</figcaption>
</figure>
</ol>
<li>Verduras:</li>
<ol>
<li><a href="https://www.directoalpaladar.com/directo-al-paladar/11-recetas-limon-irresistibles-todos-tiempos">Limón</a></li>
<figure>
<img src="./images/limon.png" alt="Delicioso limon" width="100">
<figcaption>Limon</figcaption>
</figure>
<li><a href="https://www.directoalpaladar.com/ingredientes-y-alimentos/nuestras-mejores-47-recetas-zanahoria">Zanahoria</a></li>
<figure>
<img src="./images/zanahoria.png" alt="Deliciosa zanahoria" width="100">
<figcaption>Zanahoria</figcaption>
</figure>
</ol>
</ul>
</section>
<section>
<h2>Video explicativo de Compras:</h2>
<figure>
<video src="images/1- Presentación del curso.mp4" controls preload="auto" width="400" height="225"></video>
<figcaption>Video en detalle como hacer compras</figcaption>
</figure>
</section>
<section>
<figure>
<h2>Formulario Responsable de Compra:</h2>
<form action="">
<label for="nombre-resposable">
<span>¿Cuál es el nombre del responsable?</span>
<input type="text" id="nombre-responsable" placeholder="Introduce tu nombre"><br>
</label>
<label for="dia-compra">
<span>Fecha que se hará la compra</span>
<input type="date" id="dia-compra"><br>
</label>
<label for="hora-compra">
<span>Hora en que se hará la compra</span>
<input type="time" id="hora-compra"><br>
</label>
</form>
</figure>
</section>
<section>
<figure>
<h2>Formulario Calendar</h2>
<form action="">
<label for="hora">
<span>Horario de Viaje</span>
<input type="time" id=hora name=hora><br>
</label>
<label for="dia">
<span>Día del Viaje</span>
<input type="date" id=dia name=dia><br>
</label>
<label for="semana">
<span>Semana del Viaje</span>
<input type="week" id=semana name=semana><br>
</label>
<label for="mes">
<span>Mes de Viaje</span>
<input type="month" id=mes name=mes>
</label>
<input type="submit">
</form>
</figure>
</section>
<section>
<figure>
<h2>Formulario Calendar Completo</h2>
<form action="">
<label for="calendario">
<span>Calendario Completo</span>
<input type="datetime-local" id="calendario" name="calendario">
</label>
<input type="submit" value="Me voy de viaje">
</form>
</figure>
</section>
<section>
<figure>
<h2>Formulario con Autocompletado:</h2>
<form action="">
<label for="nombre">
<span>¿Cuál es tu nombre?</span>
<input type="text" name="nombre" id="nombre" autocomplete="name" required><br>
</label>
<label for="correo">
<span>¿Cuál es tu email?</span>
<input type="email" name="correo" id="correo" autocomplete="email" required><br>
</label>
<label for="pais">
<span>¿Cuál es tu país?</span>
<input type="text" name="pais" id="pais" autocomplete="country" required><br>
</label>
<label for="cp">
<span>¿Cuál es tu código postal?</span>
<input type="text" name="cp" id="cp" autocomplete="postal-code" required>
</label>
<input type="submit">
</form>
</figure>
</section>
<h2>Crear Lista con Comando Select - No recomendado</h2>
<section>
<figure>
<form action="">
<select name="destinos" id="">
<option value="España">España</option>}
<option value="Alemania">Alemania</option>
<option value="Suiza">Suiza</option>
<option value="Japón">Japón</option>
<option value="Suecia">Suecia</option>
<option value="Zimbabue">Zimbabue</option>
<option value="Chile">Chile</option>
<option value="México">México</option>
<option value="Perú">Perú</option>
<option value="Venezuela">Venezuela</option>
<input type="submit" >
</select>
</form>
</figure>
</section>
<h2>Creación de Lista con Datalist - Práctica recomendada</h2>
<section>
<figure>
<form action="">
<input list="destinos2" name="destinos2">
<datalist id="destinos2">
<option value="España"></option>
<option value="Alemania"></option>
<option value="Suiza"></option>
<option value="Japón"></option>
<option value="Suecia"></option>
<option value="Zimbabue"></option>
<option value="Chile"></option>
<option value="México"></option>
<option value="Perú"></option>
<option value="Venezuela"></option>
</datalist>
<input type="submit">
</form>
</figure>
</section>
</main>
<footer>
<p>Creado con amor por Orlando Altamiranda con ayuda del Team Platzi</p>
</footer>
</body>
</html>
Este curso me hace ver lo mal que estan muchas paginas y como pudieron ahorrarse tiempo y esfuerzo de esta manera, para los empiricos sin ofender, por eso es importante estudiar. porque el tiempo que tardas intentando lo inviertes aprendiendo directamente.
Utilize la etiqueta <datalist> pero con todos los estados de México
<span>Selecciona tu estado</span>
<input list="estados">
<datalist id="estados">
<option value="Aguascalientes"></option>
<option value="Baja California"></option>
<option value="Baja California Sur"></option>
<option value="Campeche"></option>
<option value="Chiapas"></option>
<option value="Chihuahua"></option>
<option value="Ciudad de México"></option>
<option value="Coahuila"></option>
<option value="Colima"></option>
<option value="Durango"></option>
<option value="Guanajuato"></option>
<option value="Guerrero"></option>
<option value="Hidalgo"></option>
<option value="Jalisco"></option>
<option value="Estado de México"></option>
<option value="Michoacán"></option>
<option value="Morelos"></option>
<option value="Nayarit"></option>
<option value="Nuevo León"></option>
<option value="Oaxaca"></option>
<option value="Puebla"></option>
<option value="Querétaro"></option>
<option value="Quintana Roo"></option>
<option value="San Luis Potosi"></option>
<option value="Sinaloa"></option>
<option value="Sonora"></option>
<option value="Tabasco"></option>
<option value="Tamaulipas"></option>
<option value="Tlaxcala"></option>
<option value="Yucatán"></option>
<option value="Zacatecas"></option>
</datalist>
También sería una buena practica dentro del input agregar un placeholder=“Selecciona un Curso”. 😃
Anotaciones:
🤔 <select> permite crear un elemento desplegable con elementos dentro de el.
No me sabia esa de <input list=“cursos”>, muy bueno y es mas cómodo para uno de usuario que la mayor parte del tiempo se hacen los formularios en dispositivos móviles! Gracias!!
Aqui todos los atributos de Select y lo que puede contener dentro de las etiquetas:
https://developer.mozilla.org/es/docs/Web/HTML/Elemento/select#:~:text=El elemento select (,estar%20preseleccionada%20por%20el%20usuario.
Les recomiendo hacer un resumen e insertar clml comentario en sus prácticas, o bien solo el enlace.
Algo muy colombiano jeje
Y yo que dudaba si hacer este curso porque pensaba que sabia lo necesario. Pero nunca es suficiente o.O
Cordial saludo comunidad
Quiero compartirles una opción que pueden revisar más adelante (manejo de librerias) para sugerir al usuario @gmail, @hotmail etc. como lo hace mercadolibre al momento del login, para que lo tengan en su radar de aprendizaje.
https://platzi.com/blog/librerias-autocompletado-html5/
Opción: Awesomplete
Slds.
Este video me ha gustado mucho, bueno creo que en todo lo que va del curso se ha aprendido mucho a pesar de no llevar tantos videos. Eso me parece muy bien, se ha mostrado lo básico pero se sale de lo que se ha enseñado en otros cursos.
Sigamos aprendiendo!! 😎😎
Amigos tomen buenas notas y practiquen mucho, después de varios meses hoy vuelvo a este curso para recordar este tema por un formulario que estoy creando.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form-04</title>
</head>
<body>
<main>
<h1>Select Normal</h1>
<h2>¿Qué curso deseas estudiar?</h2>
<select name="cursos" id="">
<!-- El atributo "value" es la info que se va a enviar. -->
<option value="JavaScript">JavaScript</option>
<option value="HTML:5">HTML:5</option>
<option value="CSS3">CSS3</option>
<option value="Web Standards">Web Standards</option>
</select>
<br />
<br />
<h1>Select Buenas Prácticas</h1>
<h2>¿Qué curso deseas estudiar?</h2>
<input list="cursos" />
<!-- Los atributos "list" y "id" deben ser los mismos. -->
<datalist id="cursos">
<!-- Dentro de la etiqueta "datalist" colocamos las opciones. En "option" solo colocamos
el "value" sin el nombre dentro de la etiqueta. -->
<option value="JavaScript"></option>
<option value="HTML:5"></option>
<option value="CSS3"></option>
<option value="Web Standards"></option>
<!-- En caso de no tener la opción podemos capturar la información. -->
</datalist>
</main>
</body>
</html>```
Combiné todo lo que vimos de los formularios incluyendo el **datalist **y cambiándole el valor al input de tipo submit. Quedó funcionando muy bien 👌
y como se envia eso, por que no sale en el navegador la consulta
Comparto cómo me quedó la comparación entre las dos maneras de generar un Dropdown vistas en la clase:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<h1>Desafío2: <i>Formularios con Select</i> vs <i>Formularios con Input-List</i></h1>
</header>
<main>
<h2>Formulario con Select</h2>
<form action="">
<label for="provincia1">
<span>Provincia argentina:</span>
<br>
<select name="provincia1" id="provincia1">
<option value="" disabled selected>Seleccione una provincia...</option>
<option value="buenos-aires">Buenos Aires</option>
<option value="catamarca">Catamarca</option>
<option value="chaco">Chaco</option>
<option value="chubut">Chubut</option>
<option value="cordoba">Córdoba</option>
<option value="corrientes">Corrientes</option>
<option value="entre-rios">Entre Rios</option>
<option value="formosa">Formosa</option>
<option value="jujuy">Jujuy</option>
<option value="la-pampa">La Pampa</option>
<option value="la-rioja">La Rioja</option>
<option value="mendoza">Mendoza</option>
<option value="misiones">Misiones</option>
<option value="neuquen">Neuquén</option>
<option value="rio-negro">Río Negro</option>
<option value="salta">Salta</option>
<option value="santa-cruz">Santa Cruz</option>
<option value="santa-fe">Santa Fe</option>
<option value="santiago-del-estero">Santiago del Estero</option>
<option value="san-luis">San Luis</option>
<option value="san-juan">San Juan</option>
<option value="tierra-del-fuego">Tierra del Fuego</option>
<option value="tucuman">Tucumán</option>
</select>
</label>
<br>
<br>
<input type="submit" />
</form>
<br>
<hr>
<h2>Formulario con Input-List</h2>
<form action="">
<label for="provincia">
<span>Provincia argentina:</span>
<br>
<input list="provincia" id="provincia-input" placeholder="Seleccione una provincia..." />
<datalist id="provincia">
<option data-value="buenos-aires" value="Buenos Aires" />
<option data-value="catamarca" value="Catamarca" />
<option data-value="chaco" value="Chaco" />
<option data-value="chubut" value="Chubut" />
<option data-value="cordoba" value="Córdoba" />
<option data-value="corrientes" value="Corrientes" />
<option data-value="entre-rios" value="Entre Rios" />
<option data-value="formosa" value="Formosa" />
<option data-value="jujuy" value="Jujuy" />
<option data-value="la-pampa" value="La Pampa" />
<option data-value="la-rioja" value="La Rioja" />
<option data-value="mendoza" value="Mendoza" />
<option data-value="misiones" value="Misiones" />
<option data-value="neuquen" value="Neuquén" />
<option data-value="rio-negro" value="Río Negro" />
<option data-value="salta" value="Salta" />
<option data-value="santa-cruz" value="Santa Cruz" />
<option data-value="santa-fe" value="Santa Fe" />
<option data-value="santiago-del-estero" value="Santiago del Estero" />
<option data-value="san-luis" value="San Luis" />
<option data-value="san-juan" value="San Juan" />
<option data-value="tierra-del-fuego" value="Tierra del Fuego" />
<option data-value="tucuman" value="Tucumán" />
</datalist>
</label>
<input type="hidden" name="answer" id="provincia-input-hidden">
<br>
<br>
<input type="submit" id="submit-btn" />
</form>
</main>
<br>
<footer>
<p>Creado con 💜, by <strong>PatUgarte</strong></p>
</footer>
</body>
<script>
document.querySelector("input[list]").addEventListener('input', function (e) {
let input = e.target,
list = input.getAttribute("list"),
options = document.querySelectorAll(`#${list} option`),
hiddenInput = document.getElementById(`${input.getAttribute("id")}-hidden`)
for (let i = 0; i < options.length; i++) {
let option = options[i]
if (option.value === input.value) {
hiddenInput.value = option.getAttribute("data-value");
break;
}
}
})
</script>
</html>
Como se ve:
Súper esta clase. No tenía idea de la opción de hacer los select con input y que de cierta forma sí son más agradables.
Esta herramienta nos permite el soporte de las etiqueta en los diferentes navegadores web, móvil https://caniuse.com/?search=datalist
soporte de la etiqueta <datalist>
t
Es muy bacano este componente porque te agiliza la manera en que puedes construir una caja de búsqueda. Cuando vi esto quise porbar con una consulta a una base de datos y luego recorrer los registros para presentarlos como el data list. Funciona de maravilla porque el usuario teclea lo que quiere y aparecen de una en el resultado. A lo Google!
<form action="">
<input list="productos">
<datalist id="productos">
<?php
$consultaLista = "select id, nombre from PRODUCTO";
$listaProductosNombre = mysqli_query($conn, $consultaLista);
while($productoSeleccionado=mysqli_fetch_array($listaProductosNombre)){
echo '<option value="'.$productoSeleccionado['nombre'].'"></option>';
}
?>
</datalist>
</form>
Seguimos con la lista !!
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="description" content="Esta pagina te mostrará recetas">
<meta name="robots" content="index,follow">
<title>Es mi pagina</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<title>Lista del mercadito</title>
</header>
<main>
<h1>Soy tu lista del mercadito!</h1>
<figure>
<img
src="./pics/pexels-mark-stebnicki-2383314 (1) (1).jpg"
alt="Es un imagen del super"
width="340"
/>
<figcaption>Es una imagen del mercadito</figcaption>
<section>
<ul>
<a href="https://www.pequerecetas.com/receta/11-recetas-con-frutas/" target="_blank">
<li>Frutas <input type="checkbox"></li> </a>
<ol>
<li>
<input list="frutas">
<datalist id ="frutas">
<option value="Platano"></option>
<option value="Manzanas"></option>
<option value="Pera"></option>
<option value="Uva"></option>
</datalist>
</li>
<li>
<input list="frutas">
<datalist id ="frutas">
<option value="Platano"></option>
<option value="Manzanas"></option>
<option value="Pera"></option>
<option value="Uva"></option>
</datalist>
</li>
<li>
<input list="frutas">
<datalist id ="frutas">
<option value="Platano"></option>
<option value="Manzanas"></option>
<option value="Pera"></option>
<option value="Uva"></option>
</datalist>
</li>
</ol>
<a href="https://nl.pinterest.com/blogexquisit/recetas-carnes-y-pollo/" target="_blank">
<li>Carnes <input type="checkbox"></li></a>
<ol>
<li>
<input list="carnes">
<datalist id="carnes">
<option value=" Pollo"></option>
<option value="Carne Molida"></option>
<option value="Lechón"></option>
<option value="Cuy"></option>
</datalist>
</li>
<li>
<input list="carnes">
<datalist id="carnes">
<option value=" Pollo"></option>
<option value="Carne Molida"></option>
<option value="Lechón"></option>
<option value="Cuy"></option>
</datalist>
</li>
<li>
<input list="carnes">
<datalist id="carnes">
<option value=" Pollo"></option>
<option value="Carne Molida"></option>
<option value="Lechón"></option>
<option value="Cuy"></option>
</datalist>
</li>
</ol>
<a href="https://www.cocinafacil.com.mx/recetas/recetas-con-verduras/" target="_blank">
<li>Verduras <input type="checkbox"></li></a>
<ol>
<li>
<input list="verduras">
<datalist id="verduras">
<option value="Coliflor"></option>
<option value="Brocoli"></option>
<option value="Champiñones"></option>
<option value="Pepino"></option>
</datalist>
</li>
<li>
<input list="verduras">
<datalist id="verduras">
<option value="Coliflor"></option>
<option value="Brocoli"></option>
<option value="Champiñones"></option>
<option value="Pepino"></option>
</datalist>
</li>
<li>
<input list="verduras">
<datalist id="verduras">
<option value="Coliflor"></option>
<option value="Brocoli"></option>
<option value="Champiñones"></option>
<option value="Pepino"></option>
</datalist>
</li>
</ol>
</ul>
<article>
</article>
</section>
</main>
<footer>
</footer>
</body>
</html>
Notas
Select es la etiqueta que te da un scroll junto con opciones en un formulario (artículo, idioma o país).
La etiqueta select tiene un name que es lo que va seleccionar y un id.
A dentro de select están las opciones y se usa la etiqueta option que viene con un atributo valor que tiene que llevar el mismo nombre que la opción que creamos para que llegue a la base de datos.
Ejemplo:
<select name="cursos" id="">
<option value="JavaScript">JavaScript</option>
<option value="HTML5">HTML5</option>
<option value="CSS3">CSS3</option>
<option value="Web Standars">Web Standars</option>
</select>
Mejor práctica para crear un select
<input list="cursos">
<datalist id = "cursos">
<option value="JavaScript"></option>
<option value="HTML5"></option>
<option value="CSS3"></option>
<option value="Web Standars"></option>
</datalist>
De esta forma le das la opción al usuario de escribir en el input y que le salgan las opciones relacionadas con su búsqueda.
Hola, tengo un problema, sucede que al usarlo de esta forma, al renderizarse no se muestra como debería y se hacen visibles PE, CO, MX.
¿Alguien sabe como arreglarlo?
<div>
<input class="select-control" list="country" name="country">
<datalist id="country">
<option value="PE">Perú</option>
<option value="CO">Colombia</option>
<option value="MX">México</option>
</datalist>
</div>
¿Le etiqueta select o la forma con input y datalist se escriben dentro de la etiqueta <label></label> o no?
MI código de la clase:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Clase Select</title>
</head>
<body>
<main>
<h3>Una forma de hacer un select</h3>
<p>Puede servir para listas con pocas opciones</p>
<!--El atributo value debe ser el mismo valor que va
detro de la etiqueta option-->
<select name="cursos" id="">
<option value="JavaScript">JavaScript</option>
<option value="HTML5">HTML5</option>
<option value="CSS">CSS</option>
<option value="PHP">PHP</option>
</select>
<h3>Forma ideal de hacer un select</h3>
<p>Le da la opcion al usuario de que digite lo que
esta buscando, si esta la opcion la muestra y si
no esta podemos capturar ese dato. E
</p>
<!--No es necesario que lleve un valor detro de las
etiqueta ya que no se muestra, basta con el atributo value
Es importante que el atributo list de la etiqueta input
tenga elmismovalor que el id del datalist-->
<input list="cursos">
<datalist id="cursos">
<option value="JavaScript"></option>
<option value="HTML5"></option>
<option value="CSS"></option>
<option value="PHP"></option>
</datalist>
</main>
</body>
</html>```
Que buenazo, llevo años trabajando con la etiqueta select y esto me dio una alternativa buenísima, comencé con la idea de saltarme este curso porque según yo ya tenía bastante conocimiento sólido en HTML, pero en verdad me he dado cuenta de varias malas prácticas, gracias profe y gracias Platzi!
En la parte donde esta creando la lista de option puedes poner lo sigueinte para ahorrar tiempo, esto te crea los option que quieras segun el numero que pongas, se puede usar de muchas maneras con diferentes etiquetas es muy util, esto se llama SNIPPETS
Y pensar que todo lo hacia con Js. Dios mio. Perdoname :’(
esta super bien que desde cursos básicos te enseñen buenas practicas,
la excelencia esta en los pequeños detalles
valla que impresionante la segunda forma de hacer la lista de selección
Excelente explicación, importante practicar para no olvidar el orden en que van las etiquetas.
Me llevo la datalist, algo nuevo aprendido
Select es una etiqueta muy util, pero tambien es muy manejada como se explicó en el video. Pero tiene cosas interesantes como <optgroup>. Todo depende de la implementación y del manejo que se vaya a dar y se puede sesgar a un desarrollador al decir “es una mala practica”, cuando realidad no es del todo asi.
Adicionlmente en ocasiones si queremos enviar un número al servidor en lugar de una palabra como en <option value="57">Colombia</option> (que el formulario enviaría 57 y no Colombia) que puede ahorrar comparaciones con elementos de una base de datos. Realmente Todo! depende no creo que sea muy conveniente colocar el nombre de un país que no exista como Colomba (por un error de escritura)
Este fue el codigo para esta clase, junto con un par de agregados:
<p>Cursos (select normal)</p>
<select name="cursos-select-normal">
<!--
Select es la etiqueta funciona para ver listas de elementos
name: Indica el nombre de la lista
-->
<option value="js">JavaScript</option>
<!--
option contiene un elemento para la etiqueta lista
value: es el valor del elemento seleccionado de la lista.
-->
<option value="html">HTML5</option>
<option value="css">CSS3</option>
<option value="web-standards">Web Standards</option>
</select>
<p>Cursos (select con grupos)</p>
<select>
<optgroup label="Fronted">
<!--
optgroup sirve para agrupar varias opciones de un mismo tema o grupo
-->
<option value="js">JavaScript</option>
<option value="html">HTML5</option>
<option value="css">CSS3</option>
</optgroup>
<optgroup label="Backend">
<option value="php">PHP</option>
<option value="django">Django</option>
<option value="node.js">Nodejs</option>
</optgroup>
<optgroup label="Otros">
<option value="web-standards">Web Standards</option>
<option value="algoritmos">Algoritmos</option>
</optgroup>
</select>
<p>Usando input list</p>
<input list="cursos" />
<!--
list: funciona llamando el listado que tenga el id en su valor, es un mejor método en lugar de usar select que adicionalmente permite capturar nueva información.
-->
<datalist id="cursos">
<!--
datalist es la etiqueta que encierra los datos datos de una lista que se puede usar con la etiqueta <input list="">
-->
<option value="HTML5"></option>
<option value="CSS3"></option>
<option value="Web Standards"></option>
<option value="JavaScript"></option>
</datalist>
Hice un esquema simple que ilustra el tema de la clase:
<select name="cursos" id="">
<option value="HTML5">HTML5</option>
<option value="Java Script">Java Script</option>
<option value="CSS3">CSS3</option>
<option value="Python">Python</option>
</select>
<input list="cursos">
<datalist id="cursos">
<option value="HTML5"></option>
<option value="Java Script"></option>
<option value="CSS3"></option>
<option value="Python"></option>
</datalist>
La etiqueta <select> contiene atributos como nombre y id. Dentro del select va la etiqueta <option> donde vamos a poner las opciones que existen; esta tiene un atributo llamado value donde pondremos el valor que se mandara al momento de dar submit.
Esta manera no es amigable con los compas que están viendo la página desde su celular. Para hacerlo de una manera correcta, lo hacemos con input list=“nombre de la lista” y datalist id=“nombre de la lista”, dentro de esta van las opciones pero sin texto. Al escribir en el campo nos va a ir mostrando las opciones que coincidan con lo que estamos buscando.
Un nuevo feature más para Buking-com 😂
<select name="cursos" id="">
<option value="JavaScript">JavaScript</option>
<option value="HTML5">HTML5</option>
<option value="CSS3">CSS3</option>
<option value="Web Standards">Web Standards</option>
</select>
Que tal todos.
Les comparto una API que pueden utilizar para obtener los países del mundo. El API entrega mucha información, pero incluso pueden filtrar los paises por regiones, continenetes, etc. lo que hace más fácil, por ejemplo, si sólo quieren listar los países latinos.
Link: https://restcountries.eu
Yo lo utilicé en un servicio Angular para obtener países sólo de America central:
get(): Observable<Country[]> {
const endPoint = 'https://restcountries.eu/rest/v2/regionalbloc/cais';
return this.http.get(endPoint)
.pipe(
map((data: any[]) => data.filter((country) => country.subregion !== 'Central America')),
map((countries: any[]) => countries.map((country) => ({
name: country.name,
code: `+${country.callingCodes[0]}`,
flag: country.flag,
} as Country)))
);
}```
Cómo pueden ver en el método anterior, de todos los datos de cáda país sólo me interesan el nombre, el codigo postal y la bandera que es una url a la imagen.Este es un ejemplo de una mala practica que no se debe hacer:
<main>
<h1>Apply to Platzi Master</h1>
<form action="">
<label for="country">
<span>Where are you from?</span>
<select name="country" id="country">
<option value="Mexico">Mexico</option>
<option value="Colombia">Colombia</option>
</select>
</label>
<br> <br>
<label for="age">
<span>How old are you?</span>
<select name="age" id="age">
<option value="18-25">18-25</option>
<option value="26-30">26-30</option>
<option value="31-40">31-40</option>
<option value="41-50">41-50</option>
<option value="51-60">51-60</option>
<option value="61-70">61-70</option>
<option value="71-80">71-80</option>
<option value="81-90">81-90</option>
<option value="91-100">91-100</option>
</select>
</label>
</form>
</main>
en <input > se debe agregar el argumento name para que la información o nombre sea reconocido en la base de dados
Podríamos usar mediaqueries para usar el elemento <select name=“cursos” id=""> en dispositivos con pantallas grandes y al llegar a una resoluciones de pantalla pantallas para móviles usar un mediaquery con el elemento <input list=“cursos”>?
Yo digo que si pero no se si sea lo recomendado. Gracias por su respuestas:)
Esta es una lista de paises con la etiqueta <option> ya en su lugar, se ve genial en la lista, seguro hay mejores formas de hacerlo pero estoy iniciando y me parecio interesante.
<option value="AF">Afganistán</option>
<option value="AL">Albania</option>
<option value="DE">Alemania</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antártida</option>
<option value="AG">Antigua y Barbuda</option>
<option value="AN">Antillas Holandesas</option>
<option value="SA">Arabia Saudí</option>
<option value="DZ">Argelia</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaiyán</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrein</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BE">Bélgica</option>
<option value="BZ">Belice</option>
<option value="BJ">Benin</option>
<option value="BM">Bermudas</option>
<option value="BY">Bielorrusia</option>
<option value="MM">Birmania</option>
<option value="BO">Bolivia</option>
<option value="BA">Bosnia y Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BR">Brasil</option>
<option value="BN">Brunei</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="BT">Bután</option>
<option value="CV">Cabo Verde</option>
<option value="KH">Camboya</option>
<option value="CM">Camerún</option>
<option value="CA">Canadá</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CY">Chipre</option>
<option value="VA">Ciudad del Vaticano (Santa Sede)</option>
<option value="CO">Colombia</option>
<option value="KM">Comores</option>
<option value="CG">Congo</option>
<option value="CD">Congo, República Democrática del</option>
<option value="KR">Corea</option>
<option value="KP">Corea del Norte</option>
<option value="CI">Costa de Marfíl</option>
<option value="CR">Costa Rica</option>
<option value="HR">Croacia (Hrvatska)</option>
<option value="CU">Cuba</option>
<option value="DK">Dinamarca</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="EC">Ecuador</option>
<option value="EG">Egipto</option>
<option value="SV">El Salvador</option>
<option value="AE">Emiratos Árabes Unidos</option>
<option value="ER">Eritrea</option>
<option value="SI">Eslovenia</option>
<option value="ES" selected>España</option>
<option value="US">Estados Unidos</option>
<option value="EE">Estonia</option>
<option value="ET">Etiopía</option>
<option value="FJ">Fiji</option>
<option value="PH">Filipinas</option>
<option value="FI">Finlandia</option>
<option value="FR">Francia</option>
<option value="GA">Gabón</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GD">Granada</option>
<option value="GR">Grecia</option>
<option value="GL">Groenlandia</option>
<option value="GP">Guadalupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GY">Guayana</option>
<option value="GF">Guayana Francesa</option>
<option value="GN">Guinea</option>
<option value="GQ">Guinea Ecuatorial</option>
<option value="GW">Guinea-Bissau</option>
<option value="HT">Haití</option>
<option value="HN">Honduras</option>
<option value="HU">Hungría</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IQ">Irak</option>
<option value="IR">Irán</option>
<option value="IE">Irlanda</option>
<option value="BV">Isla Bouvet</option>
<option value="CX">Isla de Christmas</option>
<option value="IS">Islandia</option>
<option value="KY">Islas Caimán</option>
<option value="CK">Islas Cook</option>
<option value="CC">Islas de Cocos o Keeling</option>
<option value="FO">Islas Faroe</option>
<option value="HM">Islas Heard y McDonald</option>
<option value="FK">Islas Malvinas</option>
<option value="MP">Islas Marianas del Norte</option>
<option value="MH">Islas Marshall</option>
<option value="UM">Islas menores de Estados Unidos</option>
<option value="PW">Islas Palau</option>
<option value="SB">Islas Salomón</option>
<option value="SJ">Islas Svalbard y Jan Mayen</option>
<option value="TK">Islas Tokelau</option>
<option value="TC">Islas Turks y Caicos</option>
<option value="VI">Islas Vírgenes (EEUU)</option>
<option value="VG">Islas Vírgenes (Reino Unido)</option>
<option value="WF">Islas Wallis y Futuna</option>
<option value="IL">Israel</option>
<option value="IT">Italia</option>
<option value="JM">Jamaica</option>
<option value="JP">Japón</option>
<option value="JO">Jordania</option>
<option value="KZ">Kazajistán</option>
<option value="KE">Kenia</option>
<option value="KG">Kirguizistán</option>
<option value="KI">Kiribati</option>
<option value="KW">Kuwait</option>
<option value="LA">Laos</option>
<option value="LS">Lesotho</option>
<option value="LV">Letonia</option>
<option value="LB">Líbano</option>
<option value="LR">Liberia</option>
<option value="LY">Libia</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lituania</option>
<option value="LU">Luxemburgo</option>
<option value="MK">Macedonia, Ex-República Yugoslava de</option>
<option value="MG">Madagascar</option>
<option value="MY">Malasia</option>
<option value="MW">Malawi</option>
<option value="MV">Maldivas</option>
<option value="ML">Malí</option>
<option value="MT">Malta</option>
<option value="MA">Marruecos</option>
<option value="MQ">Martinica</option>
<option value="MU">Mauricio</option>
<option value="MR">Mauritania</option>
<option value="YT">Mayotte</option>
<option value="MX">México</option>
<option value="FM">Micronesia</option>
<option value="MD">Moldavia</option>
<option value="MC">Mónaco</option>
<option value="MN">Mongolia</option>
<option value="MS">Montserrat</option>
<option value="MZ">Mozambique</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NI">Nicaragua</option>
<option value="NE">Níger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk</option>
<option value="NO">Noruega</option>
<option value="NC">Nueva Caledonia</option>
<option value="NZ">Nueva Zelanda</option>
<option value="OM">Omán</option>
<option value="NL">Países Bajos</option>
<option value="PA">Panamá</option>
<option value="PG">Papúa Nueva Guinea</option>
<option value="PK">Paquistán</option>
<option value="PY">Paraguay</option>
<option value="PE">Perú</option>
<option value="PN">Pitcairn</option>
<option value="PF">Polinesia Francesa</option>
<option value="PL">Polonia</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="UK">Reino Unido</option>
<option value="CF">República Centroafricana</option>
<option value="CZ">República Checa</option>
<option value="ZA">República de Sudáfrica</option>
<option value="DO">República Dominicana</option>
<option value="SK">República Eslovaca</option>
<option value="RE">Reunión</option>
<option value="RW">Ruanda</option>
<option value="RO">Rumania</option>
<option value="RU">Rusia</option>
<option value="EH">Sahara Occidental</option>
<option value="KN">Saint Kitts y Nevis</option>
<option value="WS">Samoa</option>
<option value="AS">Samoa Americana</option>
<option value="SM">San Marino</option>
<option value="VC">San Vicente y Granadinas</option>
<option value="SH">Santa Helena</option>
<option value="LC">Santa Lucía</option>
<option value="ST">Santo Tomé y Príncipe</option>
<option value="SN">Senegal</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leona</option>
<option value="SG">Singapur</option>
<option value="SY">Siria</option>
<option value="SO">Somalia</option>
<option value="LK">Sri Lanka</option>
<option value="PM">St Pierre y Miquelon</option>
<option value="SZ">Suazilandia</option>
<option value="SD">Sudán</option>
<option value="SE">Suecia</option>
<option value="CH">Suiza</option>
<option value="SR">Surinam</option>
<option value="TH">Tailandia</option>
<option value="TW">Taiwán</option>
<option value="TZ">Tanzania</option>
<option value="TJ">Tayikistán</option>
<option value="TF">Territorios franceses del Sur</option>
<option value="TP">Timor Oriental</option>
<option value="TG">Togo</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad y Tobago</option>
<option value="TN">Túnez</option>
<option value="TM">Turkmenistán</option>
<option value="TR">Turquía</option>
<option value="TV">Tuvalu</option>
<option value="UA">Ucrania</option>
<option value="UG">Uganda</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistán</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela</option>
<option value="VN">Vietnam</option>
<option value="YE">Yemen</option>
<option value="YU">Yugoslavia</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabue</option>
Yo recomiendo usar placeholder en el input para ayudar al usuario en el uso del campo.
La etiqueta select tiene un nombre y tiene un id. Adentro del Select van a ver las opciones y existe la etiqueta option donde se pone las opciones que existen
<main>
<select name="cursos" id="">
<option value="JavaScript">JavaScript</option>
<option value="HTML5">HTML5</option>
<option value="CSS3">CSS3</option>
<option value="Web Standards">Web Standards</option>
</select>
</main>
En a parte de value se pone lo mismo de las etiquetas, cuando el usuario seleccione la opción el valor es lo que se va a guardar y estaría enviando directamente a la base de datos, si no le ponemos valor se va a ir directamente en cero y no vamos a estar recopilando la información que el usuario ponga en este Select.
Una mejor practica cuando quieras utilizar la opción de Select en tu proyecto:
Utilizamos un input y le quitamos type, en vez de eso utilizamos list, y la lista va a ser cursos. Luego de eso puedo utilizar una etiqueta nueva que se llama datalist, esta etiqueta se abre y se cierra porque adentro va a llevar las opciones que estamos buscando y esta va a llevar el id de cursos que va a ser igual a la lista. Ocupamos la misma etiqueta con option para poner las opciones que se van a mostrar, aquí no vamos a poner texto porque no va a ser visible, mas bien vamos a poner el texto en el valor para que el usuario pueda seleccionarlo. Esta es la forma ideal de poder hacer una etiqueta de Select porque así le das la opción al usuario de encontrar lo que esta buscando sin que tenga que estar dando scroll infinito para llegar a esa opción.
<input list="cursos" />
<datalist id="cursos">
<option value="JavaScript"></option>
<option value="HTML5"></option>
<option value="CSS3"></option>
<option value="Web Standards"></option>
</datalist>
Uauu que buena clase! Estoy aprendiendo cosas que nunca me habian enseñado!
esto hay que darle con prisa pero sin pausa…
Ahora que descubro el datalist es que soy consciente de todo el tiempo perdido haciendo esto con programación 😃
#NuncaParesDeAprender
Clase 19 Select
RESUMEN CLASE 19:
SELECT
<!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>Select</title>
</head>
<body>
<main>
<!-- <select name="cursos" id="">
<option value="JavaScript">JavaScript</option>
<option value="HTML5">HTML5</option>
<option value="CSS3">CSS3</option>
<option value="Web Standards">Web Standars</option>
</select> -->
<input list="cursos">
<datalist id="cursos">
<option value="JavaScript"></option>
<option value="HTML5"></option>
<option value="CSS3"></option>
<option value="Web Standards"></option>
</datalist>
</main>
</body>
</html>
He hecho varios cursos de HTML en los meses y esta clase supera la emocion que tuve con TODOS los cursos anteriores. Buenisima esta clase
<!-- La segunda opción será la por defecto -->
<select name="select">
<option value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</select>
select.html
Me encantó esta clase! Realmente la etiqueta de datalist no la conocía y sí que debe de ayudar al usuario, muchísimas gracias!! 😄
Aquí les dejo una lista de todos los países del mundo, o por lo menos casi todos. Saludos
<code>
<select id="country" name="country">
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antigua & Barbuda">Antigua & Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bonaire">Bonaire</option>
<option value="Bosnia & Herzegovina">Bosnia & Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Brazil">Brazil</option>
<option value="British Indian Ocean Ter">British Indian Ocean Ter</option>
<option value="Brunei">Brunei</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Canary Islands">Canary Islands</option>
<option value="Cape Verde">Cape Verde</option>
<option value="Cayman Islands">Cayman Islands</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Channel Islands">Channel Islands</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Christmas Island">Christmas Island</option>
<option value="Cocos Island">Cocos Island</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Cook Islands">Cook Islands</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cote DIvoire">Cote DIvoire</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Curaco">Curacao</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="East Timor">East Timor</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Falkland Islands">Falkland Islands</option>
<option value="Faroe Islands">Faroe Islands</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="French Guiana">French Guiana</option>
<option value="French Polynesia">French Polynesia</option>
<option value="French Southern Ter">French Southern Ter</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Gibraltar">Gibraltar</option>
<option value="Great Britain">Great Britain</option>
<option value="Greece">Greece</option>
<option value="Greenland">Greenland</option>
<option value="Grenada">Grenada</option>
<option value="Guadeloupe">Guadeloupe</option>
<option value="Guam">Guam</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Hawaii">Hawaii</option>
<option value="Honduras">Honduras</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="Indonesia">Indonesia</option>
<option value="India">India</option>
<option value="Iran">Iran</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Isle of Man">Isle of Man</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Korea North">Korea North</option>
<option value="Korea Sout">Korea South</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Laos">Laos</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libya">Libya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macau">Macau</option>
<option value="Macedonia">Macedonia</option>
<option value="Madagascar">Madagascar</option>
<option value="Malaysia">Malaysia</option>
<option value="Malawi">Malawi</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Martinique">Martinique</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mayotte">Mayotte</option>
<option value="Mexico">Mexico</option>
<option value="Midway Islands">Midway Islands</option>
<option value="Moldova">Moldova</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montserrat">Montserrat</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Nambia">Nambia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherland Antilles">Netherland Antilles</option>
<option value="Netherlands">Netherlands (Holland, Europe)</option>
<option value="Nevis">Nevis</option>
<option value="New Caledonia">New Caledonia</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="Niue">Niue</option>
<option value="Norfolk Island">Norfolk Island</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau Island">Palau Island</option>
<option value="Palestine">Palestine</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Phillipines">Philippines</option>
<option value="Pitcairn Island">Pitcairn Island</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Qatar">Qatar</option>
<option value="Republic of Montenegro">Republic of Montenegro</option>
<option value="Republic of Serbia">Republic of Serbia</option>
<option value="Reunion">Reunion</option>
<option value="Romania">Romania</option>
<option value="Russia">Russia</option>
<option value="Rwanda">Rwanda</option>
<option value="St Barthelemy">St Barthelemy</option>
<option value="St Eustatius">St Eustatius</option>
<option value="St Helena">St Helena</option>
<option value="St Kitts-Nevis">St Kitts-Nevis</option>
<option value="St Lucia">St Lucia</option>
<option value="St Maarten">St Maarten</option>
<option value="St Pierre & Miquelon">St Pierre & Miquelon</option>
<option value="St Vincent & Grenadines">St Vincent & Grenadines</option>
<option value="Saipan">Saipan</option>
<option value="Samoa">Samoa</option>
<option value="Samoa American">Samoa American</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome & Principe">Sao Tome & Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syria">Syria</option>
<option value="Tahiti">Tahiti</option>
<option value="Taiwan">Taiwan</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania">Tanzania</option>
<option value="Thailand">Thailand</option>
<option value="Togo">Togo</option>
<option value="Tokelau">Tokelau</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad & Tobago">Trinidad & Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Turks & Caicos Is">Turks & Caicos Is</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Erimates">United Arab Emirates</option>
<option value="United States of America">United States of America</option>
<option value="Uraguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Vatican City State">Vatican City State</option>
<option value="Venezuela">Venezuela</option>
<option value="Vietnam">Vietnam</option>
<option value="Virgin Islands (Brit)">Virgin Islands (Brit)</option>
<option value="Virgin Islands (USA)">Virgin Islands (USA)</option>
<option value="Wake Island">Wake Island</option>
<option value="Wallis & Futana Is">Wallis & Futana Is</option>
<option value="Yemen">Yemen</option>
<option value="Zaire">Zaire</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
muy interesante estas etiquetas, comparto un poco de mi practica
https://github.com/EmmanuelSanchgDev/formulario_de_viaje
<!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>aeroPeluchesApp</title>
<link rel="stylesheet" href="/formulario_de_viaje/css/style.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h2>AeroPeluches</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officia
temporibus doloribus quo necessitatibus, quia quisquam quod iusto
accusantium, nisi nemo labore iste ipsa consectetur! Temporibus, sapiente
ut. Totam, saepe unde!
</p>
<div class="formulario">
<h2 class="color_">
Rellena para reservar
</h2>
<form action="">
<div class="salida">
<label for="salida">
<span class="color_">Dia de salida</label>
<br />
<input type="datetime-local" name="dia-de-salida" id="salida" required />
</label>
</div>
<br>
<div class="regreso">
<label for="regreso">
<span class="color_">dia de regreso</span>
<br />
<input type="datetime-local" name="dia-de-regreso" id="regreso" required/>
</label>
</div>
<br>
<label for="">
<span class="color_">elige tu hotel</span>
<br>
<input list="hotel" name="Hotel-de-hospedaje" required>
<datalist id="hotel">
<option value="Hotel_las_americas"></option>
<option value="Hotel Aguilas Azules"></option>
<option value="Casa Doña julia"></option>
</datalist>
</label>
<br><br>
<label for="coment">
<span class="color_">dejar indicaciones especiales:</span>
<br />
<textarea
name="comentarios"
id="coment"
cols="30"
rows="10"
></textarea>
</label>
<br>
<input type="submit">
</form>
</div>
<hr>
<footer>
<em>copyright</em>
<br>
<i><a href="https://twitter.com/EmmanuelSanchg">EmmanuelSanchg</a></i>
<p class="platzi">hecho con amor 💚</p>
</footer>
</body>
</html>
Select: Crear input con lista de varias opciones (escribiendo la palabra dentro del recuadro)
Diferencia entre las etiquetas <select>y <datalist>
herramienta para ver el soporte de los navegadores en sus diferentes tecnologías https://caniuse.com/?search=datalist
Buen Ejemplo.
Wow el curso de java no lo habia entendido tan bien como este , vaya curso eh B)
DEPARTAMENTOS DE COLOMBIA
<code>
<label for="Departamento" class="text"><FONT COLOR="white">Departamento</FONT></label>
<select class="form-control" id="departament" required>
<option value=""></option>
<option value=" Amazonas "> Amazonas </option>
<option value=" Antioquia"> Antioquia</option>
<option value="Arauca">Arauca</option>
<option value=" Bogotá"> Bogotá</option>
<option value="Bolívar">Bolívar</option>
<option value="Boyacá">Boyacá</option>
<option value=" Caldas"> Caldas</option>
<option value="Caquetá">Caquetá</option>
<option value="Casanare">Casanare</option>
<option value=" Cauca"> Cauca</option>
<option value="Guainía">Guainía</option>
<option value=" Guaviare"> Guaviare</option>
<option value=" La Guajira"> La Guajira</option>
<option value="Magdalena">Magdalena</option>
<option value=" Meta"> Meta</option>
<option value="Nariño">Nariño</option>
<option value="Norte de Santander">Norte de Santander</option>
<option value="Putumayo">Putumayo</option>
<option value="Quindío">Quindío</option>
<option value="Risaralda">Risaralda</option>
<option value="San Andrés y Providencia">San Andrés y Providencia</option>
<option value=" Santander "> Santander </option>
<option value=" Tolima"> Tolima</option>
<option value="Valle del Cauca">Valle del Cauca</option>
<option value="Vaupés ">Vaupés </option>
<option value="Vichada ">Vichada </option>
</select>
CIUDADES DE COLOMBIA
<code>
<label for="Ciudades colombia" id="control-label"><FONT COLOR="white">Ciudad</FONT></label>
<select class="form-control" id="inputCiudadLine2"required>
<option value=""></option>
<option value="Arauca">Arauca</option>
<option value="Armenia">Armenia</option>
<option value="Barranquilla">Barranquilla</option>
<option value="Bogotá">Bogotá</option>
<option value="Bucaramanga">Bucaramanga</option>
<option value="Cali">Cali</option>
<option value="Cartagena">Cartagena</option>
<option value="Cúcuta">Cúcuta</option>
<option value="Florencia">Florencia</option>
<option value="Ibagué">Ibagué</option>
<option value="Leticia">Leticia</option>
<option value="Manizales">Manizales</option>
<option value="Medellín">Medellín</option>
<option value="Mitú">Mitú</option>
<option value="Mocoa">Mocoa</option>
<option value="Montería">Montería</option>
<option value="Neiva">Neiva</option>
<option value="Pasto">Pasto</option>
<option value="Pereira">Pereira</option>
<option value="Popayán">Popayán</option>
<option value="Puerto Carreño">Puerto Carreño</option>
<option value="Puerto Inírida">Puerto Inírida</option>
<option value="Quibdó">Quibdó</option>
<option value="Riohacha">Riohacha</option>
<option value="San Andrés">San Andrés</option>
<option value="San José del Guaviare">San José del Guaviare</option>
<option value="Santa Marta">Santa Marta</option>
<option value="Sincelejo">Sincelejo</option>
<option value="Tunja">Tunja</option>
<option value="Valledupar">Valledupar</option>
<option value="Villavicencio">Villavicencio</option>
<option value="Yopal">Yopal</option>
</select>
</label>
excelente
Resumen
select nos permite elegir entre una lista una de las opciones. Sin embargo, para grandes cantidades de opciones, select no es la mejor manera de hacerlo. Especialmente en el teléfono, el scroll puede ser demasiado.
list es un nuevo input para crear listas grandes, no solo opciones.
datalist nos permite ingresar valores a través de option, como en select. La diferencia es que solo importa el valor dentro de value, ya que cualquier otro no se va a renderizar.
OJO: datalist solo se recomienda para listas muy grandes, donde el usuario sepa qué buscar. En el resto de casos es mejor usar select para que el usuario pueda ver por sí mismo todas las opciones.
Existen librerías JavaScript que se pueden utilizar para agregar nuevas funcionalidades a las listas de opciones.
MENU DESPLEGABLE CON CATEGORIAS: si se desea poner categorias a una lista de opciones de un <select> se debe usar una etiqueta <optgroup> para colocar cada categoria.
por ejemplo si en una lista de opciones se debe elegir un animal estos se pueden mostrar por categorias de animales para una mejor experiencia de usuario, osea, al desplegar la lista aparecen las categorias de domesticos y aves y debajo de cada categoria aparecen los animales correspondientes.
el codigo seria el siguiente:
<select name=“animales”>
<optgroup label=“domesticos”> <!–en optgroup se usa el atributo label para asignar la categoria deseada–>
<option>perro</option>
<option>gato</option>
</optgroup>
<optgroup label=“aves”>
<option>pato</option>
<option>loro</option>
</optgroup>
</select>
La opción de datalist es la que siempre quiero que este disponible cuando en un formulario tengo que poner el país.
<code>
<!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>Select</title>
</head>
<body>
<main>
<form action="">
<input list="cursos" required>
<datalist id="cursos">
<option value="JavaScript"></option>
<option value="CSS3"></option>
<option value="HTML5"></option>
<option value="WebStan"></option>
</datalist>
<input type="submit">
</form>
</main>
</body>
</html>
jaj
Hola creo que deberias tambien hacer uno tipo cuando salen 3 o 4 preguntas
Hacerlo de la segunda forma el formulario resulta más amigable para el usuario, evitando dar scroll a toda la lista en búsqueda de su opción.
<!-- <select name="curso" id="curso">
<option value="JavaScript">JavaScript</option>
<option value="HTML">HTML</option>
<option value="C">Lenguaje C</option>
<option value="WebStandar">WebStandar</option>
</select> -->
<form action="#">
<input list="cursos">
<datalist id="cursos">
<option value="JavaScript"></option>
<option value="HTML5"></option>
<option value="C"></option>
<option value="WebStandar"></option>
</datalist>
<input type="submit">
</form>
Para poder realizar SELECT, existen dos formas que son:
Para complementar el uso del elemento datalist, hay que resaltar el nombre clave “cursos”, ya que este relaciona el input con el datalist.
Fijarse en los comentarios
Aporte
Select con buenas prácticas
La clase:
<span>¿Qué curso quieres?</span>
<input list="cursos">
<datalist id="cursos">
<option value="JavaScript"></option>
<option value="Python"></option>
<option value="Html"></option>
<option value="C+"></option>
</datalist>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario</title>
<style>
body {
background-color: #b28c4e;
color: white;
font-family: "Open Sans";
}
</style>
<link rel="stylesheet" href="estilos.css" />
</head>
<body>
<h1>Formulario JCOR</h1>
<div id="container">
<div id="cabecera">
<img id="logo" src="tube.png" />
Formulario
<span id="tagline">⏰Blog de Juan Carlos⏰ </span>
</div>
<div id="post">
<form action="">
<label for="nombre">
<span>¿Cuál es tu nombre?</span>
<input type="text" id="nombre" placeholder="Tu nombre" required>
</label><br>
<label for="inicio-platzi">
<span>¿Que día comenzaste en Platzi?</span>
<input type="date" id="inicio-platzi">
</label><br>
<label for="horario">
<span>En que horario estudias?</span>
<input type="time" id="horario">
</label>
<main>
<span>¿Género?</span>
<select name="género" id="">
<option value="">Mujer</option>
<option value="">Hombre</option>
</select>
</main>
</form>
</div>
</div>
</body>
</html>
¿Como hacer un select con buenas practicas?
<main>
<!-- No es una buena practica hacerlo de esta manera -->
<select name="" id="">
<option value="JavaScript">JavaScript</option>
<option value="HTML5">HTML5</option>
<option value="CSS3">CSS3</option>
<option value="Web Standars">Web Standars</option>
</select>
<!-- Esta es la formaideal de hacer un select -->
<input list="cursos">
<datalist id="cursos">
<option value="JavaScipt"></option>
<option value="CSS3"></option>
<option value="HTML5"></option>
</datalist>
</main>
Que maravilla he podido por fin!! entender, que buena explicación Diego De Granda
Como dato curioso, si quieren saber que atributos de valor colocar presionen en win y linux ctrl + espacio y mostrara las opciones dentro del los " " del atributo.
Select
<select name=“cursos” id="">
<option value=“curso 1”> Curso uno </option>
<input list=“cursos”>
<datalist id=“cursos”>
<option value=“curso 1”>
The <select> HTML element represents a control that provides a menu of options:
<label for="pet-select">Choose a pet:</label>
<select name="pets" id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
The <option> HTML element is used to define an item contained in a <select>, an <optgroup>, or a <datalist> element. As such, <option> can represent menu items in popups and other lists of items in an HTML document.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
However there is another way which is considered good practice at the moment of creating a list, we use the tag <datalist>
The <datalist> HTML element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
The list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Google Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Excelentes clases, Diego el mejor
Gracias por enseñarnos el datalist
implementación de datalist
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.