Los formularios son tan importantes en el mundo de HTML, CSS y JavaScript que decidí dedicarles un tutorial especial para enfocarme en todas las entradas/inputs, botones y elementos que HTML trae por defecto para centrarme en la interacción. En estos ejercicios aprenderás:
-
Uso de entradas/inputs de texto, text areas, entradas/inputs de fecha y entradas/inputs numéricas.
-
Uso de dropdowns.
-
Validaciones de formulario.
-
Dar estilos a un formulario.
- Aprende HTML
- Aprende Formularios HTML5← 🔥 Estás aquí
- Aprende CSS
- Aprende CSS Layouts
- Aprende Bootstrap
Puedes empezar estos ejercicios en pocos segundos haciendo clic en: Abrir en Codespaces (recomendado) o Abrir en Gitpod.
Una vez ya tengas abierto VSCode, los ejercicios de LearnPack deberían empezar automáticamente, si esto no sucede puedes intentar empezar los ejercicios escribiendo este comando en tu terminal:
$ learnpack start
Clona el repositorio en tu ambiente local y sigue los siguientes pasos:
- Instala LearnPack, el package manager para tutoriales de aprendizaje y el HTML compiler plugin para LearnPack, asegúrate también de tener node.js 14+:
$ npm i @learnpack/learnpack -g
- Descarga estos ejercicios en particular usando LearnPack y luego
cd
para entrar en la carpeta:
$ git clone https://github.com/4GeeksAcademy/html-forms-tutorial-exercises
$ cd html-forms-tutorial-exercises
Nota: Una vez que termines de descargar, encontrarás una carpeta "exercises" que contiene todos los ejercicios.
- Inicializa el tutorial/ejercicios ejecutando el siguiente comando en el mismo nivel donde se encuentra tu archivo learn.json:
$ learnpack start
Cada ejercicio es una pequeña aplicación de React que contiene los siguientes archivos:
- index.js: representa el archivo de entrada para toda la aplicación.
- README.md: contiene las instrucciones de los ejercicios.
- test.js: no tienes que abrir este archivo, contiene el script del test para el ejercicio.
Nota: Los ejercicios son autograduados, pero los tests son muy rígidos y estrictos, mi recomendación es que no prestes demasiada atención a los tests y los uses solo como una sugerencia o podrías frustrarte.
Gracias a estas personas maravillosas (emoji key):
- Alejandro Sanchez (alesanchezr), contribución: (codificador) 💻 (idea) 🤔, (build-tests)
⚠️ , (pull-request-review) 🤓 (tutorial de compilación) ✅ (documentación) 📖
Este proyecto sigue la especificación all-contributors. ¡Todas las contribuciones son bienvenidas!
Este y otros ejercicios son usados para aprender a programar por parte de los alumnos de 4Geeks Academy Coding Bootcamp realizado por Alejandro Sánchez y muchos otros contribuyentes. Conoce más sobre nuestros Cursos de Programación para convertirte en Full Stack Developer, o nuestro Data Science Bootcamp.