HTML tutorial
Datalist
The <datalist>
element works a lot like a select except it has autocomplete.
<div>Choose your favorite color:</div>
<input list="demo__list" />
<datalist id="demo__list">
<option value="Blue" />
<option value="Indigo" />
<option value="Gray" />
<option value="Green" />
<option value="Pink" />
<option value="Purple" />
<option value="Red" />
<option value="Yellow" />
</datalist>
Dialog
The dialog
element is used as an easy way to add a modal.
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
Open a <dialog>
element by setting the open="true"
attribute on it. Once a dialog is open, there are three ways to close it:
- User submits a
<form>
with amethod="dialog"
attribute - User presses
esc
key - Use javascript to call the
dialog.close()
method, where the dialog element is an instance of theHTMLDialogElement
.
Dialog methods
You have three methods available on the dialog in javascript.
dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */
dialog.show()
: opens up the dialog, but without a darkened backdrop.dialog.showModal()
: opens up the dialog with a darkened backdrop which you can style with the::backdrop
pseudoelement.dialog.close()
: closes the dialog