Hi there i'm new to coding forums and have come here for a little bit of help on some code.

my website is http://www.mp3encore.co.uk

my problem is on the homepage, basically i want the radio search buttons above the search bar so visiters click radio button first then type in what they want.

here is my code...

<div class="wrapcontent clearfix">
<div id="content" class="fleft">
<div class="wrappost">
<style type="text/css">
#content #post
{
background: url('<?=WEB_PATH?>images/wes.png') no-repeat;
}
</style>
<script type="text/javascript">
function change_song1()
{
document.search_form.search_input.value= "Search For Lyrics";
document.search_form.type.value= "lyrics";
document.getElementById('song').style.display = "none";
document.getElementById('video').style.display = "none";
document.getElementById('kr').style.display = "none";
document.getElementById('lyrics').style.display = "inline";
}
function change_song0()
{
document.search_form.search_input.value= "Search For Videos";
document.search_form.type.value= "video";
document.getElementById('song').style.display = "none";
document.getElementById('video').style.display = "inline";
document.getElementById('kr').style.display = "none";
document.getElementById('lyrics').style.display = "none";
}
function change_song2()
{
document.search_form.search_input.value= "Search For Songs";
document.search_form.type.value= "mp3";
document.getElementById('song').style.display = "inline";
document.getElementById('video').style.display = "none";
document.getElementById('lyrics').style.display = "none";
document.getElementById('kr').style.display = "none";
}
function change_song3()
{
document.search_form.search_input.value= "Search For Karaoke";
document.search_form.type.value= "karaoke";
document.getElementById('song').style.display = "none";
document.getElementById('video').style.display = "none";
document.getElementById('lyrics').style.display = "none";
document.getElementById('kr').style.display = "inline";
}
</script>
<div id="post" class="post">
<div class="entry" style="margin-top: 6px;">
<div class="clearfix wrapentry">
<div class="fleft">
</div>
<div class="info fright clearfix" style="margin-right: 25px;">
</div>
<div class="Contentbox" align="center">
<div id="song" style="display: none;">You are in Song search mode</div>
<div id="video" style="display: none;">You are in Video search mode</div>
<div id="lyrics" style="display: none;">You are in Lyrics search mode</div>
<div id="kr" style="display: none;">You are in Karaoke search mode</div>
<div id="ajaxcontentarea" class="contentstyle" style="margin:0" >
<form name="search_form" id="search_form" method="post" action="<?=WEB_PATH?>">
<input tabindex="" value="Search For Songs" name="search" id="search_input" onfocus="if(this.value=='Search For Songs'||this.value=='Search For Videos'||this.value=='Search For Lyrics'||this.value=='Search For Karaoke') this.value='';" type="text" />
<input type="hidden" name="type" value="mp3"/>
</form>
</div>
<ul id="maintab" class="shadetabs">
<li><a href="#" onclick="javascript:document.search_form.submit();return false;">Search</a></li>
</ul>
</div>
<div style="color: #ffffff;font-weight: bold;margin-left: 45px;margin-top: -25px;"><input type="radio" class="radio" value="video" name="type" onclick="change_song0();"/>&nbsp;Videos</div>
<div style="color: #ffffff;font-weight: bold;margin-left: 145px; margin-top: -18px;">
<input type="radio" class="radio" value="mp3" name="type" onclick="change_song2();"/>&nbsp;Songs
</div>
<div style="color: #ffffff;font-weight: bold;margin-left: 235px; margin-top: -18px;">
<input type="radio" class="radio" value="lyrics" name="type" onclick="change_song1();"/>&nbsp;Lyrics
</div>
<div style="color: #ffffff;font-weight: bold;margin-left: 315px; margin-top: -18px;">
<input type="radio" class="radio" value="lyrics" name="type" onclick="change_song3();"/>&nbsp;Karaoke
</div>
</div>
</div>
</div>
</div>


hope someone can help, thanks in advance.