wiki:ReDesign/form

Formuláře

MUNI framework dokumentuje atomy formulářů~-- grid, formulářové prvky a~tlačítka. Z~těchto atomů se sestavují kompletní formuláře. Ukázkový formulář, ze kterého vycházejí všechny formuláře rezervačního systému a~webového video archivu, se nachází na adrese [ttp://muni-redesign.superkoderi.cz/tpl/m-01-01-standardni.html].

Použití jednotlivých formulářových prvků

Jednotlivé formulářové prvky jsou v MUNI frameworku zdokumentovány na adrese http://muni-redesign.superkoderi.cz/tpl/a-03-formulare.html. Následují jednotlivé typy použitých formulářových prvků, které dokumentují propojení prvku se systémem.

1. Formulář

<s:useActionBean var="ab" beanclass="cz.muni.fi.lemma.web.reservationsystem.PersonActionBean" />
<s:form class="form-std" beanclass="cz.muni.fi.lemma.web.reservationsystem.PersonActionBean" id="person-form">
  <fieldset class="form-std__fieldset">
    // Formularove prvky + moznost pouzit grid
  </fieldset>
</s:form>

2. Input

<p>
  <label for="c2">
    <f:message key="person.email" />
    <span class="required">
      <f:message key="admin.message.required" />
    </span>
  </label>
  <br>
  <span class="inp-fix">
    <input class="inp-text" id="c2" name="person.name" required type="text" value="<c:if test='${! empty ab.person.name}'><c:out value='${ab.person.name}'/></c:if>"/>
  </span>
</p>

3. Select

<p>
  <label for="c1" >
    <f:message key="issuemaster" /> 
    <span class="required">
      <f:message key="admin.message.required" />
    </span>
  </label>
  <br>
  <span class="inp-fix">
    <s:select class="inp-select" name="issuemaster" id="c1">
      <s:option value="">—</s:option>
      <c:forEach var="issuemaster" items="${ab.issuemasters}">
        <s:option value="${issuemaster.id}">${issuemaster.name}</s:option>
      </c:forEach>
    </s:select>
  </span>
</p>

4. Radio

<div class="inp-items">
  <p class="inp-items__label">
    <f:message key="availability" />
  </p>
  <ul class="inp-items__list">
    <li class="inp-items__item">
      <label class="inp-item inp-item--radio">
        <s:radio name="available" value="" />
        <span><f:message key="all" /></span>
      </label>
    </li>
    <li class="inp-items__item">
      <label class="inp-item inp-item--radio">
        <s:radio name="available" value="true" />
        <span><f:message key="available" /></span>
      </label>
    </li>
  </ul>
</div>

5. Checkbox

<p>
  <label class="inp-item inp-item--checkbox" for="c9">
    <s:checkbox id="c9" name="person.admin" value="true" />
    <span><f:message key="person.admin" /></span>
  </label>
</p>       

5.1 Checkbox skupina

<div class="inp-items inp-items--inline">
  <p class="inp-items__label">
    <f:message key="person.permissionCategories" />
  </p>
  <ul class="inp-items__list">
    <c:forEach var="pc" items="${ab.permissionCategories}">
      <li class="inp-items__item">
        <label class="inp-item inp-item--checkbox">
          <s:checkbox id="permissionCategory-${pc.id}" name="permissions[]" value="${pc.id}" />
          <span><c:out value="${pc.name}" /></span>
        </label>
      </li>
    </c:forEach>
  </ul>
</div>

6. Textarea

<p>
  <label for="c3">
    <f:message key="person.address" /> 
    <span class="required">
      <f:message key="admin.message.required" />
    </span>
  </label>
  <br>
  <span class="inp-fix">
    <textarea class="inp-text" cols="50" rows="4" id="c3" name="person.address" required >
      <c:if test='${! empty ab.person.address}'>
        <c:out value='${ab.person.address}'/>
       </c:if>
    </textarea>
  </span>
 </p>

6.1. Textarea + wysiwyg

<script type="text/javascript">
  tinymce.init({
      selector: "textarea",
      plugins: [
          "link, image, table, code, autoresize, textcolor"
      ],
      toolbar: "bold italic underline | styleselect | alignleft aligncenter alignright alignjustify | bullist numlist | forecolor backcolor | link | image | table | code",
      menubar: false,
      toolbar_items_size: "small",
      statusbar: false,
      language: "cs"
   });
</script>


<p>
  <label for="c8">
    <f:message key="source.description" />
  </label>
  <br>
  <span class="inp-fix">
    <s:textarea id="c8" name="source.description" style="width: 100%;" /><br />
  </span>
</p>

7. Tlačítko

<p class="btn-wrap r">
  <button type="submit" class="btn btn-primary" name="cedit">
    <span>
      <f:message key="save" />
    </span>
  </button>
</p>
Last modified 18 months ago Last modified on 04/27/19 15:30:06