Jump to content

help with form element positioning


xfezz

Recommended Posts

I would like to get my search text field positioned all the way to the left of my drop down menu with its own submit button. I tried wrapping the text field with a span class to float it left but that didnt work. I can probably get it to work if i put it in its own div tag, but im not sure if its good practice to have all these elements in its own div tag. Or what is the correct way to accomplish what I want.

Also I have quite a few things going on at once here. Right now my search field and drop down menu are in the same form. The drop down menu will manage my articles. Should I have this search field in its own form? Probably will be nested some how. Or should I have the search option on my drop down menu? Im not sure if im trying to do too many things on one form here.

heres a screenshot for some visual reference
[img]http://img.photobucket.com/albums/v487/xfezz/forms.jpg[/img]

and heres my code
[code]
<body>
<fieldset>
<legend>Manage Articles</legend>
<form name="form" method="post" action="/port/admin_article_delete.php">
<div class ="article_menu">
  <input name="txtSearch" type="text" id="txtSearch" value="Enter Search">
  <select name="select" onchange='this.form.submit()'>
  <option selected>Manage Articles</option>
  <option value="Delete">Delete Selected</option>
  <option>Delete All</option>
  </select>
</div>

<?php

some php code here

?>
</form>
</fieldset>
</body>
[/code]


[b]edit:[/b]

I was playing around and came up with this:
[code]
<fieldset>
<legend>Manage Articles</legend>
<div id="article">
<div class="search">
<form action="" method="get" name="frmSearch">
      <input type="text" name="textfield">
      <input type="submit" name="Submit" value="Search">
</form>
</div>

<div class="menu">
<form name="form" method="post" action="/port/admin_article_delete.php">
  <select name="select" onchange='this.form.submit()'>
      <option selected>Manage Articles</option>
      <option>Search</option>
      <option value="Delete">Delete Selected</option>
      <option>Delete All</option>
  </select>
</div>
</div>
[/code]

which produces my desired layout
[img]http://img.photobucket.com/albums/v487/xfezz/forms2.jpg[/img]

but dreamweaver marked my markup as invalid
Link to comment
Share on other sites

I think I got it to work the way I want it. I gave the search form a class and edited that with css.

Incase for anyone whos wondering, heres my html

[code]
<fieldset>
    <legend>Manage Articles</legend>
        <form name="search" id="form1" method="post" action="/port/admin_article_search.php" class="search">
            <input type="text" value="Enter Search Here" />
            <input name="btnSearch" type="submit" id="btnSearch" value="Search" />
        </form>
    <form name="articles" id="form2" method="post" action="/port/admin_article_delete.php" class="articles">
        <select name="select" onchange='this.form.submit()'>>
            <option selected="selected">Manage Articles</option>
            <option value="Delete">Delete Selected</option>
        </select>
    <?php include'pgtest.php'?>
  </form>
</fieldset>
[/code]

and here is my css to format the top form, which is the search area.
[code]
form.search {
width: 310px;
float: left;
padding-bottom: 5px;
}
[/code]

any other suggestions are welcomed
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.