When you design screen controls for touch-enabled devices, make them big enough to select with a finger.
Specify text box size in a CSS file.
.input_container input {
width: 100%;
height: 45px;
...
}
Create clickable HTML elements and make them big enough to select with a finger. Add a JavaScript onClick handler to the buttons to make them clickable.
For example, the following code creates two arrow buttons that users can press to change views.
<div id="navigationLeft" class="navigationBar">
<img id="arrowLeft" src="gfx/arrow_left.png" alt="Previous day" onclick="navigationArrowClicked('left');" />
</div>
<div id="navigationRight" class="navigationBar">
<img id="arrowRight" src="gfx/arrow_right.png" alt="Next day" onclick="navigationArrowClicked('right');" />
</div>

Figure: Arrow buttons
You can also create custom controls. For more information, see Customizing screen controls.