mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-22 09:26:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs: update form examples for disabled fields (radio, checkbox, switch)

Browse source
This commit is contained in:
Ademílson F. Tonato 2021-12-19 11:01:33 +00:00
parent 2565a68ab5
commit 83772dd3b1
1 changed files with 27 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

29
docs/src/forms.html
View file

@ -114,18 +114,30 @@
<input type="radio" id="large" name="size" value="large"> <input type="radio" id="large" name="size" value="large">
Large Large
</label> </label>
<label for="extralarge">
<input type="radio" id="extralarge" name="size" value="extralarge" disabled>
Extra Large
</label>
</fieldset> </fieldset>
<fieldset> <fieldset>
<label for="terms"> <label for="terms">
<input type="checkbox" id="terms" name="terms"> <input type="checkbox" id="terms" name="terms">
I agree to the Terms and Conditions I agree to the Terms and Conditions
</label> </label>
<label for="terms_sharing">
<input type="checkbox" id="terms_sharing" name="terms_sharing" disabled checked>
I agree to share my information with partners
</label>
</fieldset> </fieldset>
<fieldset> <fieldset>
<label for="switch"> <label for="switch">
<input type="checkbox" id="switch" name="switch" role="switch"> <input type="checkbox" id="switch" name="switch" role="switch">
Publish on my profile Publish on my profile
</label> </label>
<label for="switch_disabled">
<input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch" disabled checked>
Publish on my profile my accomplishments
</label>
</fieldset> </fieldset>
<footer class="code"> <footer class="code">
@ -151,22 +163,35 @@
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>&gt; &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>&gt;
Large Large
&lt;/<b>label</b>&gt; &lt;/<b>label</b>&gt;
&lt;/<b>label</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"extralarge"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"extralarge"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"extralarge"</u> <i>disabled</i>&gt;
Extra Large
&lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt; &lt;/<b>fieldset</b>&gt;
<em>&lt;!-- Checkbox --&gt;</em> <em>&lt;!-- Checkbox(es) --&gt;</em>
&lt;<b>fieldset</b>&gt; &lt;<b>fieldset</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"terms"</u>&gt; &lt;<b>label</b> <i>for</i>=<u>"terms"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms"</u> <i>name</i>=<u>"terms"</u>&gt; &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms"</u> <i>name</i>=<u>"terms"</u>&gt;
I agree to the Terms and Conditions I agree to the Terms and Conditions
&lt;/<b>label</b>&gt; &lt;/<b>label</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"terms_sharing"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms_sharing"</u> <i>name</i>=<u>"terms_sharing"</u> <i>disabled checked</i>&gt;
I agree to share my information with partners
&lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt; &lt;/<b>fieldset</b>&gt;
<em>&lt;!-- Switch --&gt;</em> <em>&lt;!-- Switch(es) --&gt;</em>
&lt;<b>fieldset</b>&gt; &lt;<b>fieldset</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"switch"</u>&gt; &lt;<b>label</b> <i>for</i>=<u>"switch"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch"</u> <i>name</i>=<u>"switch"</u> <i>role</i>=<u>"switch"</u>&gt; &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch"</u> <i>name</i>=<u>"switch"</u> <i>role</i>=<u>"switch"</u>&gt;
Publish on my profile Publish on my profile
&lt;/<b>label</b>&gt; &lt;/<b>label</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"switch_disabled"</u>&gt;
&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch_disabled"</u> <i>name</i>=<u>"switch_disabled"</u> <i>role</i>=<u>"switch_disabled"</u> <i>disabled checked</i>&gt;
Publish on my profile my accomplishments
&lt;/<b>label</b>&gt;
&lt;/<b>fieldset</b>&gt;</code></pre> &lt;/<b>fieldset</b>&gt;</code></pre>
</footer> </footer>