revision:
The pattern attribute specifies a regular expression that the <input> element's value is checked against. The pattern attribute can be used on the following element: <input>. The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.
Tip: use the global title attribute to describe the pattern to help the user.
<input pattern="regular expression">
A regular expression is a formalized string of characters that define a pattern. For example [a-zA-Z0-9]+ is a pattern that matches against a string of any length, as long as the string contains only lowercase letters (a-z), uppercase letters (A-Z), or numerals (0-9).
codes:
<form style="margin-left:3vw;" action="/action_page.php">
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code"><br><br>
<input type="submit">
</form>
A form with a password field that must contain 8 or more characters that are of at least one number, and one uppercase and lowercase letter:
HTML codes:
<p class="spec">A form with a password field that must contain 8
or more characters that are of at least one number,
and one uppercase and lowercase letter:</p>
<form form style="margin-left:3vw;" action="/action_page.php">
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number
and one uppercase and lowercase letter, and at least 8 or more characters">
<input type="submit">
</form>
The placeholder attribute specifies a short hint that describes the expected value of a input field / textarea. The short hint is displayed in the field before the user enters a value. The placeholder attribute can be used on the following elements:<input> and <textarea>.
<element placeholder=" "></element >
The hint is the expected value, which gets displayed before the user enters a value.
codes:
<form style="margin-left:3vw;" action="/action_page.php">
<label for="phone">Enter a phone number:</label><br><br>
<input type="tel" id="phone" name="phone" placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>
<small>Format: 123-45-678</small><br><br>
<input type="submit">
</form>
Who are you?
HTML codes:
<p class="spec"> Who are you?</p>
<textarea style="margin-left:3vw;" rows="4" cols="50"
placeholder="Describe yourself here..."></textarea>
The Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content on top of other page content. Popover content can be controlled either declaratively using HTML attributes, or via JavaScript.
The popover API gives elements some built-in browser-support magic such as:
Support for top-layer, so you don't have to manage z-index. When you open a popover or a dialog, you're promoting that element to a special layer on top of the page.
Light-dismiss behavior for free in auto popovers, so when you click outside of an element, the popover is dismissed, removed from the accessibility tree, and focus properly managed.
Default accessibility for the connective tissue of the popover's target and the popover itself.
Content on the web can be shown over the top of other content, drawing the user's attention to specific important information or actions that need to be taken.
This content can take several different names — "overlays", "popups", "popovers", "dialogs", etc.
Generally speaking, these can be:
modal, meaning that while a popover is being shown, the rest of the page is rendered non-interactive until the popover is actioned in some way (for example an important choice is made).
non-modal, meaning that the rest of the page can be interacted with while the popover is being shown.
Popovers which are created using the popover API are always non-modal.
If you want to create a modal popover, a <dialog> element is the right way to go, although <dialog> elements are not put in the top layer by default — popovers are.
There is significant overlap between the two. You might for example want to create a popover that persists, but control it using declarative HTML. You can even turn a <dialog> element into a popover if you want to combine popover control and top level placement with dialog semantics.
Typical use cases for the popover API include user-interactive elements like action menus, custom "toast" notifications, form element suggestions, content pickers, or teaching UI.
Popovers can be created in two different ways:
Declaratively, via a set of new HTML attributes. A simple popover with a toggle button can be created using the following code:
Popover content
Via a JavaScript API. For example, "HTMLElement.togglePopover()"" can be used to toggle a popover between shown and hidden.
Popover elements are hidden via "display: none" until opened via an invoking/control element (i.e. a <button> or <input type="button"> with a "popovertarget" attribute) or a HTMLElement.showPopover() call.
When open, popover elements will appear above all other elements in the top layer, and won't be influenced by parent elements' position or overflow styling.
There are also new events to react to a popover being toggled, and CSS features to aid in styling popovers.
popover : a global attribute that turns an element into a popover element; takes a popover state ("auto" or "manual") as its value.
popovertarget : turns a <button> or <input> element into a popover control button; takes the ID of the popover element to control as its value.
popovertargetaction : specifies the the action to be performed ("hide", "show", or "toggle") on the popover element being controlled by a control <button> or <input>.
A popover attribute can have values "auto" (default) or "manual". Popovers that have the auto state can be "light dismissed" by selecting outside the popover area, and generally only allow one popover to be displayed on-screen at a time. By contrast, manual popovers must always be explicitly hidden, but allow for use cases such as nested popovers in menus.
::backdrop : the ::backdrop pseudo-element is a full-screen element placed "directly behind popover elements", allowing effects to be added to the page content behind the popover(s) if desired (for example blurring it out).
:popover-open : the :popover-open pseudo-class matches a popover element only when it is in the showing state — it can be used to style popover elements when they are showing.
ToggleEvent : represents an event notifying the user when a popover element's state toggles between showing and hidden. It is the event object for the beforetoggle and toggle events, which fire on popovers when their state changes.
HTMLElement.popover : gets and sets an element's popover state via JavaScript ("auto" or "manual"), and can be used for feature detection. Reflects the value of the popover global HTML attribute.
HTMLButtonElement.popoverTargetElement and HTMLInputElement.popoverTargetElement : gets and sets the popover element being controlled by the control button. The JavaScript equivalent of the popovertarget HTML attribute.
HTMLButtonElement.popoverTargetAction and HTMLInputElement.popoverTargetAction : gets and sets the action to be performed ("hide", "show", or "toggle") on the popover element being controlled by the control button. Reflects the value of the popovertargetaction HTML attribute.
HTMLElement.hidePopover() : hides a popover element by removing it from the top layer and styling it with display: none.
HTMLElement.showPopover() : shows a popover element by adding it to the top layer.
HTMLElement.togglePopover() : toggles a popover element between the showing and hidden states.
HTMLElement beforetoggle event : fired just before a popover element's state changes between showing and hidden, or vice versa.
HTMLElement toggle event : fired just after a popover element's state changes between showing and hidden, or vice versa. This event already existed to signal state changes on <details> elements, and it seemed logical to extend it for popover elements.
I am a popover with more information.
<div>
<button popovertarget="my-popover">Open Popover</button>
<div id="my-popover" popover>
<p>I am a popover with more information.<p>
</div>
</div>
<style>
button {background: #ddd; font-weight: 800; border:0.2vw solid black; }
#my-popover { background: #333; color: white; font-weight: 400; padding: 1vw; max-width: 20vw; line-height: 1.4; position: relative;
top: 1vw; left: 0; right: 0; margin: 0 auto;}
</style>
The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.
The poster attribute can be used on the following element: <video>
<video poster="URL"></video >
URL: it contains a single value URL which specifies the link of source image. There are two types of URL links: absolute URL, which points to another webpage, and relative URL, which points to other files of the same web page.
codes:
<video style="margin-left:5vw;" width="320" height="240"
poster="../pics/cartoon.jpg" controls>
<source src="../pics/Wuzhen-20-10_02.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
codes:
<video style="margin-left:3vw;" width="320" height="240"
poster=" " controls>
<source src="../pics/Wuzhen-20-10_02.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
The preload attribute specifies if and how the author thinks that the media file should be loaded when the page loads. The preload attribute allows the author to provide a hint to the browser about what he/she thinks will lead to the best user experience. This attribute may be ignored in some instances The preload attribute is ignored if autoplay is present.
The preload attribute can be used on the following element: <video> and <audio>
<element preload="auto | metadata | none" ></element>
Attribute values:
auto is used to specify that the browser should load the entire video when the page loads;
metadata is used to specify that the browser should load only metadata when the page loads;
none is used to specify that the browser should NOT load the video when the page loads.
Click on the play button to play a sound:
codes:
<p class="spec">Click on the play button to play a sound:</p>
<audio style="margin-left:3vw;" controls preload="none">
<source src="../pics/horse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
codes:
<video style="margin-left:3vw;" width="320" height="240" controls
preload="none">
<source src="../pics/Wuzhen-20-10_02.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>