draft: migrate html interactive examples

mdn · Feb 12, 2025 · 46baa97 · 46baa97
1 parent 8dac6c6
commit 46baa97
Show file tree

Hide file tree

Showing 140 changed files with 3,741 additions and 140 deletions.
diff --git a/files/en-us/web/api/htmlimageelement/usemap/index.md b/files/en-us/web/api/htmlimageelement/usemap/index.md
@@ -53,7 +53,52 @@ For additional examples (including interactive ones), see the articles about the
 
 ## Examples
 
-{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}
+{{InteractiveExample("HTML Demo: <area>", "tabbed-taller")}}
+
+```html interactive-example
+<map name="infographic">
+  <area
+    shape="poly"
+    coords="129,0,260,95,129,138"
+    href="https://developer.mozilla.org/docs/Web/HTTP"
+    target="_blank"
+    alt="HTTP" />
+  <area
+    shape="poly"
+    coords="260,96,209,249,130,138"
+    href="https://developer.mozilla.org/docs/Web/HTML"
+    target="_blank"
+    alt="HTML" />
+  <area
+    shape="poly"
+    coords="209,249,49,249,130,139"
+    href="https://developer.mozilla.org/docs/Web/JavaScript"
+    target="_blank"
+    alt="JavaScript" />
+  <area
+    shape="poly"
+    coords="48,249,0,96,129,138"
+    href="https://developer.mozilla.org/docs/Web/API"
+    target="_blank"
+    alt="Web APIs" />
+  <area
+    shape="poly"
+    coords="0,95,128,0,128,137"
+    href="https://developer.mozilla.org/docs/Web/CSS"
+    target="_blank"
+    alt="CSS" />
+</map>
+<img usemap="#infographic" src="/media/examples/mdn-info.png" alt="MDN infographic" />
+```
+
+```css interactive-example
+img {
+  display: block;
+  margin: 0 auto;
+  width: 260px;
+  height: 260px;
+}
+```
 
 ## Specifications
 

