proptotype UI CDK Guide

# Creating a UI prototype

It is a good idea to create at first a prototype of the intended markup. You will find out which markup elements the component has to generate and also which renderer-specific attributes are needed in order to parameterize the generated markup.

The <inputDate> component consists of an HTML form `<input>` element, an `<img>` element, and `<div>` element:

    ...
    <div title="Date Field Component">
        <input name="dateField" value="01 January 2008" />
        <img class="overlay" src="inputDateOverlay.png" />
    </div>
    ...

All information about styles applied to the <inputDate> component is provided in the following chapter.

This is the result of your prototype which shows a simple page with an input field and an icon indicating that this is a date field:

The date field component prototype implementation in HTML with an icon