I want a html link and <form> element appearing in the same Line...

Question

This is my html code:

<img src="http://127.0.0.1/bookManagementProject/asset/images/mainLogo.gif"&gt;&lt;a&gt;

<br> <FONT SIZE=3 FACE="Arial"><br>&nbsp&nbsp&nbsp 
<a href = "http://127.0.0.1/home.html" <b>Home<a> |
<a href = "http://127.0.0.1/login.do" <b>Login</a> | <form method="get" action= http://flyingame.gamehost.org:8080/search.do&gt; Search: <input type="text" name=searchTermFromBanner> <input type="submit" value=Search></FONT></br>

The problem is, the <form> element is not appearing in the same line as the "Home" and "Login"

by the way, this is a banner html code

Answer 1

In your CSS:

form#the-form-id {
    display: inline-block;
}

Answer 2

The simplest way is to put the link inside the form:

<form method="get" action="http://flyingame.gamehost.org:8080/search.do"&gt;
<FONT SIZE=3 FACE="Arial"><br>&nbsp;&nbsp;&nbsp; 
<a href = "http://127.0.0.1/home.html" <b>Home<a> |
<a href = "http://127.0.0.1/login.do" <b>Login</a> |
Search: <input type="text" name=searchTermFromBanner> <input type="submit" value=Search>
</FONT>
</form>

You should probably clean up your HTML a bit (<font> has been replaced by CSS some years now). Quote your attributes too, and watch for missing semicolons on your entities.

Answer 3

There are lots of ways to do this, but the simplest is just to expand the form to include the other links thus:

<img src="http://127.0.0.1/bookManagementProject/asset/images/mainLogo.gif"&gt;
<br> <form method="get" action= http://flyingame.gamehost.org:8080/search.do&gt;&lt;FONT SIZE="3" FACE="Arial"><br>&nbsp&nbsp&nbsp 
<a href = "http://127.0.0.1/home.html" <b>Home</b><a> |
<a href = "http://127.0.0.1/login.do" <b>Login</b></a> | 
 Search: <input type="text" name="searchTermFromBanner"> <input type="submit" value="Search"></FONT></form>

More generally you are closing <br> tags which you can't and not closing tags which you should. Also you have a completely erroneous <a> tag on the first line.

If we're getting really picky, your use of the font tag has not been best practice for some time. You should be looking at CSS.

Answer 4

Hi

As Gareth Simpson and Greg said, the easiest way is to wrap the links in the tag, but, SERIOUSLY, you shouldn't be using the tag, also, the fact that the browsers display the without the alt attribute and unclosed, doesn't mean that you should be doing it.

I agree with idrumgood, it would be great if you can check www.w3schools.com, for your own good.

Cheers

Answer 5

This is an html question, might consider http://doctype.com/ ?

VERY bad markup, to answer your question, it should be fixed by just assigning display:inline to the form

<form method="get"  style="display:inline;"  action="http://flyingame.gamehost.org:8080/search.do"&gt; Search: <input type="text" name="searchTermFromBanner"> </form>

it should be in a separate css file and not in a "style" tag.

you didn't even close the form tag :(

not to flame or anything but, the form is the least of your problems there...