diff --git a/files/en-us/web/html/attributes/accept/index.md b/files/en-us/web/html/attributes/accept/index.md
@@ -10,7 +10,28 @@ browser-compat: html.elements.input.accept
 
 The **`accept`** attribute takes as its value a comma-separated list of one or more file types, or [unique file type specifiers](#unique_file_type_specifiers), describing which file types to allow.
 
-{{EmbedInteractiveExample("pages/tabbed/attribute-accept.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: accept", "tabbed-shorter")}}
+
+```html interactive-example
+<label for="movie">Choose a movie to upload:</label>
+
+<input type="file" id="movie" name="movie" accept="video/*" />
+
+<label for="poster">Choose a poster:</label>
+
+<input type="file" id="poster" name="poster" accept="image/png, image/jpeg" />
+```
+
+```css interactive-example
+label {
+  display: block;
+  margin-top: 1rem;
+}
+
+input {
+  margin-bottom: 1rem;
+}
+```
 
 ## Overview
 

diff --git a/files/en-us/web/html/attributes/autocomplete/index.md b/files/en-us/web/html/attributes/autocomplete/index.md
@@ -16,7 +16,25 @@ The HTML `autocomplete` attribute lets web developers specify what if any permis
 
 It is available on {{HTMLElement("input")}} elements that take a text or numeric value as input, {{HTMLElement("textarea")}} elements, {{HTMLElement("select")}} elements, and {{HTMLElement("form")}} elements.
 
-{{EmbedInteractiveExample("pages/tabbed/attribute-autocomplete.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: autocomplete", "tabbed-shorter")}}
+
+```html interactive-example
+<label for="firstName">First Name:</label>
+<input name="firstName" id="firstName" type="text" autocomplete="given-name" />
+
+<label for="lastName">Last Name:</label>
+<input name="lastName" id="lastName" type="text" autocomplete="family-name" />
+
+<label for="email">Email:</label>
+<input name="email" id="email" type="email" autocomplete="off" />
+```
+
+```css interactive-example
+label {
+  display: block;
+  margin-top: 1rem;
+}
+```
 
 ## Description
 

diff --git a/files/en-us/web/html/attributes/capture/index.md b/files/en-us/web/html/attributes/capture/index.md
@@ -22,7 +22,28 @@ The `capture` attribute takes as its value a string that specifies which camera
 > [!NOTE]
 > Capture was previously a Boolean attribute which, if present, requested that the device's media capture device(s) such as camera or microphone be used instead of requesting a file input.
 
-{{EmbedInteractiveExample("pages/tabbed/attribute-capture.html", "tabbed-standard")}}
+{{InteractiveExample("HTML Demo: capture", "tabbed-standard")}}
+
+```html interactive-example
+<label for="selfie">Take a picture of your face:</label>
+
+<input type="file" id="selfie" name="selfie" accept="image/*" capture="user" />
+
+<label for="picture">Take a picture using back facing camera:</label>
+
+<input type="file" id="picture" name="picture" accept="image/*" capture="environment" />
+```
+
+```css interactive-example
+label {
+  display: block;
+  margin-top: 1rem;
+}
+
+input {
+  margin-bottom: 1rem;
+}
+```
 
 ## Examples
 

diff --git a/files/en-us/web/html/attributes/disabled/index.md b/files/en-us/web/html/attributes/disabled/index.md
@@ -17,7 +17,39 @@ browser-compat:
 
 The Boolean **`disabled`** attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
 
-{{EmbedInteractiveExample("pages/tabbed/attribute-disabled.html", "tabbed-standard")}}
+{{InteractiveExample("HTML Demo: disabled", "tabbed-standard")}}
+
+```html interactive-example
+<form>
+  <label for="name">Name:</label>
+  <input id="name" name="name" type="text" />
+
+  <label for="emp">Employed:</label>
+  <select id="emp" name="emp" disabled>
+    <option>No</option>
+    <option>Yes</option>
+  </select>
+
+  <label for="empDate">Employment Date:</label>
+  <input id="empDate" name="empDate" type="date" disabled />
+
+  <label for="resume">Resume:</label>
+  <input id="resume" name="resume" type="file" />
+</form>
+```
+
+```css interactive-example
+label {
+  display: block;
+  margin-top: 1em;
+}
+
+*:disabled {
+  background-color: dimgrey;
+  color: linen;
+  opacity: 1;
+}
+```
 
 ## Overview
 

diff --git a/files/en-us/web/html/attributes/for/index.md b/files/en-us/web/html/attributes/for/index.md
@@ -12,7 +12,56 @@ browser-compat:
 
 The **`for`** attribute is an allowed attribute for {{htmlelement("label")}} and {{htmlelement("output")}}. When used on a `<label>` element it indicates the form element that this label describes. When used on an `<output>` element it allows for an explicit relationship between the elements that represent values which are used in the output.
 
-{{EmbedInteractiveExample("pages/tabbed/attribute-for.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: for", "tabbed-shorter")}}
+
+```html interactive-example
+<p>
+  <label>First Name (no "for" attribute):</label>
+  <input id="first" type="text" value="Jane" />
+</p>
+<p>
+  <label for="last">Last Name (w/ "for" attribute):</label>
+  <input id="last" type="text" value="Doe" />
+</p>
+<p id="result">
+  <strong id="result-label">Full Name:</strong>
+  <output for="first last" aria-labelledby="result-label" id="output"></output>
+</p>
+```
+
+```css interactive-example
+label[for='paragraph'] {
+  color: rebbeccapurple;
+}
+
+#result {
+  text-align: center;
+}
+
+#result-label {
+  font-size: 16pt;
+}
+
+#result-label,
+#output {
+  display: block;
+}
+```
+
+```js interactive-example
+const firstNameEl = document.getElementById('first');
+const lastNameEl = document.getElementById('last');
+const outputEl = document.getElementById('output');
+
+function updateOutput() {
+  const value = `${firstNameEl.value} ${lastNameEl.value}`;
+  outputEl.innerText = value;
+}
+
+updateOutput();
+firstNameEl.addEventListener('input', updateOutput);
+lastNameEl.addEventListener('input', updateOutput);
+```
 
 ## Usage
 

diff --git a/files/en-us/web/html/attributes/maxlength/index.md b/files/en-us/web/html/attributes/maxlength/index.md
@@ -20,7 +20,27 @@ Any `maxlength` value must be greater than or equal to the value of [`minlength`
 
 While the browser will generally prevent user from entering more text than the maxlength attribute allows, should the length be longer than the maxlength allows, the read-only {{domxref("ValidityState.tooLong", "tooLong")}} property of a {{domxref("ValidityState")}} object will be true.
 
-{{EmbedInteractiveExample("pages/tabbed/attribute-maxlength.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: maxlength", "tabbed-shorter")}}
+
+```html interactive-example
+<label for="name">Product name:</label>
+<input id="name" name="name" type="text" value="Shampoo" minlength="3" maxlength="20" required />
+
+<label for="description">Product description:</label>
+<textarea id="description" name="description" minlength="10" maxlength="40" required></textarea>
+```
+
+```css interactive-example
+label {
+  display: block;
+  margin-top: 1em;
+}
+
+input:valid,
+textarea:valid {
+  background-color: palegreen;
+}
+```
 
 ## Examples
 

diff --git a/files/en-us/web/html/attributes/minlength/index.md b/files/en-us/web/html/attributes/minlength/index.md
@@ -18,7 +18,27 @@ The input will fail constraint validation if the length of the text value of the
 
 `minlength` does not imply [`required`](/en-US/docs/Web/HTML/Attributes/required); an input only violates a `minlength` constraint if the user has input a value. If an input is not `required`, an empty string can be submitted even if `minlength` is set.
 
-{{EmbedInteractiveExample("pages/tabbed/attribute-minlength.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: minlength", "tabbed-shorter")}}
+
+```html interactive-example
+<label for="name">Product name:</label>
+<input id="name" name="name" type="text" value="Shampoo" minlength="3" maxlength="20" required />
+
+<label for="description">Product description:</label>
+<textarea id="description" name="description" minlength="10" maxlength="40" required></textarea>
+```
+
+```css interactive-example
+label {
+  display: block;
+  margin-top: 1em;
+}
+
+input:valid,
+textarea:valid {
+  background-color: palegreen;
+}
+```
 
 ## Examples
 

diff --git a/files/en-us/web/html/attributes/multiple/index.md b/files/en-us/web/html/attributes/multiple/index.md
@@ -12,7 +12,41 @@ browser-compat:
 
 The Boolean **`multiple`** attribute, if set, means the form control accepts one or more values. The attribute is valid for the {{HTMLElement("input/email", "email")}} and {{HTMLElement("input/file", "file")}} input types and the {{HTMLElement("select")}}. The manner by which the user opts for multiple values depends on the form control.
 
-{{EmbedInteractiveExample("pages/tabbed/attribute-multiple.html", "tabbed-standard")}}
+{{InteractiveExample("HTML Demo: multiple", "tabbed-standard")}}
+
+```html interactive-example
+<label for="recipients">Where should we send the receipt?</label>
+<input id="recipients" name="recipients" type="email" multiple />
+
+<label for="shakes">Which shakes would you like to order?</label>
+<select id="shakes" name="shakes" multiple>
+  <option>Vanilla Shake</option>
+  <option>Strawberry Shake</option>
+  <option>Chocolate Shake</option>
+</select>
+
+<label for="payment">How would you like to pay?</label>
+<select id="payment" name="payment">
+  <option>Credit card</option>
+  <option>Bank Transfer</option>
+</select>
+```
+
+```css interactive-example
+label {
+  display: block;
+  margin-top: 1em;
+}
+
+input,
+select {
+  width: 100%;
+}
+
+input:invalid {
+  background-color: lightpink;
+}
+```
 
 ## Overview
 

diff --git a/files/en-us/web/html/attributes/pattern/index.md b/files/en-us/web/html/attributes/pattern/index.md
@@ -10,7 +10,30 @@ browser-compat: html.elements.input.pattern
 
 The **`pattern`** attribute specifies a [regular expression](/en-US/docs/Web/JavaScript/Guide/Regular_expressions) the form control's value should match. If a non-`null` value doesn't conform to the constraints set by the `pattern` value, the {{domxref('ValidityState')}} object's read-only {{domxref('ValidityState.patternMismatch','patternMismatch')}} property will be true.
 
-{{EmbedInteractiveExample("pages/tabbed/attribute-pattern.html", "tabbed-shorter")}}
+{{InteractiveExample("HTML Demo: pattern", "tabbed-shorter")}}
+
+```html interactive-example
+<label for="username">Username: (3-16 characters)</label>
+<input id="username" name="username" type="text" value="Sasha" pattern="\w{3,16}" required />
+
+<label for="pin">PIN: (4 digits)</label>
+<input id="pin" name="pin" type="password" pattern="\d{4,4}" required />
+```
+
+```css interactive-example
+label {
+  display: block;
+  margin-top: 1em;
+}
+
+input:valid {
+  background-color: palegreen;
+}
+
+input:invalid {
+  background-color: lightpink;
+}
+```
 
 ## Overview