# --
# AgentHTMLReferenceForms.dtl - HTML reference forms page
# Copyright (C) 2001-2012 OTRS AG, http://otrs.org/
# --
# $Id: AgentHTMLReferenceForms.dtl,v 1.4 2012/11/20 15:17:56 mh Exp $
# --
# This software comes with ABSOLUTELY NO WARRANTY. For details, see
# the enclosed file COPYING for license information (AGPL). If you
# did not receive this file, see http://www.gnu.org/licenses/agpl.txt.
# --

<div class="MainBox ARIARoleMain AgentHTMLReference">
    <h1>Forms Handling</h1>

    <p class="Documentation">
        In OTRS 2.4, form layout was created with many nested tables. Since OTRS 3.0, the two-column form layout
        (which is the most common use case) is handled with <code>&lt;fieldset class="TableLike"&gt;</code> instead.
        The form will then consist of a first column for the labels, and a second column for the actual fields.
        In the default skin, these two have a relative width and will resize when the window resizes. Example:
    </p>

    <fieldset class="DocumentationExample TableLike OutlineBox">
        <label for="input1">Label1</label>
        <div class="Field">
            <input type="text" id="input1" class="W50pc" value="W50pc: 50% width"/>
        </div>
        <div class="Clear"></div>

        <label for="input2">Label2</label>
        <div class="Field">
            <select id="input2" class="W25pc"><option>W25pc: 25% width</option></select>
            <p class="FieldExplanation">
                Field explanation text
            </p>
        </div>
        <div class="Clear"></div>

        <label for="input3">Label3</label>
        <div class="Field">
            <textarea id="input3" class="W75pc" rows="5">W75pc: 75% width</textarea>
            <p class="FieldExplanation">
                Field explanation text
            </p>
        </div>
        <div class="Clear"></div>
    </fieldset>

    <p class="Documentation">
        As you can see, every line in the form consists of a <code>&lt;label&gt;</code>, a <code>&lt;div class="Field"&gt;</code>
        and a <code>&lt;div class="Clear"&gt;</code>. The label must be connected to the input element by putting the input's
        <code>id</code> attribute into the <code>for</code> attribute of the label. Then the user can click on the label to
        give focus to the input element.
    </p>

    <p class="Documentation">
        There are modificator classes available which change the appearance of the <code>fieldset class="TableLike"</code>.
    </p>

    <fieldset class="DocumentationExample TableLike FixedLabel OutlineBox">
        <label for="inputfixedlabel">Label</label>
        <div class="Field">
            <textarea id="inputfixedlabel" class="W75pc" rows="2">
The modificator class "FixedLabel" causes the label column to have a fixed width, so that it does not resize automatically.
</textarea>
        </div>
        <div class="Clear"></div>
    </fieldset>

    <fieldset class="DocumentationExample TableLike FixedLabelSmall OutlineBox">
        <label for="inputfixedlabelsmall">Label</label>
        <div class="Field">
            <textarea id="inputfixedlabelsmall" class="W75pc" rows="2">
The modificator class "FixedLabelSmall" works like "FixedLabel", but the label column is smaller (for small forms).
</textarea>
        </div>
        <div class="Clear"></div>
    </fieldset>

    <p class="Documentation">
        If you just want to use the fieldsets to show data like in a form, you can use the class <code>Value</code>
        instead of <code>Field</code> for the right column. Compare the Ticket Information in AgentTicketZoom, for example.
    </p>
    <fieldset class="DocumentationExample TableLike OutlineBox">
        <label>Label</label>
        <div class="Value">
            Some value
        </div>
        <div class="Clear"></div>

        <label>Label2</label>
        <div class="Value">
            Another value
        </div>
        <div class="Clear"></div>
    </fieldset>

</div>
