title: How to reset multiple forms at once with one button
body: <p>Okay guys, im starting to learn HTML so im a newbie at the moment. I wrote this code to practice my input types (such as password, email, text etc). I would like to know how I can reset the whole form with one button. E.g.:</p>
  
  <pre><code>&lt;input type="reset" value="reset"&gt; 
  </code></pre>
  
  <p>The above code should be able to reset the whole form.</p>
  
  <p>In my code, I have multiple forms and fieldsets:</p>
  
  <pre><code>&lt;! DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Tutorial 5 &lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;    
  &lt;form&gt;
  &lt;fieldset&gt;
  &lt;legend&gt;Personal Details&lt;/legend&gt;
  
  &lt;p&gt;&lt;label for="name"&gt;First name:&lt;/label&gt;
  &lt;input id="name" name="name" type="text" /&gt;&lt;/p&gt;
  
  &lt;p&gt;&lt;label for="surname"&gt;Surname:&lt;/label&gt;
  &lt;input id="surname" name="surname" type="text" /&gt;&lt;/p&gt; 
  
  &lt;p&gt;&lt;label for="dob"&gt;Date of Birth:&lt;/label&gt;
  &lt;input id="dob" name="dob" type="text" size="5" /&gt;&lt;/p&gt;
  
  &lt;p&gt;&lt;label for="email"&gt;E-Mail address: &lt;/label&gt;
  &lt;input id="email" name="email" type="email" /&gt;&lt;/p&gt;
  
  &lt;p&gt;&lt;label for="address"&gt;Address:&lt;/label&gt;
  &lt;textarea id="address" name="address" type="text" rows="5" cols="30"&gt;&lt;/textarea&gt; &lt;/p&gt;
  
  &lt;p&gt;&lt;label for="postcode"&gt;Postcode:&lt;/label&gt;
  &lt;input name="postcode" id="postcode" type="text" size="5"&gt;&lt;/input&gt; &lt;/p&gt;
   &lt;/fieldset&gt;
   &lt;/form&gt;
  
  
  &lt;form&gt;
  &lt;fieldset&gt;
  &lt;legend&gt; Password and PIN &lt;/legend&gt;
  
  &lt;p&gt;&lt;label for="password"&gt; Password &lt;/label&gt;
  &lt;input id="password" name="password" type="password"&gt;&lt;/input&gt; &lt;/p&gt;
  
  &lt;p&gt;&lt;label for="passwordRetype"&gt;Retype Password&lt;/label&gt;
  &lt;input id="passwordRetype" name="passwordRetype" type="password"&gt;&lt;/input&gt; &lt;/p&gt;
  
  &lt;p&gt;&lt;label for="memorableQuestion"&gt; Memorable question&lt;/label&gt;
  &lt;select id="memorableQuestion" name="memorableQuestion"&gt;
  &lt;option value="ChildhoodFriend"&gt; Who was your childhood friend? &lt;/option&gt;
  &lt;option value="Street"&gt; Whats the street you grew up in? &lt;/option&gt;
  &lt;option value="Food"&gt; Whats your favorite food? &lt;/option&gt;
  &lt;/select&gt; &lt;/p&gt;
  
  &lt;p&gt;&lt;label name="answerToQ"&gt; Answer to memorable question: &lt;/label&gt;
  &lt;input id="answerToQ" name="answerToMemorableQuestion" type="text"&lt;/input&gt; &lt;/p&gt;
  &lt;/fieldset&gt;
  &lt;/form&gt;
  
  &lt;form&gt;
  &lt;fieldset&gt;
  &lt;legend&gt;Feedback&lt;/legend&gt;
  
  &lt;p&gt;&lt;label for="radio"&gt; Where did you hear about us mostly?&lt;/label&gt;
  &lt;p id="radio"&gt;
  
  &lt;input type="radio" name="feedback" value="social_media"&gt;Social Media&lt;br&gt;
  &lt;input type="radio" name="feedback" value="advertisement"&gt;Advertisement&lt;br&gt;
  &lt;input type="radio" name="feedback" value="Radio_ad"&gt;Radio Advertisement&lt;br&gt;
  &lt;/p&gt;&lt;/p&gt;
  
  &lt;p&gt;&lt;label for="rate"&gt;Rate out service out of 10: &lt;/label&gt;
  &lt;input id="rate" name="rate" type="text" size="2" /&gt;&lt;/p&gt;
  &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As well as that, when I output it, I would like the text field to be aligned properly. (e.g. the textfields are all under each other and they all start at the same point... if you know what I mean.. is it possible to achieve this through float?)</p>