Skip to content

Commit

Permalink
[e] (0) Add some examples of app-like usages to increase example variety
Browse files Browse the repository at this point in the history 
Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=25747
Affected topics: CSS, HTML

git-svn-id: http://svn.whatwg.org/webapps@8759 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Sep 11, 2014
1 parent 4f35ee5 commit f79e567
Show file tree
Hide file tree
Showing 3 changed files with 440 additions and 5 deletions.
149 changes: 147 additions & 2 deletions complete.html
View file
Expand Up @@ -291,7 +291,7 @@
</style><link rel=stylesheet href=status.css><body onload=init()>
<header id=head class="head with-buttons">
<p><a href=//www.whatwg.org/ class=logo><img src=/images/logo width=101 alt=WHATWG height=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1><h2 id=living-standard-—-last-updated-[date:-01-jan-1901] class="no-num no-toc">Living Standard — Last Updated <span class=pubdate>9 September 2014</span></h2></hgroup>
<hgroup><h1 class=allcaps>HTML</h1><h2 id=living-standard-—-last-updated-[date:-01-jan-1901] class="no-num no-toc">Living Standard — Last Updated <span class=pubdate>11 September 2014</span></h2></hgroup>

<nav>
<div>
Expand Down Expand Up @@ -10419,6 +10419,39 @@ <h4 id=the-article-element>4.3.2 The <dfn><code>article</code></dfn> element</h4

</div>

<div class=example>

<p>In this example, <code id=the-article-element:the-article-element-12><a href=#the-article-element>article</a></code> elements are used to host widgets on a portal page.</p>

<pre>&lt;DOCTYPE HTML>
&lt;title>eHome Portal&lt;/title>
&lt;link rel=stylesheet href="/styles/main.js">
&lt;article>
&lt;h1>Stocks&lt;/h1>
&lt;style scoped> @import url(/widgets/stocks/look.css); &lt;/style>
&lt;script src="/widgets/stocks/core.js">&lt;/script>
&lt;table>
&lt;thead> &lt;tr> &lt;th> Stock &lt;th> Value &lt;th> Delta
&lt;tbody> &lt;template> &lt;tr> &lt;td> &lt;td> &lt;td> &lt;/template>
&lt;/table>
&lt;p> &lt;input type=button value="Refresh" onclick="stocks.refresh()">
&lt;/article>
&lt;article>
&lt;h1>News&lt;/h1>
&lt;style scoped> @import url(/widgets/news/look.css); &lt;/style>
&lt;script src="/widgets/news/core.js">&lt;/script>
&lt;ul>
&lt;template>
&lt;li>
&lt;p>&lt;img src alt title> &lt;strong>&lt;/strong>
&lt;p>
&lt;/template>
&lt;/ul>
&lt;p> &lt;input type=button value="Refresh" onclick="news.refresh()">
&lt;/article></pre>

</div>



<h4 id=the-section-element>4.3.3 The <dfn><code>section</code></dfn> element</h4>
Expand Down Expand Up @@ -10721,6 +10754,25 @@ <h4 id=the-nav-element>4.3.4 The <dfn><code>nav</code></dfn> element</h4>

</div>

<div class=example>

<p>In this example, <code id=the-nav-element:the-nav-element-6><a href=#the-nav-element>nav</a></code> is used in an e-mail application, to let the user switch
folders:</p>

<pre>&lt;p>&lt;input type=button value="Compose" onclick="compose()">&lt;/p>
&lt;nav>
&lt;h1>Folders&lt;/h1>
&lt;ul>
&lt;li> &lt;a href="/inbox" onclick="return openFolder(this.href)">Inbox&lt;/a> &lt;span class=count>&lt;/span>
&lt;li> &lt;a href="/sent" onclick="return openFolder(this.href)">Sent&lt;/a>
&lt;li> &lt;a href="/drafts" onclick="return openFolder(this.href)">Drafts&lt;/a>
&lt;li> &lt;a href="/trash" onclick="return openFolder(this.href)">Trash&lt;/a>
&lt;li> &lt;a href="/customers" onclick="return openFolder(this.href)">Customers&lt;/a>
&lt;/ul>
&lt;/nav></pre>

