Skip to content

Commit 1f9c3f3

Browse files
jgthmsjgthms
committed
Add examples
1 parent ebaed94 commit 1f9c3f3

20 files changed

+531
-277
lines changed

‎_config.local.yml

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
title: HTML Reference
2+
subtitle: "A free visual guide to the most popular CSS properties"
23
description: A free guide to all HTML elements and attributes.
34
share: "HTML Reference: a free guide to all HTML elements and attributes."
45
url: http://localhost:4000

‎_config.yml

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
title: HTML Reference
2+
subtitle: "A free visual guide to the most popular CSS properties"
23
description: A free guide to all HTML elements and attributes.
34
share: "HTML Reference: a free guide to all HTML elements and attributes."
45
url: http://htmlreference.io

‎_includes/_static/main-list.html

+234
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
<section id="input" class="element">
2+
<header class="element-header">
3+
<nav class="element-links">
4+
<a class="element-links-direct" href="\{{site.url}}/element/{{element_name}}/" data-element-name="{{element_name}}" data-tooltip="Single page for this element" target="_blank">Link</a>
5+
<a class="element-share" data-tooltip="Share on Twitter or Facebook" data-element-name="{{element_name}}">Share</a>
6+
<a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/{{element_name}}" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
7+
</nav>
8+
<h2 class="element-name">
9+
<a href="/#input">
10+
<span>#</span>
11+
input
12+
</a>
13+
</h2>
14+
<div class="element-description">
15+
The HTML element &lt;input&gt; is used to create interactive controls for web-based forms in order to accept data from the user. How an &lt;input&gt; works varies considerably depending on the value of its type attribute.
16+
</div>
17+
</header>
18+
19+
<article class="attribute attribute--required">
20+
<header class="attribute-header">
21+
<h3 class="attribute-name">
22+
<span class="tag">type</span>
23+
</h3>
24+
<div class="attribute-description">
25+
<p>Defines the type of form input.</p>
26+
<strong class="attribute-is-required">Required.</strong>
27+
</div>
28+
</header>
29+
<div class="attribute-values">
30+
<article class="value">
31+
<header class="value-header">
32+
<h4 class="value-name">
33+
<span class="tag">"text"</span>
34+
</h4>
35+
<div class="value-description">
36+
<p>Simple single line text input that accepts any type of character.</p>
37+
</div>
38+
</header>
39+
<aside class="value-preview">
40+
<div class="value-output"><input type="text"></div>
41+
</aside>
42+
</article>
43+
<article class="value">
44+
<header class="value-header">
45+
<h4 class="value-name">
46+
<span class="tag">"email"</span>
47+
</h4>
48+
<div class="value-description">
49+
<p>Like a text input, but the browser will try to only allow valid email addresses.</p>
50+
<p>On mobile devices, the email keyboard will show up.</p>
51+
</div>
52+
</header>
53+
<aside class="value-preview">
54+
<div class="value-output"><input type="email"></div>
55+
</aside>
56+
</article>
57+
<article class="value">
58+
<header class="value-header">
59+
<h4 class="value-name">
60+
<span class="tag">"number"</span>
61+
</h4>
62+
<div class="value-description">
63+
<p>Like a text input, but the browser will try to only allow numbers.</p>
64+
<p>On mobile devices, the numeric keyboard will show up.</p>
65+
</div>
66+
</header>
67+
<aside class="value-preview">
68+
<div class="value-output"><input type="number"></div>
69+
</aside>
70+
</article>
71+
<article class="value">
72+
<header class="value-header">
73+
<h4 class="value-name">
74+
<span class="tag">"checkbox"</span>
75+
</h4>
76+
<div class="value-description">
77+
<p>A toggle checkbox that can only return one of two values: checked or unchecked.</p>
78+
</div>
79+
</header>
80+
<aside class="value-preview">
81+
<div class="value-output"><input type="checkbox"></div>
82+
</aside>
83+
</article>
84+
<div class="value value--example">
85+
<header class="value-header">
86+
<div class="value-description">
87+
<p>You can wrap a checkbox in a label, to increase the click area:</p>
88+
<pre class="value-code">&lt;label&gt;
89+
&lt;input type=&quot;checkbox&quot;
90+
I accept the terms and conditions
91+
&lt;/label&gt;
92+
</pre>
93+
<p>Notice how clicking the text toggles the checkbox.</p>
94+
</div>
95+
</header>
96+
<aside class="value-preview">
97+
<div class="value-output">
98+
<label>
99+
<input type="checkbox">
100+
I accept the terms and conditions
101+
</label>
102+
</div>
103+
</aside>
104+
</div>
105+
<article class="value">
106+
<header class="value-header">
107+
<h4 class="value-name">
108+
<span class="tag">"radio"</span>
109+
</h4>
110+
<div class="value-description">
111+
<p>Needs to be used used in combination with other radio buttons, so that they are mutually exclusive.</p>
112+
</div>
113+
</header>
114+
<aside class="value-preview">
115+
<div class="value-output"><input type="radio"></div>
116+
</aside>
117+
</article>
118+
<div class="value value--example">
119+
<header class="value-header">
120+
<div class="value-description">
121+
<p>You link radio buttons through a similar <strong>name</strong> attribute:</p>
122+
<pre class="value-code">&lt;label&gt;
123+
&lt;input type=&quot;radio&quot; name=&quot;newsletter&quot; value=&quot;yes&quot;&gt;
124+
Yes
125+
&lt;/label&gt;
126+
&lt;label&gt;
127+
&lt;input type=&quot;radio&quot; name=&quot;newsletter&quot; value=&quot;no&quot;&gt;
128+
No
129+
&lt;/label&gt;
130+
</pre>
131+
<p>Notice how clicking one deselects the other.</p>
132+
</div>
133+
</header>
134+
<aside class="value-preview">
135+
<div class="value-output">
136+
<label>
137+
<input type="radio" name="newsletter" value="yes">
138+
Yes
139+
</label>
140+
<label>
141+
<input type="radio" name="newsletter" value="no">
142+
No
143+
</label>
144+
</div>
145+
</aside>
146+
</div>
147+
</div>
148+
</article>
149+
150+
<article class="attribute attribute--required">
151+
<div class="attribute-header">
152+
<h3 class="attribute-name">
153+
<span class="tag">name</span>
154+
</h3>
155+
<div class="attribute-description">
156+
<p>Defines the unique identifier for that input within the form. It allows the server to access each input's value when submitted.</p>
157+
</div>
158+
</div>
159+
<div class="attribute-values">
160+
<article class="value">
161+
<header class="value-header">
162+
<h4 class="value-name">
163+
<span class="tag">"first_name"</span>
164+
</h4>
165+
<div class="value-description">
166+
<p>The name value can only contain alphanumeric characters <code>a-z</code> <code>A-Z</code> <code>0-9</code> and some special characters: <code>_</code> <code>-</code> …</p>
167+
</div>
168+
</header>
169+
<aside class="value-preview">
170+
<div class="value-output">
171+
<input type="text" name="first_name">
172+
</div>
173+
</aside>
174+
</div>
175+
</div>
176+
</article>
177+
178+
<article class="attribute">
179+
<div class="attribute-header">
180+
<h3 class="attribute-name">
181+
<span class="tag">placeholder</span>
182+
</h3>
183+
<div class="attribute-description">
184+
<p>Define a non-selectable placeholder text that only appears when the input is empty.</p>
185+
</div>
186+
</div>
187+
<div class="attribute-values">
188+
<article class="value">
189+
<header class="value-header">
190+
<h4 class="value-name">
191+
<span class="tag">"e.g. [email protected]"</span>
192+
</h4>
193+
<div class="value-description">
194+
<p>Simple single line text input that accepts any type of character.</p>
195+
</div>
196+
</header>
197+
<aside class="value-preview">
198+
<div class="value-output"><input type="text" placeholder="e.g. [email protected]"></div>
199+
</aside>
200+
</article>
201+
</div>
202+
</article>
203+
204+
<article class="attribute attribute--no-value">
205+
<div class="attribute-header">
206+
<h3 class="attribute-name">
207+
<span class="tag">required</span>
208+
</h3>
209+
<div class="attribute-description">
210+
<p>Tells the browser that this input is <strong>required</strong>. Leaving it empty will show a warning.</p>
211+
</div>
212+
</div>
213+
<div class="attribute-values">
214+
<div class="value value--example">
215+
<header class="value-header">
216+
<div class="value-description">
217+
<p>You simply need to add the <code>required</code> attribute with no value:</p>
218+
<pre class="value-code">&lt;form&gt;
219+
&lt;input type=&quot;text&quot; required&gt;
220+
&lt;/form&gt;</pre>
221+
<p>The browser should show a warning if you try to submit the form with an empty text input.</p>
222+
</div>
223+
</header>
224+
<aside class="value-preview">
225+
<div class="value-output">
226+
<form>
227+
<input type="text" required>
228+
</form>
229+
</div>
230+
</aside>
231+
</div>
232+
</div>
233+
</article>
234+
</section>

‎_includes/_static/menu-list.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
2+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
3+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
4+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
5+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
6+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
7+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
8+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
9+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
10+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
11+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
12+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
13+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
14+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
15+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
16+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
17+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
18+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
19+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
20+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
21+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
22+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
23+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
24+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
25+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
26+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
27+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>
28+
<li><a href="{{site.url}}/#input" data-property-name="input">input</a></li>

0 commit comments

Comments
 (0)