From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript
Chapter 5.14: Using dialog boxes
To make the creation of dialog boxes, the <dialog> tag was introduced. The general use of this tag is to put a form inside the dialog. Below is an example of setting up the HTML portion of a dialog box. You will notice that I am setting the form method to dialog. This causes the button to close the dialog box instead of submitting the form. If you want the form to be submitted, but also want an option to close the dialog box without submitting then you can use the normal get or post methods and have the button you want for closing the dialog box to have the formmethod attribute be set to dialog.
<form method="dialog">
<fieldset>
<legend>Personal Details</legend>
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="firstName"
placeholder="First Name"><br>
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lastName"
placeholder="Last Name"><br>
<label for="email">email:</label>
<input type="email" id="email" name="email"
placeholder="Email Address"><br>
</fieldset>
<button>Close</button>
</form>
</dialog>
If you wanted to run the above you would see nothing as the dialog does not appear until you show it. To show the dialog you have two choices. You can use the show() method or the showModal() method. Both bring up the same dialog box, but the behavior of that dialog box will be different. As mentioned in the previous section, modeless dialog boxes let you keep interacting with the page beneath the dialog box while modal dialog boxes require that you close them before you can do anything else on the page. Here is an example of opening our dialog box as a modal dialog box.
If you have other things on the page that you can interact with, you will notice that they do not show any sign that they are disabled but you can’t interact with them.
There is another interesting behavior that forms have and that is with required fields. As we will be exploring next section, a required field must be filled out before a form can be submitted. This also happens to mean that you can not close a form until all the inputs that have the required attribute set need to be filled out as can be seen in this example.
<form method="dialog">
<fieldset>
<legend>Important Question</legend>
<label for="question">What is the meaning of life?</label>
<input type="text" id="question" name="question"
placeholder="answer" required><br>
</fieldset>
<button onclick="questionAnswered()">Close</button>
</form>
</dialog>
You will notice that event handlers on the form buttons are allowed, which should go without saying. This lets you do things with the form fields once the form has been closed. Even though the input fields are no longer visible, they are still accessible using the document class.
Before closing out our discussion of dialogs, it should be pointed out that you do not need to have a form inside the dialog tag. The big issue here is that the button needs to be closed in the button’s event handler by calling the dialog elements’ close() method. Here is an example of a dialog box that does not have any form inside of it.
<dialog id="formless">
<fieldset>
<p>Do you like HTML dialogs?</p>
</fieldset>
<button onclick="likeDialog(0)">Yes</button>
<button onclick="likeDialog(1)">No</button>
<button onclick="likeDialog(2)">Maybe</button>
</dialog>
<p id="formlessAnswer"></p>
The code for handling the result is where we close the dialog box.
let txt = document.getElementById("formlessAnswer");
if (v == 0) txt.innerText = "You like dialog boxes.";
else if (v == 1) txt.innerText = "You hate dialog boxes.";
else txt.innerText = "You aren't sure about dialog boxes."
document.getElementById("formless").close();
}
We are using forms for getting data, and as we intend to process the data ourselves, it is important that we understand a bit about form validation which we will look at next.
Chapter contents
Chapter 5 Contents
5.1 Forms Cheat Sheets
This chapter's summary cheat sheet.
5.2 The client-server model
How forms are traditionally used.
5.3 The Form tag
How to set up a form in HTML.
5.4 Inputting text
Getting text input from the user.
5.5 Specialized text formats
Making your input fields more specific and semantic.
5.6 Form cosmetics
Making forms look more like printed forms.
5.7 checkboxes & radio buttons
How to use Checkboxes and Radio buttons.
5.8 Numbers and Dates
Using numbers and dates gives your user better GUI controls.
5.9 special purpose input types
The reset, button, image, color, and file input types.
5.10 Option Select
The select element lets users select options from a drop-down list.
5.11 Data Lists
The datalist elements lets you create pull-down lists for input elements.
5.12 Output
Displaying values in a form.
5.13 dialog box concepts
Built in dialog boxes and pre-dialog tag handmade dialogs.
5.14 using dialog boxes
The <dialog> tag and using it to create dialog boxes.
5.15 Validating forms
Review of validating forms in HTML.
5.16 JavaScript Validation
How to use JavaScript to prevent invalid forms from being submitted.
5.17 Project: Trivia
Coming December 8th.
5.18 Trivia Project Solution
Coming December 15th.