css-notes/6. Fonts, Forms, and Pseudo Selectors/2. FORMS.md

HTML - forms

Lesson Objectives

1. Explain what a form is
2. Use a form tag to set up an interactive space
3. Use an input element to give the user a place to enter data
4. Use a textarea element to give the user a place to enter large text blocks
5. Use a select element, in conjunction with option elements to create a dropdown
6. 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
2. 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/