Input Boxes in HTML are not responding

[Djmann1013]

This is confusing. I made input boxes in HTML, and included the HTML in a PHP page. I am not able to click on them to get them focused, but pressing the "tab-key" will get it working. Here is my code:

(HTML)

<div class="widget">
<h2>Login/Register</h2>
<div class="inner">
<form action="login/login.php" method="post">
<ul>
<li><b>Username:</b></li>
<li><input type="text" maxlength="25" name="username" readonly="false" value="Username">
</li>
<li><b>Password:</b></li>
<li><input type="password" name="password" readonly="false" value="Password"></li>
<li><input type="submit" value="Login" readonly="false"></li>
<li><a href="register.php">Don't have an account?</a></li>
<li><a href="recover.php">Forgot password?</a></li>
</ul>
</form>
</div>
</div>

(PHP)

include 'include/login.php';

I have tried to place readonly="false", that still did nothing. I am using no JavaScript in this at all. I really don't know what was going on with this. Want to see this for yourself? Go to this page that I am having trouble with, and try to click on the text fields: awsomechat.tk/home (I am not advertising, this page does actually have a problem) Any support will be accepted. (Note: you will need a browser other than IE to view the page, otherwise the page will be broken).

[LastMitch]

This is confusing. I made input boxes in HTML, and included the HTML in a PHP page.

What is your PHP code & you CSS code for this page?

[Djmann1013]

There is no css for the HTML that is being included, the CSS that is used does nothing to the textboxes, not even style one pixle of them.

If you want the css, here it is (the only CSS I use):

/* Resets */
ul {
    padding:0;
    margin:0 0 20px 0;
    list-style:none;
}
h1, h2 {
    padding:0;
    margin:0 0 20px 0;
    font-weight:normal;
}
p {
    padding:0;
    margin:0 0 20px 0;
}
a:link, a:visited {
    text-decoration:underline;
    color:#000;
}
a:hover {
    text-decoration:none;
}
ul li {
    padding:5px 0;
}
ul li input[type="text"], ul li input[type="password"] {
    width:200px;
}
/* Headers */
h1 {
    font-size:1.8em;
}
h2 {
    font-size:1.4em;
}
.logo {
    font:2em Arial;
    margin:0 0 10px 0;
    padding:0;
    width:200px;
    color:#fff;
}
/* Containers */
body {
    background:lightblue;
    font-family:Arial;
    font-size:0.8em;
}
#container, footer {
    background:#fff;
    top:20px;
    width:920px;
    margin:0 auto;
    padding:20px;
}
header {
    width:940px;
    padding:10px;
    margin:0 auto 10px auto;
}
#container {
    z-index:-1;
    position:relative;
    top:50px;
    min-height:500px;
    border-radius:5px 5px 0 0;
}
footer {
    position:relative;
    border-radius:0 0 5px 5px;
}
.widget {
    margin-bottom:20px;
}
.widget h2 {
    margin:0 0 10px 0;
    padding:0 5px;
    font-weight:normal;
    border-bottom:1px solid #ddd;
}
.widget .inner {
    margin:0 10px;
}
/* Navigation */
nav {
z-index:1;
position:absolute;
top:0px;
left:0px;
}
nav ul {
    position:fixed;
    width:100%;
    background-color:#0D00FF;
    margin:0px;
    padding:0px;
}
nav ul li {
    position:relative;
    display:inline;
    left:400px;
    margin-right:10px;
}
nav ul li a {
    text-decoration:none;
}
nav ul li.current {
    font-weight:bold;
}
nav ul li a.last {
    border-right:0;
}
/* Aside */
aside {
    width:260px;
    float:right;
    border-left:1px dashed #aaa;
    padding-left:15px;
}
/* Login */
#login li.link {
    margin-top:5px;
}
/* Footer */
footer {
    border-top:1px dashed #ddd;
    color:#999;
}
/* Misc */
.clear {
    clear:both;
}

There is the CSS. That is all I have to give.

[LastMitch]

There is no css for the HTML that is being included, the CSS that is used does nothing to the textboxes, not even style one pixle of them.

These are consisted as CSS tags:

<ul></ul>
<li></li>

I am not able to click on them to get them focused, but pressing the "tab-key" will get it working.

What you said I got no idea what you are talking about?

I don't know what is the issue when you mention not focus?

You post the whole HTML form without actaully explaining the issue?

You're submit info to database? Does it work?

Do you database connected to the form?

[JorgeM]

readonly="false" is causing your focus issue. When I remove that from your input elements, the focus ability returns as expected.

[Djmann1013]

@JorgeM

readonly="false" is causing your focus issue. When I remove that from your input elements, the focus ability returns as expected.

I removed readonly=false, still nothing. My code now is:

<div class="widget">
<h2>Login/Register</h2>
<div class="inner">
<form action="login/login.php" method="post">
<ul>
<li><b>Username:</b></li>
<li><input type="text" maxlength="25" name="username">
</li>
<li><b>Password:</b></li>
<li><input type="password" name="password"></li>
<li><input type="submit" value="Login"></li>
<li><a href="register.php">Don't have an account?</a></li>
<li><a href="recover.php">Forgot password?</a></li>
</ul>
</form>
</div>
</div>

@LastMitch

I don't know what is the issue when you mention not focus?

When I click, it does not focus. But, pressing tab will focus it.

You post the whole HTML form without actaully explaining the issue?

The HTML I gave was on the page that i included. All of it is there.

You're submit info to database? Does it work?

Yes. It subits to a login script, the script processes the data just fine. The problem is when I click on the text field, it does nothing. But, the tab focuses it, not the click.

Do you database connected to the form?

In the login script that processes it. The HTML page does not need to be connected to the MySQL DB to function.

These are consisted as CSS tags:
<ul></ul>
<li></li>

I did not know that. I don't think the CSS has any association with this issue. There is no CSS code to make the textboxes break.