+ Reply to Thread
Results 1 to 3 of 3

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

  1. #1
    fomalhaut is offline x10Hosting Member fomalhaut is an unknown quantity at this point
    Join Date
    Aug 2009
    Location
    South of France near Arles
    Posts
    90

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

    Hello

    I've this form (and it works) on my page :
    HTML Code:
    <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 :
    HTML Code:
    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

  2. #2
    misson is online now Community Advocate misson is a jewel in the rough
    Join Date
    Mar 2008
    Location
    Libertatia
    Posts
    2,391

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

    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).

    HTML Code:
    <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>
      ...
    Last edited by misson; 03-11-2010 at 03:41 PM.
    Be sure to read all pages linked in this post; they have further information that should prove useful. When asking for help, make sure you follow Eric Raymond's and Jon Skeet's guidelines for prompt, accurate responses. Please answer any questions I ask; they're not rhetorical (probably). Any posted code is intended as illustrative example, rather than a solution to your problem to be copied without alteration. Study it to learn how to write your own solution.
    Misson, not Mission.

  3. #3
    fomalhaut is offline x10Hosting Member fomalhaut is an unknown quantity at this point
    Join Date
    Aug 2009
    Location
    South of France near Arles
    Posts
    90

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

    Thanks, Misson. That's OK.

+ Reply to Thread

Similar Threads

  1. Html Form Search button
    By Otaku Ichise in forum Programming Help
    Replies: 1
    Last Post: 04-21-2008, 10:51 AM
  2. Replies: 3
    Last Post: 11-28-2007, 06:06 PM
  3. A few doubts wich "search function" didn't answer.
    By Lurien in forum Free Hosting
    Replies: 4
    Last Post: 11-04-2007, 01:03 AM
  4. <object type="text/html"> finding value of <param>'s
    By nonsensep in forum Scripts & 3rd Party Apps
    Replies: 2
    Last Post: 10-18-2007, 12:23 AM
  5. "No input file specified"
    By DominicZamprogna in forum Free Hosting
    Replies: 1
    Last Post: 10-13-2007, 01:17 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
x10hosting free hosting for the masses
dedicated servers