Here is a sample that employs a pair of text boxes and three buttons as part of an incident reporting app. Following the app’s instructions, test it out to get a sense of how it works. Here are some noteworthy aspects of this sample:
- A div (id of "editArea") is the container for all of the custom UI elements.
- Within that div are three child divs (addFeatureDiv, updateInstructionDiv, featureUpdateDiv).
- Within the featureUpdateDiv are two child divs (attributeArea, deleteArea).
- The buttons in this app are defined using input elements of type="button". This is the older way to create a button, with the button element seen in the previous sample being a newer way introduced in HTML5.
- The app initializes with the featureUpdateDiv assigned a style of display: none, causing it to be invisible. It later has its display property set to display: block to make it visible. You can read more about the display property at w3schools.
- The text boxes are created using input elements of type="text".
- The input element has a placeholder attribute, which is used to provide a prompt to the user on the sort of entry expected in the box.
- The input element also has a pattern attribute, which is used to validate the user's entry against a regular expression. These and other input attributes are described at w3schools.