<!--
/*************************************************************
* 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> |
Stumble It!
Bookmark in del.icio.us
Download
