SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2012
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to convert that to html

    form1.jpgHi
    could anyone tell me how can I convert these 4 steps to html tag
    It's my first time to face this kind of steps so I don't know how to write it as a markup
    Is it will be as a link (like a menu) or what like what exactly?

    also how can I add upload button. Is it like a submit button??

    Thanks

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    The image in conjunction with your question is a bit confusing. Here is my take on what the answer SHOULD be, hopefully my tips will help

    It makes no sense to have an UPLOAD button, worse to have MULTIPLE upload buttons. Always think from the point of view of the USER. does one have to select AND upload files individually??
    Your UPLOAD are INPUTS type=file, in a single form ,, you could have an additional submit input element ( hidden or not) but that depends on what your overall intent is.

    OH, and not like many folks upload from their cellphones, yet, but if you are thinking of NOT HAVING a submit button on your for remember that not everyone is utilizing devices with return keys these days.


    OK, the other part is just a list ( am assuming all you have is text)...


    Code:
     
    
    .steps{margin:0; padding:0; list-style: none; display:inline-block; background: cyan; counter-reset:  step; font-family: sans-serif; height:4.5em; width:35em}
    .steps li{float: left; counter-increment: step; width:25%; height:100%;   }
    .steps li:after{  content:""; height:100%}
    .steps li:before{  font-size: 300%; content: counter(step); margin:0 5%}
    .steps li:before, .steps li span, .steps li:after{   display:  inline-block; vertical-align:middle ; }
    .steps li span{   width:70% }
    .steps li+li{border-left:1px solid #000;margin-left:-1px }
    .active{background:  #07f}
     
    
    <ol class="steps">
    <li><span>Personal Information</span></li>
    <li><span>Personal Information</span></li>
    <li><span>More Details</span></li>
    <li class="active"><span>Add Images</span></li>
    </ol>

    hope that helps

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2012
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    It makes no sense to have an UPLOAD button, worse to have MULTIPLE upload buttons. Always think from the point of view of the USER. does one have to select AND upload files individually??
    Your UPLOAD are INPUTS type=file, in a single form ,, you could have an additional submit input element ( hidden or not) but that depends on what your overall intent is.
    It's my first time to deal with this type of form , and that why I know nothing about it
    does this code ok and serve a purpose?
    Code:
     
    <form>
     <div>
      <input type="file" name="datafile" value="Upload" >
     </div>
    
     <div>
      <input type="file" name="datafile" value="Upload" >
     </div>
    
     <div>
      <input type="file" name="datafile" value="Upload" >
     </div>
    
     <div>
      <input type="submit" value="Send">
     </div>
    </form>

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    The code looks fine except for the form tag and your field names.


    HTML Code:
    <form name="formName" method="POST" action="some/URL.php" enctype='multipart/form-data'>
    • action: a URL where the form is processed , by defaul it ges to the same page the form is in
    • method: GET or POST goes here, by defauly it's GET. Since you are upping files, you really will need POST.
    • enctype='multipart/form-data' is needed because you are upping files!



    When a form gets submitted the element name is what gets passed as a variable name for that field. So naming the file imputs the same name, actually uploads 3 files but overrides the first two! nice, eh?

    You can use different names , but best practice is to make it an array, name='datafile[]'. When you process the form in the back end you can iterate through 'datafile', the first one will be datafile[0], second will be datafile[1], third datafile[2] and so forth...

    it's also good to have a name on the submit button that way its value will be passed on submission as such you can use that ON THE POSSESSING PAGE to see if the form has been submitted.

    PHP Code:
    <php?  if (!isset($_POST['sub'])){ echo "uh oh, you are here but you didnt press submit!!!";} ?> 

    oh .. and this is just added info....

    depending on how you are styling this you could put all the inputs in just one div.


    HTML Code:
    <form name="formName" method="POST" action="some/URL.php" enctype='multipart/form-data'>
      <div>
      <input type="file" name="datafile" value="Upload" ><br>
      <input type="file" name="datafile" value="Upload" ><br>
      <input type="file" name="datafile" value="Upload" ><br>
      <input type="submit" name='submit' value="Send">
     </div>
    </form>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •