Skip to content
This repository was archived by the owner on Apr 7, 2019. It is now read-only.

Commit df6c2e0

Browse files
EvanLovelyEvanLovely
committed
adding atoms/formts
1 parent bdc7e00 commit df6c2e0

File tree

5 files changed

+80
-0
lines changed

5 files changed

+80
-0
lines changed

‎dist/_patterns/00-atoms/05-forms/00-text-fields.twig

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<fieldset>
2+
<div class="field-container">
3+
<label for="text">Text Input <abbr title="Required">*</abbr></label>
4+
<input id="text" type="text" placeholder="Text Input">
5+
</div>
6+
<div class="field-container">
7+
<label for="password">Password</label>
8+
<input id="password" type="password" placeholder="Type your Password">
9+
</div>
10+
<div class="field-container">
11+
<label for="webaddress">Web Address</label>
12+
<input id="webaddress" type="url" placeholder="http://yoursite.com">
13+
</div>
14+
<div class="field-container">
15+
<label for="emailaddress">Email Address</label>
16+
<input id="emailaddress" type="email" placeholder="[email protected]">
17+
</div>
18+
<div class="field-container">
19+
<label for="search">Search</label>
20+
<input id="search" type="search" placeholder="Enter Search Term">
21+
</div>
22+
<div class="field-container">
23+
<label for="text">Number Input <abbr title="Required">*</abbr></label>
24+
<input id="text" type="number" placeholder="Enter a Number" pattern="[0-9]*">
25+
</div>
26+
<div class="field-container">
27+
<label for="textarea">Textarea</label>
28+
<textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
29+
</div>
30+
<div class="field-container">
31+
<label class="error">Error Input</label>
32+
<input class="is-error" type="text" placeholder="Text Input">
33+
</div>
34+
<div class="field-container">
35+
<label class="valid">Valid</label>
36+
<input class="is-valid" type="text" placeholder="Text Input">
37+
</div>
38+
</fieldset>

‎dist/_patterns/00-atoms/05-forms/01-select-menu.twig

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<fieldset>
2+
<div class="field-container">
3+
<label for="select">Select</label>
4+
<select id="select">
5+
<optgroup label="Option Group">
6+
<option>Option One</option>
7+
<option>Option Two</option>
8+
<option>Option Three</option>
9+
</optgroup>
10+
</select>
11+
</div>
12+
</fieldset>

‎dist/_patterns/00-atoms/05-forms/02-checkbox.twig

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<form action="#">
2+
<fieldset class="options">
3+
<legend>Checkbox <abbr title="Required">*</abbr></legend>
4+
<ul>
5+
<li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
6+
<li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
7+
<li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
8+
</ul>
9+
</fieldset>
10+
</form>

‎dist/_patterns/00-atoms/05-forms/03-radio-buttons.twig

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<form action="#">
2+
<fieldset class="options">
3+
<legend>Radio</legend>
4+
<ul>
5+
<li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
6+
<li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
7+
<li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
8+
</ul>
9+
</fieldset>
10+
</form>

‎dist/_patterns/00-atoms/05-forms/04-html5-inputs.twig

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<fieldset>
2+
<div class="field-container"><label for="ic">Color input</label> <input type="color" id="ic" value="#000000"></div>
3+
<div class="field-container"><label for="in">Number input</label> <input type="number" id="in" min="0" max="10" value="5"></div>
4+
<div class="field-container"><label for="ir">Range input</label> <input type="range" id="ir" value="10"></div>
5+
<div class="field-container"><label for="idd">Date input</label> <input type="date" id="idd" value="1970-01-01"></div>
6+
<div class="field-container"><label for="idm">Month input</label> <input type="month" id="idm" value="1970-01"></div>
7+
<div class="field-container"><label for="idw">Week input</label> <input type="week" id="idw" value="1970-W01"></div>
8+
<div class="field-container"><label for="idt">Datetime input</label> <input type="datetime" id="idt" value="1970-01-01T00:00:00Z"></div>
9+
<div class="field-container"><label for="idtl">Datetime-local input</label> <input type="datetime-local" id="idtl" value="1970-01-01T00:00"></div>
10+
</fieldset>

0 commit comments

Comments
 (0)