</div>



<h4 id=the-aside-element>4.3.5 The <dfn><code>aside</code></dfn> element</h4>
Expand Down Expand Up @@ -10994,6 +11046,40 @@ <h4 id=the-hgroup-element>4.3.7 The <dfn><code>hgroup</code></dfn> element</h4>

</div>

<div class=example>

<p>In the following example, an <code id=the-hgroup-element:the-hgroup-element-8><a href=#the-hgroup-element>hgroup</a></code> element is used to mark up a two-level
heading in a wizard-style dialog box:</p>

<pre>&lt;dialog onclose="walletSetup.continue(this.returnValue)">
&lt;hgroup>
&lt;h1>Wallet Setup&lt;/h1>
&lt;h2>Configure your Wallet funding source&lt;/h2>
&lt;/hgroup>
&lt;p>Your Wallet can be used to buy wands at the merchant in town, to buy potions from travelling
salesmen you may find in the dungeons, and to pay for mercenaries.&lt;/p>
&lt;p>We support two payment sources:&lt;/p>
&lt;form method=dialog>
&lt;fieldset oninput="this.getElementsByTagName('input')[0].checked = true">
&lt;legend> &lt;label> &lt;input type=radio name=payment-type value=cc> Credit Card &lt;/label> &lt;/legend>
&lt;p>&lt;label>Name on card: &lt;input name=cc1 autocomplete="section-cc cc-name" placeholder="Y. Name">&lt;/label>
&lt;p>&lt;label>Card number: &lt;input name=cc2 inputmode=numeric autocomplete="section-cc cc-number" placeholder="6331 1019 9999 0016">&lt;/label>
&lt;p>&lt;label>Expiry Date: &lt;input name=cc3 type=month autocomplete="section-cc cc-exp" placeholder="2020-02">&lt;/label>
&lt;p>&lt;label>Security Code: &lt;input name=cc4 inputmode=numeric autocomplete="section-cc cc-csc" placeholder="246">&lt;/label>
&lt;/fieldset>
&lt;fieldset oninput="this.getElementsByTagName('input')[0].checked = true">
&lt;legend> &lt;label> &lt;input type=radio name=payment-type value=bank> Checking Account &lt;/label> &lt;/legend>
&lt;p>&lt;label>Name on account: &lt;input name=bank1 autocomplete="section-bank cc-name">&lt;/label>
&lt;p>&lt;label>Routing number: &lt;input name=bank2 inputmode=numeric>&lt;/label>
&lt;p>&lt;label>Account number: &lt;input name=bank3 inputmode=numeric>&lt;/label>
&lt;/fieldset>
&lt;button type=submit value="back"> ← Back &lt;/button>
&lt;button type=submit value="next"> Next → &lt;/button>
&lt;/form>
&lt;/dialog></pre>

</div>



<h4 id=the-header-element>4.3.8 The <dfn><code>header</code></dfn> element</h4>
Expand Down Expand Up @@ -28558,6 +28644,46 @@ <h4 id=the-td-element>4.9.9 The <dfn><code>td</code></dfn> element</h4>



<div class=example>

<p>In this example, we see a snippet of a Web application consisting of a grid of editable cells
(essentially a simple spreadsheet). One of the cells has been configured to show the sum of the
cells above it. Three have been marked as headings, which use <code id=the-td-element:the-th-element-2><a href=#the-th-element>th</a></code> elements instead of
<code id=the-td-element:the-td-element-6><a href=#the-td-element>td</a></code> elements. A script would attach event handlers to these elements to maintain the
total.</p>

<pre>&lt;table>
&lt;tr>
&lt;th>&lt;input value="Name">
&lt;th>&lt;input value="Paid ($)">
&lt;tr>
&lt;td>&lt;input value="Jeff">
&lt;td>&lt;input value="14">
&lt;tr>
&lt;td>&lt;input value="Britta">
&lt;td>&lt;input value="9">
&lt;tr>
&lt;td>&lt;input value="Abed">
&lt;td>&lt;input value="25">
&lt;tr>
&lt;td>&lt;input value="Shirley">
&lt;td>&lt;input value="2">
&lt;tr>
&lt;td>&lt;input value="Annie">
&lt;td>&lt;input value="5">
&lt;tr>
&lt;td>&lt;input value="Troy">
&lt;td>&lt;input value="5">
&lt;tr>
&lt;td>&lt;input value="Pierce">
&lt;td>&lt;input value="1000">
&lt;tr>
&lt;th>&lt;input value="Total">
&lt;td>&lt;output value="1060">
&lt;/table></pre>

