From 606dbe0947bb76c8cc8375c95a04703623cc1b7b Mon Sep 17 00:00:00 2001 From: Matt Huntington Date: Sun, 6 May 2018 15:29:28 -0400 Subject: [PATCH] forms --- html5/forms.md | 131 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 131 insertions(+) diff --git a/html5/forms.md b/html5/forms.md index e69de29..cebb9ac 100644 --- a/html5/forms.md +++ b/html5/forms.md @@ -0,0 +1,131 @@ +# HTML - forms + +## Lesson Objectives + +1. Explain what a form is +1. Use a form tag to set up an interactive space +1. Use an input element to give the user a place to enter data +1. Use a textarea element to give the user a place to enter large text blocks +1. Use a select element, in conjunction with option elements to create a dropdown +1. Use a label to create a clickable space which will also affect a specified input + +## Explain what a form is + +A form is a set of fields with which users interact. Data is often gathered from these fields. + +## Use a form tag to set up an interactive space + +Container tag for a form. Has the following attributes, which we don't need to use right now + +1. action +1. method + +## Use an input element to give the user a place to enter data + +Input tags are the most basic and most common way to enter small chunks of data. They have the following attributes: + +- name + - used by the server to create a property with the given name +- value + - set an initial value for the input +- type + - button + - Defines a clickable button (mostly used with a JavaScript to activate a script) + - checkbox + - Defines a checkbox + - color + - Defines a color picker + - date + - Defines a date control (year, month and day (no time)) + - datetime-local + - Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second (no time zone) + - email + - Defines a field for an e-mail address + - file + - Defines a file-select field and a "Browse..." button (for file uploads) + - hidden + - Defines a hidden input field + - used on the back end + - image + - Defines an image as the submit button + - month + - Defines a month and year control (no time zone) + - number + - Defines a field for entering a number + - password + - Defines a password field (characters are masked) + - radio + - Defines a radio button + - A set of radio buttons must all have the same name attribute + - range + - Defines a control for entering a number whose exact value is not important (like a slider control) + - reset + - Defines a reset button (resets all form values to default values) + - search + - Defines a text field for entering a search string + - submit + - Defines a submit button + - tel + - Defines a field for entering a telephone number + - text + - Default. Defines a single-line text field (default width is 20 characters) + - time + - Defines a control for entering a time (no time zone) + - url + - Defines a field for entering a URL + - week + - Defines a week and year control (no time zone) +- checked + - set a check box to be checked initially + - for a collection of radio buttons, set which one is selected initially +- disabled + - prevent a user from interacting with an input +- maxlength + - set the maximum length of an inputs value +- placeholder + - some placeholder text + - used to prompt the user or explain the input's purpose + +## Use a textarea element to give the user a place to enter large text blocks + +Contains large chunks of text + +## Use a select element, in conjunction with option elements to create a dropdown + +- `select` element + - tag containing many `option` elements + - set the `name` attribute here +- `option` element + - `selected` attribute sets which option is initially selected from the dropdown + - `value` attribute will be the value of the `select` dropdown as a whole. + - Can have content which is different from `value` attribute + - allows you to be more verbose for the user + +## Use a label to create a clickable space which will also affect a specified input + +- Creates an interactive element for users to click on +- 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