Artifact
c26628759ee30fc9065ac3d3849c5d378ac5a48635dd8304f628a48823bf8c34:
0000: 0a 3c 66 6f 72 6d 2d 63 6f 6e 74 72 6f 6c 73 3e .<form-controls>
0010: 0a 0a 20 20 3c 6c 61 62 65 6c 3e 0a 20 20 20 20 .. <label>.
0020: 3c 69 6e 70 75 74 20 74 79 70 65 3d 22 63 68 65 <input type="che
0030: 63 6b 62 6f 78 22 20 6f 6e 63 6c 69 63 6b 3d 7b ckbox" onclick={
0040: 20 63 68 65 63 6b 20 7d 3e 20 43 6c 69 63 6b 20 check }> Click
0050: 6d 65 0a 20 20 3c 2f 6c 61 62 65 6c 3e 0a 0a 20 me. </label>..
0060: 20 3c 73 65 6c 65 63 74 3e 0a 20 20 20 20 3c 6f <select>. <o
0070: 70 74 69 6f 6e 20 76 61 6c 75 65 3d 22 61 6c 6c ption value="all
0080: 22 3e 41 6c 6c 3c 2f 6f 70 74 69 6f 6e 3e 0a 20 ">All</option>.
0090: 20 20 20 3c 6f 70 74 69 6f 6e 20 73 65 6c 65 63 <option selec
00a0: 74 65 64 20 76 61 6c 75 65 3d 7b 20 6f 70 74 73 ted value={ opts
00b0: 2e 74 65 78 74 20 7d 3e 6d 79 2d 76 61 6c 75 65 .text }>my-value
00c0: 3c 2f 6f 70 74 69 6f 6e 3e 0a 20 20 3c 2f 73 65 </option>. </se
00d0: 6c 65 63 74 3e 0a 0a 20 20 3c 74 65 78 74 61 72 lect>.. <textar
00e0: 65 61 20 6e 61 6d 65 3d 22 74 78 74 61 31 22 3e ea name="txta1">
00f0: 7b 20 6f 70 74 73 2e 74 65 78 74 20 7d 3c 2f 74 { opts.text }</t
0100: 65 78 74 61 72 65 61 3e 0a 0a 20 20 3c 74 65 78 extarea>.. <tex
0110: 74 61 72 65 61 20 6e 61 6d 65 3d 22 74 78 74 61 tarea name="txta
0120: 32 22 20 70 6c 61 63 65 68 6f 6c 64 65 72 3d 7b 2" placeholder={
0130: 20 6f 70 74 73 2e 74 65 78 74 20 7d 3e 3c 2f 74 opts.text }></t
0140: 65 78 74 61 72 65 61 3e 0a 0a 20 20 3c 6c 61 62 extarea>.. <lab
0150: 65 6c 3e 0a 20 20 20 20 3c 69 6e 70 75 74 20 74 el>. <input t
0160: 79 70 65 3d 22 72 61 64 69 6f 22 20 6f 6e 63 6c ype="radio" oncl
0170: 69 63 6b 3d 7b 20 63 68 65 63 6b 20 7d 3e 20 43 ick={ check }> C
0180: 6c 69 63 6b 20 6d 65 0a 20 20 3c 2f 6c 61 62 65 lick me. </labe
0190: 6c 3e 0a 0a 20 20 3c 66 6f 72 6d 20 6f 6e 73 75 l>.. <form onsu
01a0: 62 6d 69 74 3d 7b 20 63 68 65 63 6b c2 a0 7d 3e bmit={ check..}>
01b0: 0a 20 20 20 20 3c 69 6e 70 75 74 20 76 61 6c 75 . <input valu
01c0: 65 3d 7b 20 6f 70 74 73 2e 74 65 78 74 20 7d 20 e={ opts.text }
01d0: 74 79 70 65 3d 22 74 65 78 74 22 3e 0a 20 20 20 type="text">.
01e0: 20 3c 69 6e 70 75 74 20 76 61 6c 75 65 3d 7b 20 <input value={
01f0: 6f 70 74 73 2e 62 6f 6f 6c 20 7d 20 74 79 70 65 opts.bool } type
0200: 3d 22 74 65 78 74 22 3e 0a 20 20 3c 2f 66 6f 72 ="text">. </for
0210: 6d 3e 0a 0a 20 20 63 68 65 63 6b 28 29 20 7b 0a m>.. check() {.
0220: 20 20 20 20 63 6f 6e 73 6f 6c 65 2e 69 6e 66 6f console.info
0230: 28 27 6a 6f 6f 6f 27 29 0a 20 20 7d 0a 0a 3c 2f ('jooo'). }..</
0240: 66 6f 72 6d 2d 63 6f 6e 74 72 6f 6c 73 3e form-controls>