# Reform v1 Documentation
## Page template
```html
TODO
```
## I/O components
- Add `reform:paste-target` to the file input class to allow it to receive files from paste.
- Set `data-default` on the file input to the URL of a file to load by default.
- For single-column outputs, I think output-controls should go before output-content.
- Add `no-output-controls` to `reform:io` when there are no output controls.
### Image input
```html
```
### Text input
```html
```
### Image output
```html
```
### File I/O, no preview
- Note the use of `no-contents`.
- As used in [Byte sorter](https://sheeptester.github.io/javascripts/byte-sorter.html) and [schedule maker](https://sheeptester.github.io/words-go-here/misc/schedulemaker.html).
- The output ID goes in the wrapper.
```html
```
### Output controls, primary copy
This is used by [font-colour-remover](https://sheeptester.github.io/javascripts/font-colour-remover.html) because it's intended to clean the clipboard.
```html
```
## Form components
### General inputs
- Should work with any text field or select box by default.
- `label-secondary` is optional.
```html
```
### Range
```html
```
### Radio group
- If all options don't need both a `label-primary` and `label-secondary`, then prefer using `label-secondary` for all options.
```html
```
### Checkbox
```html
```
### Button row
```html
```
### Horizontal layout
```html
```
## CSS utility class reference
- `.link`: For text links.
- `.hidden-accessible`: Hides an element but make it tab-accessible.
- `.code`: Monospace font.
## JavaScript API
Reform is built on the concept of sources. All form elements are automatically sources, and the `on` function can be used to register custom sources. Even outputs are sources, and they may produce values for output controls to consume.
```ts
declare module '/reform/v1/index.js' {
export type SourceSpec =
| {
name: string
deps?: string[]
}
| string
export function on (
spec: SourceSpec,
callback: (
object: HTMLElement | CanvasRenderingContext2D | null,
args: Record
) => Promise
): void
export abstract class Out {
fileName?: string
/**
* Canvas contexts are turned into PNG images.
*/
value?: Blob | CanvasRenderingContext2D
/**
* MIME type of download. Ignored if `value` is set. Currently only used as
* fallback when `clipboardTypeHint` is omitted, but it is recommended to set
* this in case I add blob type feature detection in the future.
*/
downloadTypeHint?: string
/** Ignored if `value` is set. */
provideDownload? (): PromiseLike | Blob
/**
* MIME type of clipboard blob. Preferred over `downloadTypeHint`. Must be
* specified if `provideClipboard` is also specified.
*/
clipboardTypeHint?: string
/**
* If the blob type is not supported by the Clipboard API, then specify this
* method for the copy button, which when set will be preferred over `value`
* or `provideDownload`.
*
* Guaranteed to be called at most once.
*/
provideClipboard? (): PromiseLike | Blob
/**
* @param type Defaults to `text/plain`
*/
static from (
fileName: string,
value: CanvasRenderingContext2D | BlobPart,
type?: string
): Out
}
}
```
### Form element sources
Reform automatically subscribes to all form elements in the page, unless `[data-ignore]` is set (used by the special input sources below).
- Number, range, and `[inputmode=numeric]` inputs produce a number.
- If there's an ancestor `.range-wrapper`, then it'll find the corresponding input to update its value.
- Checkboxes produce a boolean.
- File inputs produce a non-empty `Array` of `File`s.
- Text areas, select boxes, radios, and all other input types produce a string.
Generally, classes prefixed with `reform:` indicate special JavaScript behavior.
Here are the special input sources:
- `input.reform:image-input`: Enables image input handling.
- It will create a canvas if none already exists in the `.reform:io` wrapper. `willReadFrequently` is set to `data-will-read-frequently` (used by [Intense contrast](https://sheeptester.github.io/javascripts/intense-contrast.html))
- Selected images are drawn onto the canvas. This is also used for previewing.
- Produces `CanvasRenderingContext2D`s instead of image files.
- The canvas element's `data-name` attribute is set to the file name without the extension.
- `input.reform:video-input`: Enables video input handling.
- It will create a `