diff --git a/html5/forms.md b/html5/forms.md index cebb9ac..f7a365a 100644 --- a/html5/forms.md +++ b/html5/forms.md @@ -85,6 +85,11 @@ Input tags are the most basic and most common way to enter small chunks of data. - placeholder - some placeholder text - used to prompt the user or explain the input's purpose +- required + - make sure the input has a value before the form is submitted +- pattern + - make sure the input has a value that matches the regex provided before the form is submitted + ## Use a textarea element to give the user a place to enter large text blocks @@ -107,25 +112,3 @@ Contains large chunks of text - This will affect a checkbox/radio button with an `id` that matches the label's `for` attribute value - Can do some neat things with CSS, labels, and form elements (e.g. CSS only carousels) - https://css-tricks.com/the-checkbox-hack/ - -# Activities - -## Use an input element to give the user a place to enter data -1. Create a form -1. Go through the list and add five inputs of the following type: - - text - - checkbox - - 3 radio buttons (be sure to create and set the same name attribute for all three) - - password - - datetime-local - - number - - search -1. See what makes them different from each other - -## Textareas and dropdowns -1. Create a textarea -1. Create a dropdown that has 5 elements in it - -## Use a label to create a clickable space which will also affect a specified input -1. Create a label that, when clicked, will check a checkbox -1. Create three radio buttons and three corresponding labels. Each label should activate a different radio button