# form-field-validation

The markup of every demo on <https://kuiper.oeds.it/form-field-validation/>, 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-`.

## native

Varies: 2 field kinds (`number`, `text`).

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v1">required</label><input id="v1" name="v1" type="text" required placeholder="required"><output></output></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v2">pattern</label><input id="v2" name="v2" type="text" pattern="[A-Z]{3}" placeholder="three capitals"><output></output></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v3">minlength</label><input id="v3" name="v3" type="text" minlength="5" placeholder="minlength"><output></output></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v4">maxlength</label><input id="v4" name="v4" type="text" maxlength="5" placeholder="maxlength"><output></output></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v5">min</label><input id="v5" name="v5" type="number" min="10" placeholder="min"><output></output></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v6">max</label><input id="v6" name="v6" type="number" max="10" placeholder="max"><output></output></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v7">step</label><input id="v7" name="v7" type="number" step="5" placeholder="step"><output></output></div></div>
</div>
```

## type

Varies: 6 field kinds (`color`, `date`, `email`, `number`, `time`, `url`).

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v8">email</label><input id="v8" name="v8" type="email"  placeholder="email"><output></output></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v9">url</label><input id="v9" name="v9" type="url"  placeholder="url"><output></output></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v10">number</label><input id="v10" name="v10" type="number"  placeholder="number"><output></output></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v11">date</label><input id="v11" name="v11" type="date"><output></output></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v12">time</label><input id="v12" name="v12" type="time"><output></output></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v13">color</label><input id="v13" name="v13" type="color"><output></output></div></div>
</div>
```

## text

Varies: 2 field kinds (`tel`, `text`).

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v14">validation-alpha</label><input id="v14" name="v14" type="text" data-input="validation-alpha:true;" placeholder="letters only"><output></output></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v15">validation-num</label><input id="v15" name="v15" type="text" data-input="validation-num:true;" placeholder="digits"><output></output></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v16">validation-tel</label><input id="v16" name="v16" type="tel" data-input="validation-tel:true;" placeholder="telephone number"><output></output></div></div>
</div>
```

## identity

Varies: 2 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v17">validation-cf</label><input id="v17" name="v17" type="text" data-input="validation-cf:true;" placeholder="Tax ID Code"><output></output></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v18">validation-piva</label><input id="v18" name="v18" type="text" data-input="validation-piva:true;" placeholder="VAT Number"><output></output></div></div>
</div>
```

## equalto

Varies: 2 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v19">password</label><input id="v19" name="v19" type="password" placeholder="password"><output></output></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v20">validation-equalto</label><input id="v20" name="v20" type="password" data-input="validation-equalto:#v19;" placeholder="repeat it"><output></output></div></div>
</div>
```

## password

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v21">validation-password</label><input id="v21" name="v21" type="password" data-input="validation-password:true;" placeholder="the whole policy"><output></output></div></div>
</div>
```

## choice

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><fieldset><legend>validation-mincheck 2, validation-maxcheck 3</legend><label class="input-label"><input type="checkbox" name="v22" value="1" data-input="validation-mincheck:2; validation-maxcheck:3;"> choice 1</label><label class="input-label"><input type="checkbox" name="v22" value="2"> choice 2</label><label class="input-label"><input type="checkbox" name="v22" value="3"> choice 3</label><label class="input-label"><input type="checkbox" name="v22" value="4"> choice 4</label><label class="input-label"><input type="checkbox" name="v22" value="5"> choice 5</label><output></output></fieldset></div></div>
</div>
```

## file

Varies: 4 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v23">validation-accept</label><input id="v23" name="v23" type="file" data-input="validation-accept:image/*;"><output></output></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v24">file-maxsize</label><input id="v24" name="v24" type="file" data-input="file-maxsize:100000;"><output></output></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v25">file-min</label><input id="v25" name="v25" type="file" multiple data-input="file-min:2;"><output></output></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v26">file-max</label><input id="v26" name="v26" type="file" multiple data-input="file-max:2;"><output></output></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.

Varies: 2 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v27">color-type hex</label><input id="v27" name="v27" type="color" data-input="color-type:hex;"><output></output></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v28">color-type rgb hsl</label><input id="v28" name="v28" type="color" data-input="color-type:rgb,hsl;"><output></output></div></div>
</div>
```

## message

Varies: the `required` state.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><label for="v29">validation-message</label><input id="v29" name="v29" type="text" required data-input="validation-message:Kuiper needs this one.;" placeholder="a message of your own"><output></output></div></div>
</div>
```