HTML-Prototype von in2code

<insert-markup>2.3-</insert-markup>
Form title
  • This is a required field
Answer desired?
Your request concerns
Markup: templates/output/04-elements/forms/demoform.html

<form action="#" method="post">
  <fieldset>
    <legend>Form title</legend>
    <div class="flex">
      <div class="flex__12 powermail_fieldwrap">
        <label class="powermail_label" for="demoform-name">Last name</label>
        <input type="text" id="demoform-name" name="name" placeholder="Mustermann"/>
        <ul class="powermail-errors-list">
          <li>This is a required field</li>
        </ul>
      </div>
      <div class="flex__12 powermail_fieldwrap">
        <label class="powermail_label" for="demoform-surname">First name</label>
        <input type="text" id="demoform-surname" name="surname" placeholder="Max"/>
      </div>
      <div class="flex__12 powermail_fieldwrap">
        <label class="powermail_label" for="demoform-street">Street, No.</label>
        <input type="text" id="demoform-street" name="street" placeholder="Kunstmühlstraße 12a"/>
      </div>
      <div class="flex__12 powermail_fieldwrap">
        <label class="powermail_label" for="demoform-zipcity">Zip, City</label>
        <input type="text" id="demoform-zipcity" name="zipcity" placeholder="83026, Rosenheim"/>
      </div>
      <div class="flex__12 powermail_fieldwrap">
        <label class="powermail_label" for="demoform-phone">Phone</label>
        <input type="text" id="demoform-phone" name="phone" placeholder="+49 0000/000-01"/>
      </div>
      <div class="flex__12 powermail_fieldwrap">
        <label class="powermail_label" for="demoform-fax">Fax</label>
        <input type="text" id="demoform-fax" name="fax" placeholder="+49 0000/000-01"/>
      </div>
      <div class="flex__12 powermail_fieldwrap">
        <label class="powermail_label" for="demoform-mail">E-mail</label>
        <input type="email" name="email" id="demoform-mail" placeholder="max.mustermann@text.de"/>
      </div>
      <div class="flex__12 powermail_fieldwrap">
        <label class="powermail_label" for="demoform-selection">Selection</label>
        <select id="demoform-selection" name="selection">
          <option value="" disabled="disabled" selected="selected">Please select</option>
          <option value="1">Selection 1</option>
          <option value="2">Selection 2</option>
          <option value="3">Selection 3</option>
          <option value="4">Selection 4</option>
        </select>
      </div>
      <div class="flex__12 powermail_fieldwrap">
        <fieldset>
          <legend>Answer desired?</legend>
          <div class="form-radiogroup">
            <div class="radio">
              <input id="demoform-answer-1" name="answer" type="radio"/>
              <label for="demoform-answer-1">Yes, unencrypted by mail</label>
            </div>
            <div class="radio">
              <input id="demoform-answer-2" name="answer" type="radio"/>
              <label for="demoform-answer-2">Yes, by mail (fill in address above!)</label>
            </div>
            <div class="radio">
              <input id="demoform-answer-3" name="answer" type="radio"/>
              <label for="demoform-answer-3">No</label>
            </div>
          </div>
        </fieldset>
      </div>
      <div class="flex__12 powermail_fieldwrap">
        <fieldset>
          <legend>Your request concerns</legend>
          <div class="form-radiogroup">
            <div class="radio">
              <input id="demoform-matter-1" name="matter" type="radio"/>
              <label for="demoform-matter-1">Selection 1</label>
            </div>
            <div class="radio">
              <input id="demoform-matter-2" name="matter" type="radio"/>
              <label for="demoform-matter-2">Selection 2</label>
            </div>
            <div class="radio">
              <input id="demoform-matter-3" name="matter" type="radio"/>
              <label for="demoform-matter-3">Selection 3</label>
            </div>
            <div class="radio">
              <input id="demoform-matter-4" name="matter" type="radio"/>
              <label for="demoform-matter-4">Selection 4</label>
            </div>
          </div>
        </fieldset>
      </div>
      <div class="flex__12 powermail_fieldwrap">
        <label class="powermail_label" for="demoform-message">Message</label>
        <textarea id="demoform-message" rows="8" cols="48" name="message" placeholder="Write your message here"></textarea>
      </div>
      <div class="flex__12 powermail_fieldwrap">
        <div class="checkbox">
          <input type="checkbox" id="checkboxdemo-privacy" name="privacy"/>
          <label for="checkboxdemo-privacy">I have taken note of the <a href="#">privacy policy</a>. I agree that my information and data will be collected and stored electronically to answer my request. </label>
        </div>
      </div>
      <button class="btn btn--primary" type="submit">Send</button>
    </div>
  </fieldset>
</form>
Source: assets/sass/04-elements/_elements.forms.scss, line 5