</div>


<h4 id=the-th-element>4.9.10 The <dfn><code>th</code></dfn> element</h4>

Expand Down Expand Up @@ -40604,7 +40730,7 @@ <h6 id=autofilling-form-controls:-the-autocomplete-attribute>4.10.19.8.1 Autofil
<td>Berners-Lee
<td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-24>Text</a>
<tr><td colspan=4>"<dfn id=attr-fe-autocomplete-cc-number><code>cc-number</code></dfn>"
<td>Code identifying the payment instrument (e.g. the credit card number, bank account number)
<td>Code identifying the payment instrument (e.g. the credit card number)
<td><a href=#ascii-digits id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits>ASCII digits</a>
<td>4114360123456785
<td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-25>Text</a>
Expand Down Expand Up @@ -44306,6 +44432,25 @@ <h4 id=the-dialog-element>4.11.7 The <dfn><code>dialog</code></dfn> element</h4>



<div class=example>

<p>This dialog box has some small print. The <code id=the-dialog-element:the-main-element><a href=#the-main-element>main</a></code> element is used to draw the user's
attention to the more important parts.</p>

<pre>&lt;dialog>
&lt;h1>Add to Wallet&lt;/h1>
&lt;main>
&lt;p>How many gold coins do you want to add to your wallet?&lt;/p>
&lt;p>&lt;input name=amt type=number min=0 step=0.01 value=100>&lt;/p>
&lt;/main>
&lt;p>&lt;small>You add coins at your own risk.&lt;/small>&lt;/p>
&lt;p>&lt;label>&lt;input name=round type=checkbox> Only add perfectly round coins &lt;/label>
&lt;p>&lt;input type=button onclick="submit()" value="Add Coins">&lt;/p>
&lt;/dialog></pre>

</div>



<h5 id=anchor-points>4.11.7.1 Anchor points</h5>

Expand Down
149 changes: 147 additions & 2 deletions index
View file
Expand Up @@ -291,7 +291,7 @@
</style><link rel=stylesheet href=status.css><body onload=init()>
<header id=head class="head with-buttons">
<p><a href=//www.whatwg.org/ class=logo><img src=/images/logo width=101 alt=WHATWG height=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1><h2 id=living-standard-—-last-updated-[date:-01-jan-1901] class="no-num no-toc">Living Standard — Last Updated <span class=pubdate>9 September 2014</span></h2></hgroup>
<hgroup><h1 class=allcaps>HTML</h1><h2 id=living-standard-—-last-updated-[date:-01-jan-1901] class="no-num no-toc">Living Standard — Last Updated <span class=pubdate>11 September 2014</span></h2></hgroup>

<nav>
<div>
Expand Down Expand Up @@ -10419,6 +10419,39 @@ c-end = "-->"</pre>

</div>

<div class=example>

<p>In this example, <code id=the-article-element:the-article-element-12><a href=#the-article-element>article</a></code> elements are used to host widgets on a portal page.</p>

<pre>&lt;DOCTYPE HTML>
&lt;title>eHome Portal&lt;/title>
&lt;link rel=stylesheet href="/styles/main.js">
&lt;article>
&lt;h1>Stocks&lt;/h1>
&lt;style scoped> @import url(/widgets/stocks/look.css); &lt;/style>
&lt;script src="/widgets/stocks/core.js">&lt;/script>
&lt;table>
&lt;thead> &lt;tr> &lt;th> Stock &lt;th> Value &lt;th> Delta
&lt;tbody> &lt;template> &lt;tr> &lt;td> &lt;td> &lt;td> &lt;/template>
&lt;/table>
&lt;p> &lt;input type=button value="Refresh" onclick="stocks.refresh()">
&lt;/article>
&lt;article>
&lt;h1>News&lt;/h1>
&lt;style scoped> @import url(/widgets/news/look.css); &lt;/style>
&lt;script src="/widgets/news/core.js">&lt;/script>
&lt;ul>
&lt;template>
&lt;li>
&lt;p>&lt;img src alt title> &lt;strong>&lt;/strong>
&lt;p>
&lt;/template>
&lt;/ul>
&lt;p> &lt;input type=button value="Refresh" onclick="news.refresh()">
&lt;/article></pre>

