HTML5 Forms Tutorial & Exercises

By @alesanchezr and other contributors at 4Geeks Academy

Start now:

Forms are so important in the world of HTML, CSS and Javascript that I decided to give them a special course to focus in all the inputs, buttons and elements that HTML brings by default to focus on interaction. During these exercises you will learn:

1. Using text inputs, text areas, date inputs and numeric inputs.

2. Using dropdowns.

3. Form preventive validations.

4. GET vs POST.

5. Styling a form

Before we start... other related tutorials

1. Learn HTML
2. Learn HTML5 Forms← your are here now
3. Learn CSS
4. Learn Bootstrap

One click installation:

Local installation

1. Install learnpack, the package manager for learning tutorials and the html compiler plugin for learnpack, make sure you also have node.js 14+:

$ npm i learnpack -g
$ learnpack plugins:install learnpack-html

2. Download this particular exercises using learnpack and cd into the folder:

$ learnpack download html-forms-tutorial-exercises
$ cd html-forms-tutorial-exercises

Note: Once you finish downloading, you will find a "exercises" folder that contains all the exercises within.

3. Start the tutorial/exercises by running the following command at the same level were your bc.json file is:

$ npm i [email protected] -g
$ learnpack start

Note: The exercises have automatic grading but its very rigid and string, my recomendation is to ignore the tests and use them only as a recomendation or you can get frustrated :(

How are the React Tutorial Exercises organized?

Each exercise is a small react application containing the following files:

1. index.js: represents the entry file for the entire exercise.
2. README.md: contains exercise instructions.
3. test.js: you don't have to open this file, it contains the testing script for the exercise.

Contributors

Thanks goes to these wonderful people (emoji key):

1. Alejandro Sanchez (alesanchezr), contribution: (coder) 💻 (idea) 🤔, (build-tests) ⚠️ , (pull-request-review) 🤓 (build-tutorial) ✅ (documentation) 📖

This project follows the all-contributors specification. Contributions of any kind are welcome!