A prompt (or input box) is a popup box which asks the user a question and allows them to type and submit their answer in a textbox. The user must enter a value in the textbox or click on OK/cancel before they can continue interacting with the webpage.
These prompts can be intrusive and annoying so only use them when absolutely necessary. Forms are a better way of getting user input. The only data validation being used in this example is checking whether the input text box is empty or not.
Watch the video below and then scroll down to see the sample code.
Here is the code for the prompt box:
Here are some questions to consider after using the sample code:
- What happens when the user clicks on OK before replacing the default value with their own text value? Can this be changed?
- What will be displayed in the message if the user clicks on Cancel? How can this be changed?
Next tutorial: Using the HTML5 canvas tag to draw shapes