HTML-Prototype von TUM Campus Heilbronn

<form class="powermail_form" action="#" method="post">
  <fieldset class="powermail_fieldset">
    <legend class="powermail_legend">Form title</legend>
    <div class="powermail_fields">
      <div class="powermail_fieldwrap powermail_fieldwrap_type_input">
        <label class="powermail_label" for="demoform-name">Last name<span class="mandatory" aria-hidden="true">*</span><span class="u-visually-hidden"> Required field</span>
        </label>
        <div class="powermail_field">
          <input class="powermail_field_error" type="text" id="demoform-name" name="name" placeholder="Mustermann*"/>
          <ul class="powermail-errors-list filled" aria-live="polite">
            <li>This is a required field</li>
          </ul>
        </div>
      </div>
      <div class="powermail_fieldwrap powermail_fieldwrap_type_input">
        <label class="powermail_label" for="demoform-surname">First name
        </label>
        <div class="powermail_field">
          <input type="text" id="demoform-surname" name="surname" placeholder="Max"/>
        </div>
      </div>
      <div class="powermail_fieldwrap powermail_fieldwrap_type_input">
        <label class="powermail_label" for="demoform-street">Street, No.
        </label>
        <div class="powermail_field">
          <input type="text" id="demoform-street" name="street" placeholder="Kunstmühlstraße 12a"/>
        </div>
      </div>
      <div class="powermail_fieldwrap powermail_fieldwrap_type_input">
        <label class="powermail_label" for="demoform-zipcity">Zip, City
        </label>
        <div class="powermail_field">
          <input type="text" id="demoform-zipcity" name="zipcity" placeholder="83026, Rosenheim"/>
        </div>
      </div>
      <div class="powermail_fieldwrap powermail_fieldwrap_type_input">
        <label class="powermail_label" for="demoform-phone">Phone
        </label>
        <div class="powermail_field">
          <input type="text" id="demoform-phone" name="phone" placeholder="+49 0000/000-01"/>
        </div>
      </div>
      <div class="powermail_fieldwrap powermail_fieldwrap_type_input">
        <label class="powermail_label" for="demoform-fax">Fax
        </label>
        <div class="powermail_field">
          <input type="text" id="demoform-fax" name="fax" placeholder="+49 0000/000-01"/>
        </div>
      </div>
      <div class="powermail_fieldwrap powermail_fieldwrap_type_input">
        <label class="powermail_label" for="demoform-mail">E-mail
        </label>
        <div class="powermail_field">
          <input type="email" name="email" id="demoform-mail" placeholder="max.mustermann@text.de"/>
        </div>
      </div>
      <div class="powermail_fieldwrap powermail_fieldwrap_type_select">
        <label class="powermail_label" for="demoform-selection">Selection
        </label>
        <div class="powermail_field">
          <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>
      <fieldset class="powermail_fieldwrap powermail_fieldwrap_type_radio">
        <legend class="powermail_label">Answer desired?
        </legend>
        <div class="powermail_field">
          <div class="radio">
            <input class="powermail_radio" id="demoform-answer-1" name="answer" type="radio"/>
            <label for="demoform-answer-1">Yes, unencrypted by mail</label>
          </div>
          <div class="radio">
            <input class="powermail_radio" 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 class="powermail_radio" id="demoform-answer-3" name="answer" type="radio"/>
            <label for="demoform-answer-3">No</label>
          </div>
        </div>
      </fieldset>
      <fieldset class="powermail_fieldwrap powermail_fieldwrap_type_radio">
        <legend class="powermail_label">Your request concerns
        </legend>
        <div class="powermail_field">
          <div class="radio">
            <input class="powermail_radio" id="demoform-matter-1" name="matter" type="radio"/>
            <label for="demoform-matter-1">Selection 1</label>
          </div>
          <div class="radio">
            <input class="powermail_radio" id="demoform-matter-2" name="matter" type="radio"/>
            <label for="demoform-matter-2">Selection 2</label>
          </div>
          <div class="radio">
            <input class="powermail_radio" id="demoform-matter-3" name="matter" type="radio"/>
            <label for="demoform-matter-3">Selection 3</label>
          </div>
          <div class="radio">
            <input class="powermail_radio" id="demoform-matter-4" name="matter" type="radio"/>
            <label for="demoform-matter-4">Selection 4</label>
          </div>
        </div>
        <p class="powermail_field_description" id="demoform-matter-description">Pick the topic that fits best.</p>
      </fieldset>
      <div class="powermail_fieldwrap powermail_fieldwrap_type_file">
        <label class="powermail_label" for="demoform-file">Attachment
        </label>
        <div class="powermail_field">
          <input class="powermail_file" type="file" id="demoform-file" name="file"/>
          <p class="powermail_file_info">Accepted file types: pdf, doc, docx, png, jpg, jpeg, max. file size: 500 MB.</p>
        </div>
        <p class="powermail_field_description" id="demoform-file-description">Please attach your CV and a cover letter.</p>
      </div>
      <div class="powermail_fieldwrap powermail_fieldwrap_type_textarea">
        <label class="powermail_label" for="demoform-message">Message
        </label>
        <div class="powermail_field">
          <textarea id="demoform-message" rows="8" cols="48" name="message" placeholder="Write your message here"></textarea>
        </div>
      </div>
      <div class="powermail_fieldwrap powermail_fieldwrap_type_check">
        <div class="powermail_field">
          <div class="checkbox">
            <input class="powermail_checkbox" type="checkbox" id="checkboxdemo-privacy" name="privacy"/>
            <label for="checkboxdemo-privacy"><span class="powermail_checkbox_label">Privacy policy<span class="mandatory" aria-hidden="true">*</span><span class="u-visually-hidden"> Required field</span></span><span>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. </span>
            </label>
          </div>
        </div>
      </div>
      <div class="powermail_fieldwrap powermail_fieldwrap_type_submit">
        <div class="powermail_field">
          <button class="btn btn--primary" type="submit">Send</button>
        </div>
      </div>
    </div>
  </fieldset>
</form>