</div>



<h4 id=the-section-element>4.3.3 The <dfn><code>section</code></dfn> element</h4>
Expand Down Expand Up @@ -10721,6 +10754,25 @@ c-end = "-->"</pre>

</div>

<div class=example>

<p>In this example, <code id=the-nav-element:the-nav-element-6><a href=#the-nav-element>nav</a></code> is used in an e-mail application, to let the user switch
folders:</p>

<pre>&lt;p>&lt;input type=button value="Compose" onclick="compose()">&lt;/p>
&lt;nav>
&lt;h1>Folders&lt;/h1>
&lt;ul>
&lt;li> &lt;a href="/inbox" onclick="return openFolder(this.href)">Inbox&lt;/a> &lt;span class=count>&lt;/span>
&lt;li> &lt;a href="/sent" onclick="return openFolder(this.href)">Sent&lt;/a>
&lt;li> &lt;a href="/drafts" onclick="return openFolder(this.href)">Drafts&lt;/a>
&lt;li> &lt;a href="/trash" onclick="return openFolder(this.href)">Trash&lt;/a>
&lt;li> &lt;a href="/customers" onclick="return openFolder(this.href)">Customers&lt;/a>
&lt;/ul>
&lt;/nav></pre>

</div>



<h4 id=the-aside-element>4.3.5 The <dfn><code>aside</code></dfn> element</h4>
Expand Down Expand Up @@ -10994,6 +11046,40 @@ Space is not the only void</pre>

</div>

<div class=example>

<p>In the following example, an <code id=the-hgroup-element:the-hgroup-element-8><a href=#the-hgroup-element>hgroup</a></code> element is used to mark up a two-level
heading in a wizard-style dialog box:</p>

<pre>&lt;dialog onclose="walletSetup.continue(this.returnValue)">
&lt;hgroup>
&lt;h1>Wallet Setup&lt;/h1>
&lt;h2>Configure your Wallet funding source&lt;/h2>
&lt;/hgroup>
&lt;p>Your Wallet can be used to buy wands at the merchant in town, to buy potions from travelling
salesmen you may find in the dungeons, and to pay for mercenaries.&lt;/p>
&lt;p>We support two payment sources:&lt;/p>
&lt;form method=dialog>
&lt;fieldset oninput="this.getElementsByTagName('input')[0].checked = true">
&lt;legend> &lt;label> &lt;input type=radio name=payment-type value=cc> Credit Card &lt;/label> &lt;/legend>
&lt;p>&lt;label>Name on card: &lt;input name=cc1 autocomplete="section-cc cc-name" placeholder="Y. Name">&lt;/label>
&lt;p>&lt;label>Card number: &lt;input name=cc2 inputmode=numeric autocomplete="section-cc cc-number" placeholder="6331 1019 9999 0016">&lt;/label>
&lt;p>&lt;label>Expiry Date: &lt;input name=cc3 type=month autocomplete="section-cc cc-exp" placeholder="2020-02">&lt;/label>
&lt;p>&lt;label>Security Code: &lt;input name=cc4 inputmode=numeric autocomplete="section-cc cc-csc" placeholder="246">&lt;/label>
&lt;/fieldset>
&lt;fieldset oninput="this.getElementsByTagName('input')[0].checked = true">
&lt;legend> &lt;label> &lt;input type=radio name=payment-type value=bank> Checking Account &lt;/label> &lt;/legend>
&lt;p>&lt;label>Name on account: &lt;input name=bank1 autocomplete="section-bank cc-name">&lt;/label>
&lt;p>&lt;label>Routing number: &lt;input name=bank2 inputmode=numeric>&lt;/label>
&lt;p>&lt;label>Account number: &lt;input name=bank3 inputmode=numeric>&lt;/label>
&lt;/fieldset>
&lt;button type=submit value="back"> ← Back &lt;/button>
&lt;button type=submit value="next"> Next → &lt;/button>
&lt;/form>
&lt;/dialog></pre>

