File: example.php

Recommend this page to a friend!
  Classes of Arturs Sosins   Form styler   example.php   Download  
File: example.php
Role: Example script
Content type: text/plain
Description: Example script
Class: Form styler
Style form inputs using images
Author: By
Last change: credits changed
Date: 12 years ago
Size: 5,421 bytes
 

Contents

Class file image Download
<!-- /************************************************************* * This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com * Fee free to distribute and modify code, but keep reference to its creator * * This class can be used to style form inputs using images. * It is possible to use separate images or image sprites for each input. * You can style single input element or all element types (for example textbox) inside provided container. * This class only styles form elements or creates html elements which manipulate input values, * so behaviour of form is not changed. * * Online documentation: http://webcodingeasy.com/JS-classes/Styling-any-form-input **************************************************************/ --> <html> <head> <style type='text/css'> button::-moz-focus-inner { border: 0; } input::-moz-focus-inner { border: 0; } body { color: #555; font-family: Tahoma, serif; } p { font-size: 20px; } input { color: #555; } .left { float: left; margin-right: 5px; } .select { text-align: center; padding-top: 5px; } .select li { height: 33px; line-height: 33px; text-align: center; } </style> </head> <body> <?php echo "<pre>"; print_r($_POST); echo "</pre>"; ?> <form id='myform' action='' method='post'> <p style='line-height: 30px;'>Insert text: <input type='text' name='somename'/></p> <p style='line-height: 30px;'>Insert pass: <input type='password' name='somepass'/></p> <p style='margin: 5px 5px;'>More text: </p> <p style='margin-top:0;'><textarea name='sometext'></textarea></p> <p style='line-height: 40px;'><input type='checkbox' name='chk' value='val' checked class='left'/> some checkbox</p> <p style='line-height: 40px;'><input type='checkbox' name='chk2' value='val2' class='left'/> some checkbox2</p> <p style='line-height: 38px;'><input type='radio' name='radio1' value='val1' checked class='left'/> some radio1</p> <p style='line-height: 38px;'><input type='radio' name='radio1' value='val2' class='left'/> some radio2</p> <p>Select one value: <select name='someselect' id='someselect' class='select'> <option value='1' selected>one</option> <option value='2'>two</option> <option value='3'>three</option> <option value='4'>four</option> <option value='5'>five</option> <option value='6'>six</option> <option value='7'>seven</option> </select> </p> <p>Select multiple values: <select name='someselect2[]' id='someselect2' multiple class='select'> <option value='1'>one</option> <option value='2' selected>two</option> <option value='3' selected>three</option> <option value='4'>four</option> <option value='5'>five</option> <option value='6'>six</option> <option value='7'>seven</option> </select> </p> <p><input type='button' value='somebutton' style='color: white; font-size: 20px;' onclick="alert('I\'m cool!')"/></p> <p><input type='file' name='somefile'/></p> <p><input type='submit' name='somesubmit' value='submit' style='font-size: 20px;'/></p> </form> <script type="text/javascript" src="./form_styler.packed.js" ></script> <script type="text/javascript"> var fs = new form_styler("myform"); fs.checkbox( { sprite:"./images/checkbox.png", normal: "0px 0px", selected: "0px -38px", normal_hov: "0px -79px", selected_hov: "0px -117px", width: 30, height: 40 } ); fs.radio( { sprite:"./images/radio.png", normal: "0px 0px", selected: "0px -70px", normal_hov: "0px -34px", selected_hov: "0px -112px", width: 31, height: 38 } ); fs.text( { sprite: "./images/input_field.png", normal: "0px -3px", focused: "0px 40px", width: 236, height: 30, left: 10, top: 5, bottom: 5, right: 10 } ); fs.password( { sprite: "./images/password.png", normal: "0px -3px", focused: "0px 40px", width: 236, height: 34, left: 10, top: 5, bottom: 5, right: 30 } ); fs.textarea( { sprite: "./images/textarea.png", normal: "0px 256px", focused: "0px -5px", width: 352, height: 252, left: 10, top: 5, bottom: 5, right: 10 } ); fs.button( { sprite: "./images/buttoni.png", normal: "0px -173px", hover: "0px -87px", click: "0px 0px", width: 255, height: 87, left: 5, top: 5, bottom: 5, right: 5 } ); fs.submit( { sprite: "./images/buttoni.png", normal: "0px -173px", hover: "0px -87px", click: "0px 0px", width: 255, height: 87, left: 5, top: 5, bottom: 5, right: 5 } ); fs.file( { sprite: "./images/upload.png", normal: "0px -39px", hover: "0px 0px", click: "0px -78px", width: 299, height: 40, text: "Upload", upload_text: "File: " } ); fs.select( { id: "someselect", sprite: "./images/dropdown.png", normal: "0px -2px", select: "0px -41px", list_bg: "0px -123px", width: 214, height: 33, list_width: 214, list_height: 232, select_bg: "0px -82px", list_top: 8 } ); fs.select( { id: "someselect2", sprite: "./images/dropdown.png", normal: "0px -2px", select: "0px -41px", list_bg: "0px -123px", width: 214, height: 33, list_width: 214, list_height: 232, select_bg: "0px -82px", list_top: 8 } ); </script> </body> </html>