1 | # commonform-html
|
2 |
|
3 | render [Common Forms](https://www.npmjs.com/package/commonform-validate) in HTML
|
4 |
|
5 | ```javascript
|
6 | var html = require('commonform-html')
|
7 | ```
|
8 |
|
9 | Call the exported function with a Common Form, receive a string of HTML:
|
10 |
|
11 | ```javascript
|
12 | var assert = require('assert')
|
13 |
|
14 | assert.deepStrictEqual(
|
15 | html({ content: ['Just a test'] }),
|
16 | '<div class="article"><p>Just a test</p></div>'
|
17 | )
|
18 |
|
19 | assert.deepStrictEqual(
|
20 | html({
|
21 | content: [
|
22 | {
|
23 | heading: 'A',
|
24 | form: { content: ['This is A'] }
|
25 | },
|
26 | {
|
27 | heading: 'B',
|
28 | form: { content: ['This is B'] }
|
29 | }
|
30 | ]
|
31 | }),
|
32 | [
|
33 | '<div class="article">',
|
34 | '<div class="section">',
|
35 | '<h1>A</h1>',
|
36 | '<p>This is A</p>',
|
37 | '</div>',
|
38 | '<div class="section">',
|
39 | '<h1>B</h1>',
|
40 | '<p>This is B</p>',
|
41 | '</div>',
|
42 | '</div>'
|
43 | ]
|
44 | .join('')
|
45 | )
|
46 | ```
|
47 |
|
48 | You can also pass an `Array` of fill-in-the-blank values:
|
49 |
|
50 | ```javascript
|
51 | assert.deepStrictEqual(
|
52 | html(
|
53 | {
|
54 | content: [
|
55 | { blank: '' },
|
56 | { form: { content: ['Another ', { blank: '' }] } }
|
57 | ]
|
58 | },
|
59 | [
|
60 | { blank: ['content', 0], value: 'Joe' },
|
61 | { blank: ['content', 1, 'form', 'content', 1], value: 'Bob' }
|
62 | ]
|
63 | ),
|
64 | (
|
65 | '<div class="article">' +
|
66 | '<p><span class="blank">Joe</span></p>' +
|
67 | '<div class="section">' +
|
68 | '<p>Another <span class="blank">Bob</span></p>' +
|
69 | '</div>' +
|
70 | '</div>'
|
71 | )
|
72 | )
|
73 | ```
|
74 |
|
75 | A final argument of `{ html5: true }` specifies HTML5 output:
|
76 |
|
77 | ```javascript
|
78 | assert.deepStrictEqual(
|
79 | html({ content: ['Just a test'] }, [], { html5: true }),
|
80 | '<article><p>Just a test</p></article>'
|
81 | )
|
82 |
|
83 | assert.deepStrictEqual(
|
84 | html(
|
85 | {
|
86 | content: [
|
87 | 'First text defines a ',
|
88 | { definition: 'Term' },
|
89 | {
|
90 | heading: 'A',
|
91 | form: { content: ['This is A'] }
|
92 | },
|
93 | 'Middle text uses a ',
|
94 | { use: 'Term' },
|
95 | {
|
96 | heading: 'B',
|
97 | form: { content: ['This is B'] }
|
98 | },
|
99 | 'Last text references ',
|
100 | { reference: 'Elsewhere' }
|
101 | ]
|
102 | },
|
103 | [],
|
104 | { html5: true }
|
105 | ),
|
106 | [
|
107 | '<article>', // not <div class="article">
|
108 | '<p>',
|
109 | 'First text defines a ',
|
110 | '<dfn>Term</dfn>', // not <span class="definition">
|
111 | '</p>',
|
112 | '<section>', // not <div class="section">
|
113 | '<h1>A</h1>',
|
114 | '<p>This is A</p>',
|
115 | '</section>',
|
116 | '<p>',
|
117 | 'Middle text uses a ',
|
118 | '<span class="term">Term</span>',
|
119 | '</p>',
|
120 | '<section>',
|
121 | '<h1>B</h1>',
|
122 | '<p>This is B</p>',
|
123 | '</section>',
|
124 | '<p>',
|
125 | 'Last text references ',
|
126 | '<span class="reference">Elsewhere</span>',
|
127 | '</p>',
|
128 | '</article>'
|
129 | ]
|
130 | .join('')
|
131 | )
|
132 | ```
|
133 |
|
134 | The option `{ lists: true }` renders any series of forms without headings as an ordered list:
|
135 |
|
136 | ```javascript
|
137 | assert.deepStrictEqual(
|
138 | html(
|
139 | {
|
140 | content: [
|
141 | {
|
142 | heading: 'First-Level Heading',
|
143 | form: {
|
144 | content: [
|
145 | 'Here comes a list.',
|
146 | { form: { content: ['Apple'] } },
|
147 | { form: { content: ['Orange'] } },
|
148 | 'And another one!',
|
149 | {
|
150 | form: {
|
151 | content: [
|
152 | 'Red',
|
153 | { form: { content: ['Red-Orange'] } },
|
154 | { form: { content: ['Red-Yellow'] } }
|
155 | ]
|
156 | }
|
157 | },
|
158 | { form: { content: ['Purple'] } },
|
159 | {
|
160 | form: {
|
161 | content: [
|
162 | { form: { content: ['More'] } },
|
163 | { form: { content: ['Even More'] } }
|
164 | ]
|
165 | }
|
166 | },
|
167 | 'Last text!'
|
168 | ]
|
169 | }
|
170 | }
|
171 | ]
|
172 | },
|
173 | [],
|
174 | { html5: true, lists: true }
|
175 | ),
|
176 | [
|
177 | '<article>',
|
178 | '<section>',
|
179 | '<h1>First-Level Heading</h1>',
|
180 | '<p>Here comes a list.</p>',
|
181 | '<ol>',
|
182 | '<li><p>Apple</p></li>',
|
183 | '<li><p>Orange</p></li>',
|
184 | '</ol>',
|
185 | '<p>And another one!</p>',
|
186 | '<ol>',
|
187 | '<li>',
|
188 | '<p>Red</p>',
|
189 | '<ol>',
|
190 | '<li><p>Red-Orange</p></li>',
|
191 | '<li><p>Red-Yellow</p></li>',
|
192 | '</ol>',
|
193 | '</li>',
|
194 | '<li><p>Purple</p></li>',
|
195 | '<li>',
|
196 | '<ol>',
|
197 | '<li><p>More</p></li>',
|
198 | '<li><p>Even More</p></li>',
|
199 | '</ol>',
|
200 | '</li>',
|
201 | '</ol>',
|
202 | '<p>Last text!</p>',
|
203 | '</section>',
|
204 | '</article>'
|
205 | ]
|
206 | .join('')
|
207 | )
|
208 | ```
|
209 |
|
210 | You can also set a title, edition, or both:
|
211 |
|
212 | ```javascript
|
213 | assert.deepStrictEqual(
|
214 | html(
|
215 | { content: ['Hello, ', { blank: '' }] },
|
216 | [{ blank: ['content', 1], value: 'Joe' }],
|
217 | { title: 'Welcome' }
|
218 | ),
|
219 | [
|
220 | '<div class="article">',
|
221 | '<h1>Welcome</h1>',
|
222 | '<p>',
|
223 | 'Hello, <span class="blank">Joe</span>',
|
224 | '</p>',
|
225 | '</div>'
|
226 | ]
|
227 | .join('')
|
228 | )
|
229 |
|
230 | assert.deepStrictEqual(
|
231 | html(
|
232 | { content: ['Hello, ', { blank: '' }] },
|
233 | [{ blank: ['content', 1], value: 'Joe' }],
|
234 | { title: 'Welcome', edition: '1e' }
|
235 | ),
|
236 | [
|
237 | '<div class="article">',
|
238 | '<h1>Welcome</h1>',
|
239 | '<p class="edition">1e</p>',
|
240 | '<p>',
|
241 | 'Hello, <span class="blank">Joe</span>',
|
242 | '</p>',
|
243 | '</div>'
|
244 | ]
|
245 | .join('')
|
246 | )
|
247 | ```
|
248 |
|
249 | Set `options.hash` to print the form hash at the top:
|
250 |
|
251 | ```javascript
|
252 | assert.deepStrictEqual(
|
253 | html(
|
254 | { content: ['Hello, ', { blank: '' }] },
|
255 | [{ blank: ['content', 1], value: 'Joe' }],
|
256 | { title: 'Welcome', edition: '1e', hash: true }
|
257 | ),
|
258 | [
|
259 | '<div class="article">',
|
260 | '<h1>Welcome</h1>',
|
261 | '<p class="edition">1e</p>',
|
262 | '<p class="hash"><code>' +
|
263 | 'd36c54da27de611b3a9ce7d08638bbd2' +
|
264 | '00cf5f3bb41d59320d04bba02ca48f85' +
|
265 | '</code></p>',
|
266 | '<p>',
|
267 | 'Hello, <span class="blank">Joe</span>',
|
268 | '</p>',
|
269 | '</div>'
|
270 | ]
|
271 | .join('')
|
272 | )
|
273 | ```
|