How to convert that to html

HTML & CSS
1

Hi
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

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 :slight_smile:

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


 

.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

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?


 
<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

The code looks fine except for the form tag and your field names.

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

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