diff options
Diffstat (limited to 'examples/webkit/webkit-guide/form_toggler.htm')
| -rw-r--r-- | examples/webkit/webkit-guide/form_toggler.htm | 140 |
1 files changed, 140 insertions, 0 deletions
diff --git a/examples/webkit/webkit-guide/form_toggler.htm b/examples/webkit/webkit-guide/form_toggler.htm new file mode 100644 index 0000000000..f4b170253e --- /dev/null +++ b/examples/webkit/webkit-guide/form_toggler.htm @@ -0,0 +1,140 @@ +<!-- + +This file is part of QtWebKit + +Copyright (c) 2011 Nokia Corporation and/or its subsidiary(-ies). +All rights reserved. + +You may use this file under the terms of the BSD license as follows: + +"Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are +met: + +o Redistributions of source code must retain the above copyright + notice, this list of conditions and the following disclaimer. + +o Redistributions in binary form must reproduce the above copyright + notice, this list of conditions and the following disclaimer in the + documentation and/or other materials provided with the distribution. + +o Neither the name of Nokia Corporation and its Subsidiary(-ies) nor + the names of its contributors may be used to endorse or promote + products derived from this software without specific prior written + permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." + +--> + +<!DOCTYPE html> +<html> +<head> +<meta name='viewport' content='width=device-width' /> +<title>CSS-only Toggle Button Inputs</title> +<link href='css/form_toggler.css' type='text/css' rel='stylesheet'/> +</head> +<body> +<section> +<h1>CSS-only Toggle Button Inputs</h1> +<form> +<h2>radio (default)</h2> +<label>Option One</label> +<input type="radio" name="radio_basic" value="one"/> +<br/> +<label>Option Two</label> +<input type="radio" name="radio_basic" value="two"/> +<br/> +<label>Option Three</label> +<input type="radio" name="radio_basic" value="three"/> +<h2>checkbox (default)</h2> +<input type="checkbox" name="checkbox_basic" value="one"/> +<label>Option One</label> +<br/> +<input type="checkbox" name="checkbox_basic" value="two"/> +<label>Option Two</label> +<br/> +<input type="checkbox" name="checkbox_basic" value="three"/> +<label>Option Three</label> +<h2>radio class="invert"</h2> +<label>Option One</label> +<input class="invert" type="radio" name="radio_invert" value="one"/> +<br/> +<label>Option Two</label> +<input class="invert" type="radio" name="radio_invert" value="two"/> +<br/> +<label>Option Three</label> +<input class="invert" type="radio" name="radio_invert" value="three"/> +<h2>checkbox class="invert"</h2> +<input class="invert" type="checkbox" name="checkbox_invert" value="one"/> +<label>Option One</label> +<br/> +<input class="invert" type="checkbox" name="checkbox_invert" value="two"/> +<label>Option Two</label> +<br/> +<input class="invert" type="checkbox" name="checkbox_invert" value="three"/> +<label>Option Three</label> +<h2>radio class="yn"</h2> +<label>Option One</label> +<input class="yn" type="radio" name="radio_yn" value="one"/> +<br/> +<label>Option Two</label> +<input class="yn" type="radio" name="radio_yn" value="two"/> +<br/> +<label>Option Three</label> +<input class="yn" type="radio" name="radio_yn" value="three"/> +<h2>checkbox class="yn"</h2> +<input class="yn" type="checkbox" name="checkbox_yn" value="one"/> +<label>Option One</label> +<br/> +<input class="yn" type="checkbox" name="checkbox_yn" value="two"/> +<label>Option Two</label> +<br/> +<input class="yn" type="checkbox" name="checkbox_yn" value="three"/> +<label>Option Three</label> +<h2>radio class="tf"</h2> +<label>Option One</label> +<input class="tf" type="radio" name="radio_tf" value="one"/> +<br/> +<label>Option Two</label> +<input class="tf" type="radio" name="radio_tf" value="two"/> +<br/> +<label>Option Three</label> +<input class="tf" type="radio" name="radio_tf" value="three"/> +<h2>checkbox class="tf"</h2> +<input class="tf" type="checkbox" name="checkbox_tf" value="one"/> +<label>Option One</label> +<br/> +<input class="tf" type="checkbox" name="checkbox_tf" value="two"/> +<label>Option Two</label> +<br/> +<input class="tf" type="checkbox" name="checkbox_tf" value="three"/> +<label>Option Three</label> +<h2>radio class="binary"</h2> +<label>Time of Day</label> +<input class="binary ampm" type="radio" name="radio_binary" value="am"/> +<input class="binary ampm" type="radio" name="radio_binary" value="pm" checked/> +<br/> +<label>Sex</label> +<input class="binary sex" type="radio" name="radio_sex" value="male" checked/> +<input class="binary sex" type="radio" name="radio_sex" value="female"/> +<br/> +<br/> +<p>(These use custom button values)</p> +<br/> +<br/> +</form> +</section> +<script src="js/mobile.js"></script> +</body> +</html> |