# form-input-url

The markup of every demo on <https://kuiper.oeds.it/form-input-url/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## size

One specimen per size rung, so the ladder reads as a single column. A rung sets the height, the type size and the horizontal padding together, and the sizeless specimen is identical to `-m` by construction.

Varies: the `input-*` ladder over 5 rungs, `xs` to `xl`.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="base">base</label><input id="base" name="base" type="url" class="" placeholder="url"></div></div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="xs">xs</label><input id="xs" name="xs" type="url" class="input-xs" placeholder="xs"></div></div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="s">s</label><input id="s" name="s" type="url" class="input-s" placeholder="s"></div></div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="m">m</label><input id="m" name="m" type="url" class="input-m" placeholder="m"></div></div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="l">l</label><input id="l" name="l" type="url" class="input-l" placeholder="l"></div></div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="xl">xl</label><input id="xl" name="xl" type="url" class="input-xl" placeholder="xl"></div></div>
</div>
```

## color

The same specimen repeated on each ground Kuiper paints. The point is what you do NOT write: the ink, the border and the placeholder follow the ground through the `--foreground-*` tokens, so no color class appears on the specimen itself.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="base-on-light">url</label><input id="base-on-light" name="base-on-light" type="url" placeholder="url"><output></output></div></div>
</div>
```

## color

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><label for="base-on-dark">url</label><input id="base-on-dark" name="base-on-dark" type="url" placeholder="url"><output></output></div></div>
</div>
```