title: HTML form fields and margin display
body: <p>I am designing HTML form, but I am facing two problems.
  The first problem is that when I click inside the text field, the value text does not disappear.</p>
  
  <p>The second thing is that I want to display the form in the bottom left corner of the screen, like you were sitting infront of a computer, and dragged the mouse down to the bottom left corner of the screen (with your right hand).
  <a href="http://mrprofessional.se/facebook/" rel="nofollow">The link for the form is given</a></p>
  
  <p>Code for the form:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Facebook Add PHP Example&lt;/title&gt;
  &lt;style type="text/css"&gt;
  #formwrapper{
  width:340px;
  border:0;
  background-color:#dce37f;
  margin: 70px auto;
  padding: 20px 0;
  display:block;
  }
  #headdiv{
  width:340px;
  border:0;
  margin: 10px 10px 10px 18.5px;
  }
  form {
  display:block;
  width:340px;
  margin: 0 auto;
  }
  
  .text{
  width: 275px;
  border-radius:6px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  background:#fcfcfc;
  border:3px solid #cccccc;
  box-shadow:0px 0px 3px 1px #cccccc;
  outline: none;
  padding:10px;
  margin: 10px 10px 10px 18.5px;
  }
  .text:focus{
  background:#e6edfc;
  border:3px solid #deb93e;
  box-shadow:0px 0px 3px 1px #cccccc;
  }
  .fname{
  display: inline;
  width: 116px;
  border-radius:6px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  background:#fcfcfc;
  border:3px solid #cccccc;
  box-shadow:0px 0px 3px 1px #cccccc;
  outline: none;
  padding:10px;
  margin: 10px 10px 10px 18.5px;
  }
  .fname:focus{
  background:#e6edfc;
  border:3px solid #deb93e;
  box-shadow:0px 0px 3px 1px #cccccc;
  }
  .lname{
  display: inline;
  width: 116px;
  border-radius:6px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  background:#fcfcfc;
  border:3px solid #cccccc;
  box-shadow:0px 0px 3px 1px #cccccc;
  outline: none;
  padding:10px;
  margin: 10px 10px 10px 1px;
  }
  .lname:focus{
  background:#e6edfc;
  border:3px solid #deb93e;
  box-shadow:0px 0px 3px 1px #cccccc;
  }
  .gatadress{
  display: inline;
  width: 116px;
  border-radius:6px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  background:#fcfcfc;
  border:3px solid #cccccc;
  box-shadow:0px 0px 3px 1px #cccccc;
  outline: none;
  padding:10px;
  margin: 10px 10px 10px 18.5px;
  }
  .gatadress:focus{
  background:#e6edfc;
  border:3px solid #deb93e;
  box-shadow:0px 0px 3px 1px #cccccc;
  }
  .postnr{
  display: inline;
  width: 116px;
  border-radius:6px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  background:#fcfcfc;
  border:3px solid #cccccc;
  box-shadow:0px 0px 3px 1px #cccccc;
  outline: none;
  padding:10px;
  margin: 10px 10px 10px 1px;
  }
  .postnr:focus{
  outline: none;
  background:#e6edfc;
  border:3px solid #deb93e;
  box-shadow:0px 0px 3px 1px #cccccc;
  }
  #Jag{
  display: inline;
  border-radius:6px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  background:#fcfcfc;
  border:3px solid #cccccc;
  box-shadow:0px 0px 3px 1px #cccccc;
  outline: none;
  padding:10px;
  margin: 10px 10px 10px 22px;
  
  }
  .label{
  
  padding:0px;
  margin: 10px 10px 10px 0px;
  
  }
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="formwrapper"&gt;
  &lt;div id="headdiv"&gt;
  &lt;img src="original_hembakat_besta_ll.png" /&gt;
  &lt;/div&gt;
  &lt;form id="demo-form" parsley-validate&gt;
  
      &lt;input type="email" name="email" value= "E-Post*" parsley-trigger="change" required class="text" /&gt;&lt;br/&gt;
      &lt;input type="text" name="firstname" value= "Fornamn*" required size="18px" class="fname" /&gt;
       &lt;input type="text" name="lastname" value= "Efternamn*" required size="18px" class="lname" /&gt;&lt;br/&gt;
       &lt;input type="text" name="telephone" value= "Telefon*" required size="43px" class="text" /&gt;&lt;br/&gt;
       &lt;input type="text" name="gatuadress" value= "Gatuadress*" required size="43px" class="gatadress"/&gt;
       &lt;input type="text" name="postnr" value= "Postnr*" required size="43px" class="postnr"/&gt;&lt;br/&gt;
       &lt;input type="text" name="postort" value= "Postort*" required size="43px" class="text" /&gt;&lt;br/&gt;
       &lt;input type="checkbox" id="Jag" value = "Jag godkänner villkoren" /&gt;
       &lt;label for = "jaggod" class="label"&gt;Jag godkanner &lt;a href="https://a.pgtb.me/facebook/app/139383/renderi/#"&gt;villkoren&lt;/a&gt;&lt;/label&gt;&lt;br/&gt;
  
       &lt;input type="submit" value="Send" /&gt;
  
  
  &lt;/form&gt;
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>