Help with form layout on window resize

Hi i need to layout my form so that when maximized it will display like this

FirstName LastName Phone
<FirstName Input box> <LastName Inputbox> <Phoneinputbox> <button>


and when minimized it will display like this

Firstname <inputbox>
Lastname <inputbox>
Phone <inputbox>
<button>


how should i do this in css? thanks in advance

 

Mayby, two forms wchich are submiting same things:

<div id="form1">
<a href="#" onclick="change(1)">max</a>
<form>
	First name:	<input type=text /><br />
	Last name: <input type=text /><br />
	Phone: <input type=text /><br />
	<button>click me</button>
	
</form>
</div>

<div id="form2">
<a href="#" onclick="change(2)">min</a>
<form>
	First name: Last name: Phone:<br />
	<input type=text />
	<input type=text />
	<input type=text />
	<button>clik me</button>
</form>
</div>

Code (markup):

And in the css file:

#form1{
	display:block;
}

#form2{
	display:none;
}

Code (markup):

And finally, some javascript:

<script>

	function change(i){
		form1=document.getElementById("form1");
		form2=document.getElementById("form2");
		if(i==1){
		form1.style.display="none";
		form2.style.display="block";
		}
		else{
		form1.style.display="block";
		form2.style.display="none";
		}
	}
 </script>

Code (markup):

Hope it helps, Peter

P.S. Almost forgot, you can also use one form and try to change its innerHTML value.

 

Remember that

display: block;

Code (markup):

is what places an input to be on a line on its own, and the DEFAULT IS

display: block;

Code (markup):

so if you ever want it in the same line, change it to

display: inline;

Code (markup):

 

Hi,
Thanks Peter and all who replied, but
I want it the it will automaticall change layout when the browser window is maximize and/or minimize not when a link was click.
anyone got an idea how this can be done

 

Maybe something like this:

var i=1;
$(document).ready(
	function()
	{
		$(window).resize(function() {
			if(i%2==1){
			$("#form1").html("First name:<input type=text /><br />Last name: <input type=text /><br />Phone: <input type=text /><br /><button>click me</button>");
			i++;
			}
			else{
			$("#form1").html("First name:<input type=text />Last name: <input type=text />Phone: <input type=text /><button>click me</button>");
			i++;
			}
		});
})

Code (markup):

But the problem is when the window is minimized at first (it works vice versa than).

Hope it helps, Peter

 

test. sorry