# HTMX chapter 4
## Starter Attributes

- `hx-[delete|get|patch|post|put]` - AJAX method to use
- `hx-swap`
  - `innerHTML` - Default, replace hx-target inner html.
  - `outerHTML` - Replace the hx-target itself
  - `beforebegin` - Insert before hx-target
  - `afterbegin` - Insert before hx-target first child
  - `beforeend` - Insert after hx-target last child
  - `afterend` - Insert response after hx-target
  - `delete` - Deletes hx-target regardless of the response.
  - `none` - No swap.
- `hx-target`: CSS selector for `hx-swap` action
- `hx-trigger`: comma-separated list of events triggering a request, often the default:
  - On `input`, `textarea`, `select`: `change`
  - On `form`: `submit`
  - On all other elements: `click`
  - Filters: 
    - in `[]` after the event name 
    - Example: `keyup[ctrlKey && key == 'l']` to catch CTRL-L
  - Specify event source with `from:<extended CSS selector>`, 
    - defaults to current element
    - Example: `from:body` to receive events from the whole body
  - Complete spec: https://htmx.org/attributes/hx-trigger/
- `hx-include`: 
  - when `hx-post`-ing outside a form, specify which elements to include, as if they had been in a form along with the posting button
  - supports matching on multiple comma-separated selectors 
- `hx-vals`: value as a JSON string or JS dynamic value
  - example: `hx-vals='{"state":"MT"}'`
  - example: `hx-vals='js:{"state":getCurrentState()}'`


## Extended CSS selectors

- support multiple comma-separated selectors, but...
  - `hx-target`: return first matching element from first selector (?)
  - `hx-trigger from:` and `hx-include`: return first matching child
- relative selectors:
  - `closest:` closest parent matching selector
  - `(previous|next):`: previous or next element (not necessarily sibling) matching selector
  - `find:` next child matching selector
  - `this:` the current element
  -