</div>



<h4 id=the-header-element>4.3.8 The <dfn><code>header</code></dfn> element</h4>
Expand Down Expand Up @@ -28558,6 +28644,46 @@ the cell that corresponds to the values of the two dice.



<div class=example>

<p>In this example, we see a snippet of a Web application consisting of a grid of editable cells
(essentially a simple spreadsheet). One of the cells has been configured to show the sum of the
cells above it. Three have been marked as headings, which use <code id=the-td-element:the-th-element-2><a href=#the-th-element>th</a></code> elements instead of
<code id=the-td-element:the-td-element-6><a href=#the-td-element>td</a></code> elements. A script would attach event handlers to these elements to maintain the
total.</p>

<pre>&lt;table>
&lt;tr>
&lt;th>&lt;input value="Name">
&lt;th>&lt;input value="Paid ($)">
&lt;tr>
&lt;td>&lt;input value="Jeff">
&lt;td>&lt;input value="14">
&lt;tr>
&lt;td>&lt;input value="Britta">
&lt;td>&lt;input value="9">
&lt;tr>
&lt;td>&lt;input value="Abed">
&lt;td>&lt;input value="25">
&lt;tr>
&lt;td>&lt;input value="Shirley">
&lt;td>&lt;input value="2">
&lt;tr>
&lt;td>&lt;input value="Annie">
&lt;td>&lt;input value="5">
&lt;tr>
&lt;td>&lt;input value="Troy">
&lt;td>&lt;input value="5">
&lt;tr>
&lt;td>&lt;input value="Pierce">
&lt;td>&lt;input value="1000">
&lt;tr>
&lt;th>&lt;input value="Total">
&lt;td>&lt;output value="1060">
&lt;/table></pre>

</div>


<h4 id=the-th-element>4.9.10 The <dfn><code>th</code></dfn> element</h4>

Expand Down Expand Up @@ -40604,7 +40730,7 @@ MIT Room 32-G524
<td>Berners-Lee
<td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-24>Text</a>
<tr><td colspan=4>"<dfn id=attr-fe-autocomplete-cc-number><code>cc-number</code></dfn>"
<td>Code identifying the payment instrument (e.g. the credit card number, bank account number)
<td>Code identifying the payment instrument (e.g. the credit card number)
<td><a href=#ascii-digits id=autofilling-form-controls:-the-autocomplete-attribute:ascii-digits>ASCII digits</a>
<td>4114360123456785
<td><a href=#control-group-text id=autofilling-form-controls:-the-autocomplete-attribute:control-group-text-25>Text</a>
Expand Down Expand Up @@ -44306,6 +44432,25 @@ dictionary <dfn id=relatedeventinit>RelatedEventInit</dfn> : <a href=#eventinit



<div class=example>

<p>This dialog box has some small print. The <code id=the-dialog-element:the-main-element><a href=#the-main-element>main</a></code> element is used to draw the user's
attention to the more important parts.</p>

<pre>&lt;dialog>
&lt;h1>Add to Wallet&lt;/h1>
&lt;main>
&lt;p>How many gold coins do you want to add to your wallet?&lt;/p>
&lt;p>&lt;input name=amt type=number min=0 step=0.01 value=100>&lt;/p>
&lt;/main>
&lt;p>&lt;small>You add coins at your own risk.&lt;/small>&lt;/p>
&lt;p>&lt;label>&lt;input name=round type=checkbox> Only add perfectly round coins &lt;/label>
&lt;p>&lt;input type=button onclick="submit()" value="Add Coins">&lt;/p>
&lt;/dialog></pre>

</div>



<h5 id=anchor-points>4.11.7.1 Anchor points</h5>

Expand Down

0 comments on commit f79e567

Please sign in to comment.