---
Source: https://docs.microblink.com/blinkid/v8000/autofill-form
Title: Auto-fill a form with extracted data
Description: Populate an HTML form from a BlinkID Web SDK scan result.
---

# Auto-fill a form with extracted data

This guide shows how to populate an HTML form from a BlinkID scan result using the Web SDK.
After a successful scan, you read the extracted fields and write them into the form inputs so the user does not have to type them manually.

## The form

Start with a plain HTML form.
Give each input a `name` so you can target it from the result callback.

```html
<form id="id-form">
  <label>Given name <input name="givenName" /></label>
  <label>Family name <input name="familyName" /></label>
  <label>Date of birth <input name="dateOfBirth" /></label>
  <label>Document number <input name="documentNumber" /></label>
  <label>Expiry date <input name="expiryDate" /></label>
  <button type="submit">Submit</button>
</form>
```

## Read the result and write it into the form

Create the SDK instance, then register a result callback.
On Web, text fields are multi-alphabet string results, so you read them through `.latin?.value` (or one of the other supported alphabets).

```ts

const form = document.querySelector<HTMLFormElement>("#id-form")!;

const blinkId = await createBlinkId({ licenseKey: "your-license-key" });

blinkId.addOnResultCallback((result) => {
  setField(form, "givenName", result.firstName?.latin?.value);
  setField(form, "familyName", result.lastName?.latin?.value);
  setField(form, "documentNumber", result.documentNumber?.latin?.value);
  setField(form, "dateOfBirth", formatDate(result.dateOfBirth));
  setField(form, "expiryDate", formatDate(result.dateOfExpiry));
});
```

When you are done scanning, release the instance:

```ts
void blinkId.destroy();
```

## The `setField` helper

The helper looks up an input by name and writes a value into it.
It skips `undefined` values so that fields the SDK could not extract are left untouched for the user to fill in.

```ts
function setField(form: HTMLFormElement, name: string, value: string | undefined) {
  if (value === undefined) {
    return;
  }

  const input = form.elements.namedItem(name);
  if (input instanceof HTMLInputElement) {
    input.value = value;
  }
}
```

## Formatting dates

Date fields such as `dateOfBirth` and `dateOfExpiry` are date results with numeric `year`, `month`, and `day` properties, each of which may be `undefined`.
Months are in the range 1-12.
Format them into an `YYYY-MM-DD` string, zero-padding the month and day.
When the numeric parts are missing, fall back to the printed `originalString`, which is itself a string result read through `.latin?.value`.

```ts
type DateResult = {
  year?: number;
  month?: number;
  day?: number;
  originalString?: { latin?: { value?: string } };
};

function formatDate(date: DateResult | undefined): string | undefined {
  if (!date) {
    return undefined;
  }

  if (date.year !== undefined && date.month !== undefined && date.day !== undefined) {
    const month = String(date.month).padStart(2, "0");
    const day = String(date.day).padStart(2, "0");
    return `${date.year}-${month}-${day}`;
  }

  return date.originalString?.latin?.value;
}
```

## Let users review before submitting

Auto-fill is a convenience, not a substitute for the user's confirmation.
Extraction can be imperfect on worn or low-quality documents, and some fields may be missing entirely.
Always let the user review and correct the auto-filled values before they submit the form.

## Related articles

- [Extract specific fields](./extract-fields.md)
- [Result reference](./result-reference.md)
- [Scan in real time via camera](./scan-camera.md)


Last updated on Jul 24, 2026