GEOG 863:
Web Application Development for Geospatial Professionals

7.2.4 Text Box


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.