> For the complete documentation index, see [llms.txt](https://docs.wem.io/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wem.io/platform/tutorials/building-widgets/wemscript/4-outputid.md).

# 4. OutputId()

This function has multiple use cases and is essential for ensuring that the widget functions correctly. We previously used this function to create a unique identifier value for the `id` HTML attribute. Another important role of this function is to generate identifiers for HTML input fields, enabling two-way binding with writable data field properties of the widget. In other words, it facilitates sending data back.

Let's create a very simple form item to see it in action:

* Create a new widget and name it "Simple Form Example."
* Create two new data model text properties called "FirstName" and "LastName."
* Make both properties writable and required.
* Use the script below:

```html
<? 
	register input @FirstName 
	register input @LastName
?>
<label>
	First name:
	<input type="text" name="<?attr OutputId(@FirstName) ?>" value="<?attr @FirstName ?>">
</label>
<label>
	Last name:
	<input type="text" name="<?attr OutputId(@LastName) ?>" value="<?attr @LastName ?>">
</label>
```

For those familiar with sending form data over the internet, there is nothing new here. Just like in regular HTML forms, we use the `<input>` element to edit and submit the data. One interesting aspect is the use of `OutputId(@PropertyName)` in the `name` attribute. We cannot simply use `name="PropertyName"` here, as that would lead to name collisions if there are multiple instances of this widget on the same page. In other words, `OutputId(@PropertyName)` ensures that we get a unique name for this property specific to each widget instance.

Next, we will write a more exciting widget: a note widget that you can drag around the screen. This will explain many concepts, especially those related to creating WEM widgets.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wem.io/platform/tutorials/building-widgets/wemscript/4-outputid.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.