title: Make fields editable when a button is clicked
body: <p>the user of my application should be able to change the email and the phone number by clicking in a button "Change", this is my code:</p>
  
  <pre><code>    &lt;div class="field-group"&gt;
       ...............
       ....................
          &lt;div class="field field-omschrijving"&gt;
            &lt;label class="label"&gt;E-mailadres&lt;/label&gt;&lt;div&gt;@client.email&lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="field field-omschrijving field-last"&gt;
             &lt;label class="label"&gt;Telefoonnummer&lt;/label&gt;&lt;div&gt;@client.phoneNumber&lt;/div&gt;
           &lt;/div&gt;
           &lt;input type="submit" class="form-submit" value="Change" name="op"&gt;
         &lt;/div&gt;&lt;!-- /.field-group --&gt;
  </code></pre>
  
  <p>I've been looking for a solution but no success, any idea about how can I do it? Thanks!</p>
  
  <p>Thanks so much for the fast response! But.. my mistake, what I wanted to say is that the fields should appear in a "normal way" and when the user clicks the button change it should change to an "editable way", right now the field email looks like this:!<img src="https://i.stack.imgur.com/9mWmJ.png" alt="enter image description here">
  I want it looks like this: <img src="https://i.stack.imgur.com/smaPQ.png" alt="Pic. 2"></p>
  
  <p>And after clicking in the "Change" button it has to look like the first image. Thanks again!</p>