You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
3.9 KiB
114 lines
3.9 KiB
# 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
|
|
- 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
|
|
|
|
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/
|