Navegación de palanca
Diseño y desarrollo web en JavaScript sobre cómo crear listas desplegables para programación HTML5 y CSS3. Todo esto como parte de nuestro curso de JavaScript, que estaremos publicando.
Cómo crear listas
La forma más obvia de usar JavaScript para garantizar que el usuario ingrese algo válido en la página HTML5 es proporcionarle opciones válidas. La lista desplegable es una forma obvia y fácil de hacer esto.
El enfoque de cuadro de lista tiene muchas ventajas sobre la entrada de campo de texto:
El usuario puede ingresar con el mouse, que es más rápido y más fácil que escribir.
No debería tener ningún error ortográfico porque el usuario no escribió la respuesta.
El usuario conoce todas las respuestas disponibles porque están en la lista.
Puedes estar seguro de que el usuario da una respuesta válida porque tu le proporcionaste las posibles respuestas.
Las respuestas del usuario pueden asignarse a valores más complejos; por ejemplo, puedez mostrarle al usuario Rojo y hacer que el cuadro de lista devuelva el valor hexadecimal # FF0000.
Cómo construir el formulario
Cuando creas una lista predefinida de opciones, primero define el formulario HTML porque este contiene todos los elementos que necesitará para la función. El código es una forma estándar:
<body>
<form action = ">
<h1>Please select a color</h1>
<fieldset>
<select id = "selColor">
<option value = "#FFFFFF">White</option>
<option value = "#FF0000">Red</option>
<option value = "#FFCC00">Orange</option>
<option value = "#FFFF00">Yellow</option>
<option value = "#00FF00">Green</option>
<option value = "#0000FF">Blue</option>
<option value = "#663366">Indigo</option>
<option value = "#FF00FF">Violet</option>
</select>
<input type = "button"
value = "change color"
onclick = "changeColor()" />
</fieldset>
</form>
</body>
</html>
En la siguiente te explicaremos los pormenores de este código, y también ampliaremos el tema. Por el momento, puedes ver nuestro curso de PHP orientado a páginas dinámicas. También puedes ver el curso de Kotlin. Con esto mejorará tu diseño y desarrollo web.
