Short Notes on Web

Multiple Submit Buttons and/or Multiple Forms on Page

Just add a name to the submit button, and in the handler action code check if the corresponding value is set in GET/POST data (depending on the method of the form):

<form name="form1" method="post" action="the/one/action">
  ...
  <input type="submit" name="submit1" value="1st submit in this form" />
  <input type="submit" name="submit2" value="2nd submit in this form" />
</form>
 
<form name="form2" method="post" action="the/one/action">
  ...
  <input type="submit" name="submit3" value="one more form on the same page!" />
</form>

In the/one/action just check which of the submit1, submit2, or submit3 values is set in POST, and you'll know which submit button was pressed.

Make 'float' Elements Appear One under Another

If you have multiple float: right; elements, they appear one next to another, in the right-to-left order as they appear in HTML.

To make them appear one under another, you have to "clear" after each element where you want the break to appear:

<div style="float: right;">...</div>
<div style="float: right;">...</div>
<div style="float: right;">...</div>            <!-- these 3 will appear in one row, if they can fit -->
<div style="float: right; clear: right;"></div> <!-- the "cut" -->
<div style="float: right;">...</div>            <!-- these 2 will appear in a new row -->
<div style="float: right;">...</div>

The clear: right; means that no float: right; element can appear on the same row anymore.

Similarly, clear: both; will make all other elements appear below the given element.

Upload a File via Form

The main thing is - POST and enctype="multipart/form-data".

<form action="name/of/action" method="POST" enctype="multipart/form-data">
  <input type="file" name="uploaded-file">
  <input type="submit" value="Upload the file">
</form>

If you use different enctype, you'll get only the name of the file in the POST, and not the file itself.

Override the IE's Problem with width

IE does not parse correctly the CSS's min-width/max-width. To override this, use auto !important:

style="max-width: 400px; width: auto !important; width: 400px;"

Make an Element Fill In All the Remaining Space

Sometimes you want the last element on the "line" take up all space left. To achieve this, you can let the left element float, or to be sure, let both of them float; if there is no non-floating element, don't forget to "clear" afterwards:

<div style="width: 500px; margin: 0; padding: 0;">
  <div style="float: left; width: 200px; padding: 0;">left content</div>
  <div style="float: right;">right content</div>
</div>
<div style="clear: both;"></div>