View source for 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 <tt>method</tt> of the form):
<pre><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></pre>
In <tt>the/one/action</tt> 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 <tt>float: right;</tt> 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:
<pre><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></pre>
The <tt>clear: right;</tt> means that no <tt>float: right;</tt> element can appear on the same row anymore.

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

== Upload a File via Form ==

The main thing is - POST and <tt>enctype="multipart/form-data"</tt>.
<pre><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></pre>
If you use different <tt>enctype</tt>, you'll get only the name of the file in the POST, and not the file itself.

== Override the IE's Problem with <tt>width</tt> ==

IE does not parse correctly the CSS's <tt>min-width</tt>/<tt>max-width</tt>. To override this, use <tt>auto !important</tt>:
<pre>style="max-width: 400px; width: auto !important; width: 400px;"</pre>

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

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