I am in need of some assistance. I am trying to create a form page where users must input a phone number and email address. Using the coding that i have now and NO inner html how do i create the codes for a phone number and email address. I need the phone number to have ONE dash within the number. also...i have created 2 images one for the successful message and another for Error. how do i places those images next to the coding i have when it displays???

Code:
// JavaScript Document

function setupForm() {
				var fname_valid = false;	
				var lname_valid = false;
				var phone_valid = false;
				var email_valid = false;
				var url_valid = false;
				
				var check = document.createElement("img");
				check.setAttribute('src','img/check.jpg');
				
				var stop = document.createElement("img");
				stop.setAttribute('src','img/stop.jpg');
				
				document.myform.fname_name.onblur = function() {
					var fname = document.getElementById('fname');
					var span = fname.getElementsByTagName('span');
					if(this.value.length > 0) {
						if(span[0].firstChild.nodeValue == null) {
							span[0].appendChild(document.createTextNode('Success!'));
							fname_valid = true;	
						} else {
							span[0].firstChild.nodeValue = "Success!";
							fname_valid = true;
						}
					} 
					else {
						if(span[0].firstChild.nodeValue == null) {
							span[0].appendChild(document.createTextNode('Error!'));
							fname_valid = false;	
						} else {
							span[0].firstChild.nodeValue = "Error!";
							fname_valid = false;
						}
					}
				}
				
				document.myform.fname_name.onfocus = function() {
					var fname = document.getElementById('fname');
					var span = fname.getElementsByTagName('span');
					span[0].firstChild.nodeValue = "Enter the Correct Text!";
				}
								
								
								// LAST NAME
				document.myform.lname_name.onblur = function() {
					var lname = document.getElementById('lname');
					var span = lname.getElementsByTagName('span');
					if(this.value.length > 0) {
						if(span[0].firstChild.nodeValue == null) {
							span[0].appendChild(document.createTextNode('Success!'));
							lname_valid = true;
						} else {
							span[0].firstChild.nodeValue = "Success!";
							lname_valid = true;
						}
					} else {
						if(span[0].firstChild.nodeValue == null) {
							span[0].appendChild(document.createTextNode('Error!'));
							lname_valid = false;
						} else {
							span[0].firstChild.nodeValue = "Error!";
							lname_valid = false;
						}
					}
				}
				
				document.myform.lname_name.onfocus = function() {
					var lname = document.getElementById('lname');
					var span = lname.getElementsByTagName('span');
					span[0].firstChild.nodeValue = "Enter the Correct Text!";
				}
								
				document.myform.onsubmit = function() {
					processForm(fname_valid, lname_valid);	
					return false;
				}
			}
			
			function processForm(fname_valid, lname_valid) {
				if(fname_valid && lname_valid) {		
					alert('inside processForm()');
					return false;
				} 
				else {	
					alert('something still is not valid');
					return false;
				}
			}
			
			
			// PHONE NUMBER INFO
			
			
			
			
			
			
			
			
			
			
			
			window.onload = setupForm;


HTML Code:
<body>
<div id="wrapper">
<div class="container_12" id="container">
	
    <div class="grid_12" id="h1"> Take survey

        </div>    
            
                       
                        <div class="clear"></div>
           

		
        <div class="grid_12" id="spacer"></div>

    <div class="clear"></div>



<!--SIDE BAR-->
<div class="grid_3" id="sidebar">
<ul>
	<li>Your Picture Will Be.....</li>
 

</ul>
</div>


<!--CONTENT GOES BELOW -->

<div class="grid_8" id="content">       
 <form method="post" name="myform">

            <fieldset>
                <legend>User Information</legend>
				<div id="fname">
	                <label for="fname_id">First Name:</label><br/>
	                <input id="fname_id" type="text" name="fname_name" value="" />
                    <span />
				</div>
				<div id="lname">

	                <label for="lname_id">Last Name:</label><br/>
	                <input id="lname_id" type="text" name="lname_name" value="" />
                    <span />
				</div>
                
                 <div id="phone">

	                <label for="phone_id">Phone Number:</label><br/>
	                <input id="phone_id" type="text" name="phone_name" value="" />
                    <span />
				</div>
                
                <div id="email">

	                <label for="email_id">Email:</label><br/>
	                <input id="email_id" type="text" name="email_name" value="" />
                    <span />
				</div>
                
                <div id="url">

	                <label for="url_id">Sulley Address:</label><br/>
	                <input id="url_id" type="text" name="url_name" value="" />
                    <span />
				</div>
                
                <!--Questions for survey -->
                
                <fieldset><legend> Survey</legend>
<label for="question1">Do you drink alcohol?</label>
<input type="radio" name="question1" value="true" />True
<input type="radio" name="question1" value="false" />False <br/>

<label for="question2"> Do you have a DUI?</label>
<input type="radio" name="question2" value="true" />True
<input type="radio" name="question2" value="false" />False <br/>
</fieldset>
				
                
                
                <div id="submit">
	                <input id="submit" type="submit" name="submit" value="Click to Submit" />
				</div>
            </fieldset>
        </form>
</div>

<!--SPACER GRID -->
        <div class="clear"></div>

<div class="grid_12" id="spacer_grid"></div>
    <div class="clear"></div>

<!--FOOTER -->

        <div class="grid_12" id="footer">Created By: Gian_Galliani.</div>
    <div class="clear"></div>
</div><!--CONTAINER DIV -->
</div><!--wrapper -->
</body>