HTML Forms: Examples

HTML forms have a distinct set of elements, and jQuery has a distinct set of methods to deal with form data. These examples show simple forms with jQuery interactions. Each page has its own .js file, so it's easy to learn how the jQuery and JavaScript interact with the form on that page.

The purpose of the examples is to present different capabilities of forms separately so that beginners can experiment with the jQuery and see how things really work.

All the files are on GitHub.

For links to reference materials, and some basic rules for working with HTML forms, see: Some tips about HTML forms.

1. Text fields: blur, focus, val(), append
2. Textarea: Compare input/text and textarea fields; the HTML is different.
3. Radio buttons: $('input[name=size]:checked').val()
   Also, correct use of fieldset and label.
4. Select menu: $('#states option:selected').text()
   Also, how to write the value of a menu selection into a text field.
5. Checkboxes: $('#toppings input:checkbox:checked')
   Also, use of the jQuery .map() method to capture the values of all the checked items.
6. Validation: Introduction to client-side form validation, using Parsley.js. Includes email and url input fields.
7. Form actions: How do HTML forms interact with Web servers? How can you get the data out of the browser and into a database?