PDA

View Full Version : Clicking in a field on a form



sonofjack
Jan 15th, 2009, 10:56 PM
Hopefully there's a simple answer to this simple problem.

I've got a form on a webpage and I want to click into any of the fields but it will only take me to the top field. I have to use the Back Tab to move to the others. What do I have to do so I can just use the mouse to choose a field to go to?

Thankyou

VIPStephan
Jan 15th, 2009, 11:42 PM
Got code?
We’re not psychic.

sonofjack
Jan 16th, 2009, 03:04 PM
Hi

Yep the code for the form is
[code]
<form action="/admin/addlistings.php" method="post">
<label>Enter listings<br /><br />
<b>Day: <br /><input type="text" name="day" rows="1" cols="45">
<br />
Date: <br /><input type="text" name="date" rows="1" cols="40">
<br />
Channel: </b><br /><input type="text" name="channel" rows="1" cols="60">
<br />
Prog Title: </b><br /><textarea name="programmetitle" rows="1" cols="70"></textarea><br />
Start time: </b><br /><input type="text" name="starttime" rows="1" cols="40"><br />
Duration: </b><br /><input type="text" name="duration" rows="1" cols="10"><br />
Notes: </b><br /><textarea name="notes" rows="5" cols="70">
</textarea></label><br />
<input type="submit" value="SUBMIT" />
</form>
[/code

I've now noticed that the problem seems to be when I look at it in Firefox.
IE seems to work fine where I can click in any of the boxes without it jumping to the top each time.

Is that a familiar problem with Firefox?
Thanks

jerry62704
Jan 16th, 2009, 03:31 PM
Code for the entire page would be much more useful. For example, what is the DOCTYPE? A major problem is when someone designs for IE quirks mode and then finds it looks goofy in a browser that follows the W3C rules.

VIPStephan
Jan 16th, 2009, 03:37 PM
Is that a familiar problem with Firefox?


A familiar problem with Firefox is that it displays code as it’s written: If you write crap, it displays crap.

The biggest issue in your code is this:



<form action="/admin/addlistings.php" method="post">
<label>Enter listings<br /><br />
<b>Day: <br /><input type="text" name="day" rows="1" cols="45">
<br />
Date: <br /><input type="text" name="date" rows="1" cols="40">
<br />
Channel: </b><br /><input type="text" name="channel" rows="1" cols="60">
<br />
Prog Title: </b><br /><textarea name="programmetitle" rows="1" cols="70"></textarea><br />
Start time: </b><br /><input type="text" name="starttime" rows="1" cols="40"><br />
Duration: </b><br /><input type="text" name="duration" rows="1" cols="10"><br />
Notes: </b><br /><textarea name="notes" rows="5" cols="70">
</textarea></label><br />
<input type="submit" value="SUBMIT" />
</form>


Correctly it must look like so:


<form action="/admin/addlistings.php" method="post">
<fieldset>
<legend>Enter listings</legend>
<div><label for="day">Day:</label> <input id="day" type="text" name="day"></div>
<div><label for="date">Date:</label><input id="date" type="text" name="date"></div>
<div><label for="channel">Channel:</label> <input id="channel" type="text" name="channel"></div>
<div><label for="prog_title">Prog Title:</label> <textarea id="prog_title" name="programmetitle" rows="1" cols="70"></textarea></div>
<div><label for="starttime">Start time:</label> <input id="starttime" type="text" name="starttime"></div>
<div><label for="duration">Duration:</label> <input id="duration" type="text" name="duration"></div>
<div><label for="notes">Notes:</label> <textarea id="notes" name="notes" rows="5" cols="70"></textarea></div>
<div><input type="submit" value="SUBMIT" /></div>
</fieldset>
</form>


Inputs only know the size attribute, not row and cols. That’s for textareas only. Labels are for each input. The value of the for attribute must resemble the according ID of the input you wanna select.

All styling such as bold and whatever is done with CSS, not in the HTML.

sonofjack
Jan 16th, 2009, 03:49 PM
Hi

Thanks for that.
I've not used "fieldset" and "legend" before.
They were all previously textarea fields and then I changed them to Input (though obviously not properly).
Thanks for the tips, anyway. All taken on board.

The full page code by the way is



<!DOCTYPE html PUBLIC "-//W3C//DTD XhtmL 1.0 Transitional//EN"
"http://www.w3.org/TR/xphpl1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content=text/html; charset=ISO-8859-1>
<title>Dancesounds - admin</title>
<link rel=stylesheet href="http://www.dancesounds.co.uk/dancesoundsstyle.css" type="text/css" media=screen>
<style>
.adminlogo
{
position: relative;
left: 30px;
top: 0px;

}
</style>

</head>

<body />

<div align="left">
<center>
<table width="850" cellspacing="0" cellpadding="0" border="0">
<tr>
<td colspan="3" valign="top" width="850"height="120" border="0">

<div id="banner">

<img class="adminlogo" src="http://www.dancesounds.co.uk/images/dancesoundslogo.jpg" width="300" height="63" alt="dancesounds" /><br />
<img class="line" src="http://www.dancesounds.co.uk/images/whiteline.jpg" width="780" height="5" /><br />
<span class="legend">PUBLISHERS AND DISTRIBUTORS OF MUSIC AND BOOKS FOR DANCE IN EDUCATION</span>

</div>
</td>
</tr>
<tr>
<td width="179" valign="top" background="http://www.dancesounds.co.uk/images/sidebarcolour.jpg">
<div id="sidebar">
<a class="sidebtn" href="addnews.php"><span class="sidebtntext">News</span></a>
<a class="sidebtn" href="addlistings.php"><span class="sidebtntext">TV/Radio listings</span></a>

</td>
<td width="671" valign="top" >
<div id="content">

<form action="/admin/addlistings.php" method="post">
<label>Enter listings<br /><br />
<b>Day: <br /><input type="text" name="day" rows="1" cols="45">
<br />
Date: <br /><input type="text" name="date" rows="1" cols="40">
<br />
Channel: </b><br /><input type="text" name="channel" rows="1" cols="60">
<br />
Prog Title: </b><br /><textarea name="programmetitle" rows="1" cols="70"></textarea><br />
Start time: </b><br /><input type="text" name="starttime" rows="1" cols="40"><br />
Duration: </b><br /><input type="text" name="duration" rows="1" cols="10"><br />
Notes: </b><br /><textarea name="notes" rows="5" cols="70">
</textarea></label><br />
<input type="submit" value="SUBMIT" />
</form>

</div>
</td>
</tr>
</table>
</center>


The page is in a php file with the head section in an included php file.
I'll amend the form though and see how I do with it.

Many thanks

abduraooft
Jan 16th, 2009, 03:59 PM
Please use
][/COLOR] tags to wrap your code while posting here. (You may edit your above post)

jerry62704
Jan 16th, 2009, 04:32 PM
Please notice VIPStephen's code for the label tag. Your code, as you posted it at 8:49 is still wrong.


<label for="day">Day:</label> <input id="day" type="text" name="day">

The "for" in the label is how it is associated with the input field. Due to old standards, both the name and the id attributes are used in the input field.

abduraooft
Jan 16th, 2009, 04:36 PM
Your code, as you posted it at 8:49 is still wrong. Off topic: You'd need to specify your timezone settings too. :)

jerry62704
Jan 16th, 2009, 04:41 PM
Good point. I didn't know if the time was from the server or adjusted to local time. I should have just said ":49" or even better just used the message number. That's the problem with having a 2K mind and a 3K problem.

sonofjack
Jan 16th, 2009, 05:49 PM
Thankyou all for your input. Haven't been able to touch the code since posting on here today but will be working on it this weekend.
Much appreciated everyone.