Form in html/css positionning "search" button for an input type=file

[fomalhaut]

Hello

I've this form (and it works) on my page :

<form enctype="multipart/form-data" action="gesChants.php" method="post"> <!-- Création -->
<fieldset><legend>Insertion d'un nouveau chant</legend>
<input type="hidden" name="MAX_FILE_SIZE" value="200000" />
Nom du fichier partition : <br /><input type="file" name="fileNameAIns" id="fileNameAIns" maxlength="25" size="35" style="background-color:#ccffcc" value="<?php echo $coteClassementAIns.'.MUS'; ?>" /><br />
C&ocirc;te du chant :<br /><input type="text" name="coteAIns" maxlength="20" style="background-color:#ccffcc" value="<?php echo $coteClassementAIns; ?>" /><br />
<input type="radio" name="typeCote" value="CR" checked="checked" />C&ocirc;te r&eacute;elle (pour un chant c&ocirc;t&eacute;)<br />
<input type="radio" name="typeCote" value="CC" />C&ocirc;te de classement (pour un chant sans c&ocirc;te)<br />
Titre du chant :<br /><input type="text" name="titreAIns" id="titreAIns" maxlength="50" size="50" style="background-color:#ccffcc" value="<?php echo $titreAIns; ?>" /><br />
Auteur(s) :<br /><input type="text" name="auteurAIns" maxlength="35" size="35" value="<?php echo $auteurAIns; ?>" /><br />
Compositeur(s)) :<br /><input type="text" name="compositeurAIns" maxlength="35" size="35" value="<?php echo $compositeurAIns; ?>" /><br />
Livret papier :<br /><input type="text" name="livretAIns" maxlength="2" style="background-color:#ccffcc" value="<?php echo $livretAIns; ?>" /><br />
<input type="submit" name="creation" value="T&eacute;l&eacute;verser &amp; cr&eacute;er"/>
</fieldset>
</form>

My problem is with the line :

Nom du fichier partition : <br /><input type="file"  name="fileNameAIns" id="fileNameAIns" maxlength="25" size="35"  style="background-color:#ccffcc" value="<?php echo  $coteClassementAIns.'.MUS'; ?>" />

because the "search on hard drive" button (i.e. "Parcourir") is just on the right of the "input" field for the file name.
I'd like it would be just after "Nom du fichier partition : " in order not to make a field too long !
How can I drive that ?
I have tried with a "button" instead of "input" but it doesn't work!

Thanks for your answers

 

[misson]

You simply don't have that much control over the styling of file input fields. You could try a Flash file uploader (Google for them).

Always include a link to a live sample page so we don't need to create our own in order to figure out what you're talking about. Screenshots also help.

The code sample is nigh unreadable; indent elements to fix this. While you're at it, the field labels should be in <label> elements. Then you can use styling (defined once in your site style sheet) to position the form labels and inputs (<br/> isn't semantic).

<style type="text/css">
  form label, form input:not([type="radio"]) {
    display: block;
  }
  form ul, form li {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
</style>
...
<form enctype="multipart/form-data" action="gesChants.php" method="post"> <!-- Création -->
  <fieldset>
    <legend>Insertion d'un nouveau chant</legend>
    <input type="hidden" name="MAX_FILE_SIZE" value="200000" />

    <label for="fileNameAIns">Nom du fichier partition:</label>
    <input type="file" name="fileNameAIns" id="fileNameAIns" maxlength="25" size="35" style="background-color:#ccffcc" value="<?php echo $coteClassementAIns . '.MUS'; ?>" />

    <label for="coteAIns">C&ocirc;te du chant:</label>
    <input type="text" name="coteAIns" maxlength="20" style="background-color:#ccffcc" value="<?php echo $coteClassementAIns; ?>" />

    <ul>
      <li><input type="radio" name="typeCote" value="CR" checked="checked" />C&ocirc;te r&eacute;elle (pour un chant c&ocirc;t&eacute;)</li>

      <li><input type="radio" name="typeCote" value="CC" />C&ocirc;te de classement (pour un chant sans c&ocirc;te)</li>
    </ul>
  ...

 

[fomalhaut]

Thanks, Misson. That's OK.