causeway-standard-theme/causeway/docs/components/forms.html

<div class="container page">
  <div class="content pane single-pane">
    <section>
      <a id="forms"></a>
      <header class="content-header">
        <h1 class="title">
          Forms
        </h1>

        <ul class="nav nav-pills">
          <li>
            <a href="/docs/forms.html#forms-text">
              Text
            </a>
          </li>
          <li>
            <a href="/docs/forms.html#forms-textarea">
              Textarea
            </a>
          </li>
          <li>
            <a href="/docs/forms.html#forms-password">
              Password
            </a>
          </li>
          <li class="dropdown">
            <a href="/docs/select.html#forms-select" data-hover="dropdown">
              Select
              <span class="fa fa-chevron-down"></span>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="/docs/select.html#forms-select-single">
                  Single Choice
                </a>
              </li>
              <li>
                <a href="/docs/select.html#forms-select-multiple">
                  Multiple Choice
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="/docs/forms.html#forms-file">
              File
            </a>
          </li>
          <li class="dropdown">
            <a href="/docs/date.html#forms-date" data-hover="dropdown">
              Date
              <span class="fa fa-chevron-down"></span>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="/docs/date.html#forms-date-single">
                  Single Date
                </a>
              </li>
              <li>
                <a href="/docs/date.html#forms-date-range">
                  Date Range
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="/docs/forms.html#forms-email">
              Email
            </a>
          </li>
          <li>
            <a href="/docs/forms.html#forms-hyperlink">
              Hyperlink
            </a>
          </li>
          <li>
            <a href="/docs/forms.html#forms-telephone">
              Telephone
            </a>
          </li>
          <li>
            <a href="/docs/forms.html#forms-checkbox">
              Checkbox
            </a>
          </li>
          <li>
            <a href="/docs/forms.html#forms-tristate">
              Tristate
            </a>
          </li>
          <li>
            <a href="/docs/forms.html#forms-radio">
              Radiobutton
            </a>
          </li>
          <li>
            <a href="/docs/forms.html#forms-time">
              Time
            </a>
          </li>
          <li>
            <a href="/docs/forms.html#forms-color">
              Color
            </a>
          </li>
          <li>
            <a href="/docs/forms.html#forms-currency">
              Currency
            </a>
          </li>
          <li>
            <a href="/docs/forms.html#forms-image">
              Image
            </a>
          </li>
          <li>
            <a href="/docs/forms.html#spinbox">
              Spinbox
            </a>
          </li>
          <li>
            <a href="/docs/forms.html#forms-advanced-listbox">
              Advanced Listbox
            </a>
          </li>
          <li>
            <a href="/docs/forms.html#forms-select-shuttle">
              Select Shuttle
            </a>
          </li>
        </ul>
      </header>
      <p>
        Forms comprise of a surround and controlled by optional attribute. The attribute appears in the opening <code>&lt;form&gt;</code> tag. The form tags should surround any content containing form controls but should not contain any child <code>&lt;form&gt;</code> tags. A single row on a form should be contained by a div with a class of <code>"form-group"</code> as shown in the example below.
      </p>

      <pre><code>
  &lt;form role=&quot;form&quot;&gt;
    &lt;div class=&quot;form-group&quot;&gt;
      &lt;label for=&quot;inputField1&quot;&gt;&lt;/label&gt;
      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;inputField1&quot;/&gt;
    &lt;/div&gt;
  &lt;/form&gt;
      </code></pre>

      <br/>
      <header class="content-header">
        <div class="row">
          <div class="col-sm-8">
            <h2 class="title">
              A complex form example
            </h2>
          </div>
          <div class="col-sm-4">
            <button id="condense-form" class="pull-right btn btn-default">Condense</button>
          </div>
        </div>
      </header>
      <form id="tobeCondensed">
        <div class="row">
          <div class="col-md-6">
            <div class="form-group invalid error">
              <label for="userName">User Name:</label>
              <input type="text" id="userName" class="form-control" placeholder="Enter username">
              <span class="error-message">Error Message</span>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <label for="password">Password:</label>
              <input type="password" id="password" class="form-control" placeholder="Enter Password">
            </div>
          </div>
        </div>


        <div class="form-group invalid error-hover">
          <label for="email">Email:</label>
          <input type="email" id="email" class="form-control" placeholder="Enter Email Address">
          <span class="error-message">Error Message</span>
        </div>

        <div class="form-group invalid error-hover">
          <label for="email">Text Area:</label>
          <textarea placeholder="Enter text" name="textarea" id="textarea" rows="5" class="form-control"></textarea>
          <span class="error-message">Error Message for textarea</span>
        </div>

        <div class="form-group invalid error-hover">
          <label for="selectMenu">Select Menu:</label>
          <div class="select">
            <select id="selectMenu" class="form-control">
              <option value="">All</option>
              <option value=""></option>
              <option value="A">Order Acknowledgement</option>
              <option value="BR">Bulk Upload Response</option>
              <option value="D">Dispatch Note</option>
              <option value="I" selected="selected">Invoice</option>
              <option value="LU">Lookup File</option>
              <option value="O">Order</option>
              <option value="P">PCard</option>
              <option value="PR">PCard Response</option>
              <option value="PT">Pass Through File</option>
              <option value="Q">Query</option>
              <option value="R">Requisition</option>
              <option value="RM">Remittance</option>
              <option value="SM">Status</option>
              <option value="S">Statement</option>
            </select>
            <span class="error-message">Error Message for select</span>
          </div>
        </div>

        <div class="form-group">
          <label for="selectMenu2">Select Menu 2:</label>
          <div class="select">
            <select id="selectMenu2" class="form-control">
              <option value="send">Send</option>
              <option value="recv">Receive</option>
            </select>
          </div>
        </div>

        <div class="form-group invalid error-hover">
          <label>This has an error:</label>
          <div class="checkbox">
            <input type="checkbox" id="errorMessage">
            <label for="errorMessage"><span class="checkbox-icon"></span></label>
            <span class="error-message" data-original-title="" title="">Error Message for checkbox</span>
          </div>
        </div>

        <div class="form-group">
          <label>Reporting Days: </label>
          <div class="checkbox-input-group">
            <div class="checkbox-inline">
              <input type="checkbox" id="sun">
              <label for="sun"><span class="checkbox-icon"></span>Sun</label>
            </div>
            <div class="checkbox-inline">
              <input type="checkbox" id="mon">
              <label for="mon"><span class="checkbox-icon"></span>Mon</label>
            </div>
            <div class="checkbox-inline">
              <input type="checkbox" id="tue">
              <label for="tue"><span class="checkbox-icon"></span>Tue</label>
            </div>
            <div class="checkbox-inline">
              <input type="checkbox" id="wed">
              <label for="wed"><span class="checkbox-icon"></span>Wed</label>
            </div>
            <div class="checkbox-inline">
              <input type="checkbox" id="thu">
              <label for="thu"><span class="checkbox-icon"></span>Thu</label>
            </div>
            <div class="checkbox-inline">
              <input type="checkbox" id="fri">
              <label for="fri"><span class="checkbox-icon"></span>Fri</label>
            </div>
            <div class="checkbox-inline">
              <input type="checkbox" id="sat">
              <label for="sat"><span class="checkbox-icon"></span>Sat</label>
            </div>
          </div>
        </div>

        <div class="form-group time">
          <label for="reportingInterval">Reporting Interval:</label>
          <div class="input-group">
            <input type="text" id="reportingInterval" class="form-control">
            <span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
          </div>
        </div>

        <div class="form-group time">
          <label for="startTime">Start Time:</label>
          <div class="input-group">
            <input type="text" id="startTime" class="form-control">
            <span class="input-group-addon"><span class="fa fa-clock-o"></span></span>
          </div>
        </div>

        <div class="form-group has-addon">
          <label for="finishTime">Add on Example:</label>
          <div class="input-group">
            <input type="text" id="finishTime" class="form-control">
            <span class="input-group-addon"><span class="fa fa-star"></span></span>
          </div>
        </div>

        <div class="form-group date">
          <label for="finishDate">Date Example:</label>
          <div class="input-group">
            <input type="text" id="finishDate" class="form-control">
            <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
          </div>
        </div>

        <div class="form-group">
          <label for="disabled">Disabled:</label>
          <input type="text" id="disabled" class="form-control" disabled="disabled"
                 value="Readonly text fields cut off text. need to display all text. Readonly text fields cut off text. need to display all text. need to display all text">
        </div>

        <div class="form-group">
          <label for="readonly">Readonly Example:</label>
          <input type="text" id="readonly" class="form-control readonly"
                 value="Readonly text fields cut off text. need to display all text. Readonly text fields cut off text. need to display all text. need to display all text"
                 readonly="readonly">
        </div>

        <div class="form-group">
          <label for="readonly2">Readonly Example 2:</label>
          <input type="text" id="readonly2" class="form-control readonly"
                 value="Readonly text fields cut off text.. need to display all text. " readonly="readonly">
        </div>

        <div class="form-group">
          <label for="readonly3">Readonly Example 3:</label>
            <textarea name="readonly3" id="readonly3" class="form-control readonly" readonly="readonly">Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.
            </textarea>
        </div>

        <div class="form-group">
          <label for="readonly4">Readonly Example 4:</label>
            <textarea name="readonly4" id="readonly4" class="form-control readonly" readonly="readonly">Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.
            </textarea>
        </div>

        <div class="form-group">
          <label for="fileUpload">File Upload</label>
          <div class="file-input input-group">
            <input type="file" class="form-control file-input-file sr-only" id="fileUpload" name="fileUpload">
            <input type="hidden" class="file-input-remove" id="file-field1a-remove" name="file_field1a_remove"
                   value="0">
            <input type="text" class="form-control file-input-text" id="fileUpload-text" placeholder="Path / Filename"
                   value="">
            <span class="input-group-addon">
              <label for="fileUpload" class="btn btn-text btn-file btn-file-choose">Choose File</label>
              <button type="button" class="btn btn-text btn-file btn-file-remove">Remove</button>
            </span>
          </div>
        </div>

        <div class="form-group">
          <div class="checkbox">
            <input type="checkbox" id="attachCSV">
            <label for="attachCSV"><span class="checkbox-icon"></span>Attach CSV Report:</label>
          </div>
        </div>

        <div class="form-group invalid error-hover">
          <label>My First Radio Buttons:</label>
          <div class="radio-input-group">
            <div class="radio-inline">
              <input type="radio" class="form-control" id="radio1" name="firstRadio" value="">
              <label for="radio1">
                <span class="radio-icon"></span>
                Option 1
              </label>
            </div>
            <div class="radio-inline">
              <input type="radio" class="form-control" id="radio2" name="firstRadio" value="">
              <label for="radio2">
                <span class="radio-icon"></span>
                Option 2
              </label>
            </div>
            <div class="radio-inline">
              <input type="radio" class="form-control" id="radio3" name="firstRadio" value="">
              <label for="radio3">
                <span class="radio-icon"></span>
                Option 3
              </label>
            </div>
            <span class="error-message" data-original-title="" title="">Error Message for my first radio buttons.</span>
          </div>
        </div>

        <div class="form-group invalid error-hover">
          <label>My Second Radio Buttons:</label>
          <div class="radio-input-group">
            <div class="radio">
              <input type="radio" class="form-control" id="radio4" name="secondRadio" value="">
              <label for="radio4">
                <span class="radio-icon"></span>
                Option 1
              </label>
            </div>
            <div class="radio">
              <input type="radio" class="form-control" id="radio5" name="secondRadio" value="">
              <label for="radio5">
                <span class="radio-icon"></span>
                Option 2
              </label>
            </div>
            <div class="radio">
              <input type="radio" class="form-control" id="radio6" name="secondRadio" value="">
              <label for="radio6">
                <span class="radio-icon"></span>
                Option 3
              </label>
            </div>
            <span class="error-message" data-original-title=""
                  title="">Error Message for my second radio buttons.</span>
          </div>
        </div>
      </form>


      <h2 class="title">Hover over error message code for above example</h2>
      <p>Class <code>invalid</code> and <code>error-hover</code> should added to <code>.form-group</code> if there's an
        error.</p>
      <p>Inside <code>.control-input</code> and empty <code>&lt;span class=&quot;error-message&quot;&gt;error message&lt;/span&gt;</code>
        should be placed.</p>
      <p><code>&lt;span class=&quot;error-message&quot;&gt;error message&lt;/span&gt;</code> will remain hidden if the
        parent <code>.form-group</code> doesn't have the class <code>invalid error-hover</code> which means there's no
        error.</p>

      <pre><code>
      &lt;form&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-md-6&quot;&gt;
            &lt;div class=&quot;form-group invalid error&quot;&gt;
              &lt;label for=&quot;userName&quot;&gt;User Name:&lt;/label&gt;
              &lt;input type=&quot;text&quot; id=&quot;userName&quot; class=&quot;form-control&quot; placeholder=&quot;Enter username&quot;&gt;
              &lt;span class=&quot;error-message&quot;&gt;Error Message&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-md-6&quot;&gt;
            &lt;div class=&quot;form-group&quot;&gt;
              &lt;label for=&quot;password&quot;&gt;Password:&lt;/label&gt;
              &lt;input type=&quot;password&quot; id=&quot;password&quot; class=&quot;form-control&quot; placeholder=&quot;Enter Password&quot;&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;


        &lt;div class=&quot;form-group invalid error-hover&quot;&gt;
          &lt;label for=&quot;email&quot;&gt;Email:&lt;/label&gt;
            &lt;input type=&quot;email&quot; id=&quot;email&quot; class=&quot;form-control&quot; placeholder=&quot;Enter Email Address&quot;&gt;
            &lt;span class=&quot;error-message&quot;&gt;Error Message&lt;/span&gt;
        &lt;/div&gt;

        &lt;div class=&quot;form-group invalid error-hover&quot;&gt;
          &lt;label for=&quot;email&quot;&gt;Text Area:&lt;/label&gt;
            &lt;textarea placeholder=&quot;Enter text&quot; name=&quot;textarea&quot; id=&quot;textarea&quot; rows=&quot;5&quot; class=&quot;form-control&quot;&gt;&lt;/textarea&gt;
            &lt;span class=&quot;error-message&quot;&gt;Error Message for textarea&lt;/span&gt;
        &lt;/div&gt;

        &lt;div class=&quot;form-group invalid error-hover&quot;&gt;
          &lt;label for=&quot;selectMenu&quot;&gt;Select Menu:&lt;/label&gt;
          &lt;div class=&quot;select&quot;&gt;
            &lt;select id=&quot;selectMenu&quot; class=&quot;form-control&quot;&gt;
              &lt;option value=&quot;&quot;&gt;All&lt;/option&gt;
              &lt;option value=&quot;&quot;&gt;&lt;/option&gt;
              &lt;option value=&quot;A&quot;&gt;Order Acknowledgement&lt;/option&gt;
              &lt;option value=&quot;BR&quot;&gt;Bulk Upload Response&lt;/option&gt;
              &lt;option value=&quot;D&quot;&gt;Dispatch Note&lt;/option&gt;
              &lt;option value=&quot;I&quot; selected=&quot;selected&quot;&gt;Invoice&lt;/option&gt;
              &lt;option value=&quot;LU&quot;&gt;Lookup File&lt;/option&gt;
              &lt;option value=&quot;O&quot;&gt;Order&lt;/option&gt;
              &lt;option value=&quot;P&quot;&gt;PCard&lt;/option&gt;
              &lt;option value=&quot;PR&quot;&gt;PCard Response&lt;/option&gt;
              &lt;option value=&quot;PT&quot;&gt;Pass Through File&lt;/option&gt;
              &lt;option value=&quot;Q&quot;&gt;Query&lt;/option&gt;
              &lt;option value=&quot;R&quot;&gt;Requisition&lt;/option&gt;
              &lt;option value=&quot;RM&quot;&gt;Remittance&lt;/option&gt;
              &lt;option value=&quot;SM&quot;&gt;Status&lt;/option&gt;
              &lt;option value=&quot;S&quot;&gt;Statement&lt;/option&gt;
            &lt;/select&gt;
            &lt;span class=&quot;error-message&quot;&gt;Error Message for select&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;selectMenu2&quot;&gt;Select Menu 2:&lt;/label&gt;
          &lt;div class=&quot;select&quot;&gt;
            &lt;select id=&quot;selectMenu2&quot; class=&quot;form-control&quot;&gt;
              &lt;option value=&quot;send&quot;&gt;Send&lt;/option&gt;
              &lt;option value=&quot;recv&quot;&gt;Receive&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;form-group invalid error-hover&quot;&gt;
          &lt;label&gt;This has an error:&lt;/label&gt;
          &lt;div class=&quot;checkbox&quot;&gt;
            &lt;input type=&quot;checkbox&quot; id=&quot;errorMessage&quot;&gt;
            &lt;label for=&quot;errorMessage&quot;&gt;&lt;span class=&quot;checkbox-icon&quot;&gt;&lt;/span&gt;&lt;/label&gt;
            &lt;span class=&quot;error-message&quot; data-original-title=&quot;&quot; title=&quot;&quot;&gt;Error Message for checkbox&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label&gt;Reporting Days: &lt;/label&gt;
          &lt;div class=&quot;checkbox-input-group&quot;&gt;
            &lt;div class=&quot;checkbox-inline&quot;&gt;
              &lt;input type=&quot;checkbox&quot; id=&quot;sun&quot;&gt;
              &lt;label for=&quot;sun&quot;&gt;&lt;span class=&quot;checkbox-icon&quot;&gt;&lt;/span&gt;Sun&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class=&quot;checkbox-inline&quot;&gt;
              &lt;input type=&quot;checkbox&quot; id=&quot;mon&quot;&gt;
              &lt;label for=&quot;mon&quot;&gt;&lt;span class=&quot;checkbox-icon&quot;&gt;&lt;/span&gt;Mon&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class=&quot;checkbox-inline&quot;&gt;
              &lt;input type=&quot;checkbox&quot; id=&quot;tue&quot;&gt;
              &lt;label for=&quot;tue&quot;&gt;&lt;span class=&quot;checkbox-icon&quot;&gt;&lt;/span&gt;Tue&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class=&quot;checkbox-inline&quot;&gt;
              &lt;input type=&quot;checkbox&quot; id=&quot;wed&quot;&gt;
              &lt;label for=&quot;wed&quot;&gt;&lt;span class=&quot;checkbox-icon&quot;&gt;&lt;/span&gt;Wed&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class=&quot;checkbox-inline&quot;&gt;
              &lt;input type=&quot;checkbox&quot; id=&quot;thu&quot;&gt;
              &lt;label for=&quot;thu&quot;&gt;&lt;span class=&quot;checkbox-icon&quot;&gt;&lt;/span&gt;Thu&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class=&quot;checkbox-inline&quot;&gt;
              &lt;input type=&quot;checkbox&quot; id=&quot;fri&quot;&gt;
              &lt;label for=&quot;fri&quot;&gt;&lt;span class=&quot;checkbox-icon&quot;&gt;&lt;/span&gt;Fri&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class=&quot;checkbox-inline&quot;&gt;
              &lt;input type=&quot;checkbox&quot; id=&quot;sat&quot;&gt;
              &lt;label for=&quot;sat&quot;&gt;&lt;span class=&quot;checkbox-icon&quot;&gt;&lt;/span&gt;Sat&lt;/label&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;form-group time&quot;&gt;
          &lt;label for=&quot;reportingInterval&quot;&gt;Reporting Interval:&lt;/label&gt;
          &lt;div class=&quot;input-group&quot;&gt;
            &lt;input type=&quot;text&quot; id=&quot;reportingInterval&quot; class=&quot;form-control&quot;&gt;
            &lt;span class=&quot;input-group-addon&quot;&gt;&lt;span class=&quot;fa fa-clock-o&quot;&gt;&lt;/span&gt;&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;form-group time&quot;&gt;
          &lt;label for=&quot;startTime&quot;&gt;Start Time:&lt;/label&gt;
          &lt;div class=&quot;input-group&quot;&gt;
            &lt;input type=&quot;text&quot; id=&quot;startTime&quot; class=&quot;form-control&quot;&gt;
            &lt;span class=&quot;input-group-addon&quot;&gt;&lt;span class=&quot;fa fa-clock-o&quot;&gt;&lt;/span&gt;&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;form-group has-addon&quot;&gt;
          &lt;label for=&quot;finishTime&quot;&gt;Add on Example:&lt;/label&gt;
          &lt;div class=&quot;input-group&quot;&gt;
            &lt;input type=&quot;text&quot; id=&quot;finishTime&quot; class=&quot;form-control&quot;&gt;
            &lt;span class=&quot;input-group-addon&quot;&gt;&lt;span class=&quot;fa fa-star&quot;&gt;&lt;/span&gt;&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;form-group date&quot;&gt;
          &lt;label for=&quot;finishDate&quot;&gt;Date Example:&lt;/label&gt;
          &lt;div class=&quot;input-group&quot;&gt;
            &lt;input type=&quot;text&quot; id=&quot;finishDate&quot; class=&quot;form-control&quot;&gt;
            &lt;span class=&quot;input-group-addon&quot;&gt;&lt;span class=&quot;fa fa-calendar&quot;&gt;&lt;/span&gt;&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;disabled&quot;&gt;Disabled:&lt;/label&gt;
            &lt;input type=&quot;text&quot; id=&quot;disabled&quot; class=&quot;form-control&quot; disabled=&quot;disabled&quot;
                   value=&quot;Readonly text fields cut off text. need to display all text. Readonly text fields cut off text. need to display all text. need to display all text&quot;&gt;
        &lt;/div&gt;

        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;readonly&quot;&gt;Readonly Example:&lt;/label&gt;
            &lt;input type=&quot;text&quot; id=&quot;readonly&quot; class=&quot;form-control readonly&quot;
                   value=&quot;Readonly text fields cut off text. need to display all text. Readonly text fields cut off text. need to display all text. need to display all text&quot;
                   readonly=&quot;readonly&quot;&gt;
        &lt;/div&gt;

        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;readonly2&quot;&gt;Readonly Example 2:&lt;/label&gt;
            &lt;input type=&quot;text&quot; id=&quot;readonly2&quot; class=&quot;form-control readonly&quot;
                   value=&quot;Readonly text fields cut off text.. need to display all text. &quot; readonly=&quot;readonly&quot;&gt;
        &lt;/div&gt;

        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;readonly3&quot;&gt;Readonly Example 3:&lt;/label&gt;
            &lt;textarea name=&quot;readonly3&quot; id=&quot;readonly3&quot; class=&quot;form-control readonly&quot; readonly=&quot;readonly&quot;&gt;Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.
            &lt;/textarea&gt;
        &lt;/div&gt;

        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;readonly4&quot;&gt;Readonly Example 4:&lt;/label&gt;
            &lt;textarea name=&quot;readonly4&quot; id=&quot;readonly4&quot; class=&quot;form-control readonly&quot; readonly=&quot;readonly&quot;&gt;Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.Readonly text fields cut off text. need to display all text.
            &lt;/textarea&gt;
        &lt;/div&gt;

        &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;fileUpload&quot;&gt;File Upload&lt;/label&gt;
          &lt;div class=&quot;file-input input-group&quot;&gt;
            &lt;input type=&quot;file&quot; class=&quot;form-control file-input-file sr-only&quot; id=&quot;fileUpload&quot; name=&quot;fileUpload&quot;&gt;
            &lt;input type=&quot;hidden&quot; class=&quot;file-input-remove&quot; id=&quot;file-field1a-remove&quot; name=&quot;file_field1a_remove&quot;
                   value=&quot;0&quot;&gt;
            &lt;input type=&quot;text&quot; class=&quot;form-control file-input-text&quot; id=&quot;fileUpload-text&quot; placeholder=&quot;Path / Filename&quot;
                   value=&quot;&quot;&gt;
            &lt;span class=&quot;input-group-addon&quot;&gt;
              &lt;label for=&quot;fileUpload&quot; class=&quot;btn btn-text btn-file btn-file-choose&quot;&gt;Choose File&lt;/label&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-text btn-file btn-file-remove&quot;&gt;Remove&lt;/button&gt;
            &lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;form-group&quot;&gt;
          &lt;div class=&quot;checkbox&quot;&gt;
            &lt;input type=&quot;checkbox&quot; id=&quot;attachCSV&quot;&gt;
            &lt;label for=&quot;attachCSV&quot;&gt;&lt;span class=&quot;checkbox-icon&quot;&gt;&lt;/span&gt;Attach CSV Report:&lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;form-group invalid error-hover&quot;&gt;
          &lt;label&gt;My First Radio Buttons:&lt;/label&gt;
          &lt;div class=&quot;radio-input-group&quot;&gt;
            &lt;div class=&quot;radio-inline&quot;&gt;
              &lt;input type=&quot;radio&quot; class=&quot;form-control&quot; id=&quot;radio1&quot; name=&quot;firstRadio&quot; value=&quot;&quot;&gt;
              &lt;label for=&quot;radio1&quot;&gt;
                &lt;span class=&quot;radio-icon&quot;&gt;&lt;/span&gt;
                Option 1
              &lt;/label&gt;
            &lt;/div&gt;
            &lt;div class=&quot;radio-inline&quot;&gt;
              &lt;input type=&quot;radio&quot; class=&quot;form-control&quot; id=&quot;radio2&quot; name=&quot;firstRadio&quot; value=&quot;&quot;&gt;
              &lt;label for=&quot;radio2&quot;&gt;
                &lt;span class=&quot;radio-icon&quot;&gt;&lt;/span&gt;
                Option 2
              &lt;/label&gt;
            &lt;/div&gt;
            &lt;div class=&quot;radio-inline&quot;&gt;
              &lt;input type=&quot;radio&quot; class=&quot;form-control&quot; id=&quot;radio3&quot; name=&quot;firstRadio&quot; value=&quot;&quot;&gt;
              &lt;label for=&quot;radio3&quot;&gt;
                &lt;span class=&quot;radio-icon&quot;&gt;&lt;/span&gt;
                Option 3
              &lt;/label&gt;
            &lt;/div&gt;
            &lt;span class=&quot;error-message&quot; data-original-title=&quot;&quot; title=&quot;&quot;&gt;Error Message for my first radio buttons.&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&quot;form-group invalid error-hover&quot;&gt;
          &lt;label&gt;My Second Radio Buttons:&lt;/label&gt;
          &lt;div class=&quot;radio-input-group&quot;&gt;
            &lt;div class=&quot;radio&quot;&gt;
              &lt;input type=&quot;radio&quot; class=&quot;form-control&quot; id=&quot;radio4&quot; name=&quot;secondRadio&quot; value=&quot;&quot;&gt;
              &lt;label for=&quot;radio4&quot;&gt;
                &lt;span class=&quot;radio-icon&quot;&gt;&lt;/span&gt;
                Option 1
              &lt;/label&gt;
            &lt;/div&gt;
            &lt;div class=&quot;radio&quot;&gt;
              &lt;input type=&quot;radio&quot; class=&quot;form-control&quot; id=&quot;radio5&quot; name=&quot;secondRadio&quot; value=&quot;&quot;&gt;
              &lt;label for=&quot;radio5&quot;&gt;
                &lt;span class=&quot;radio-icon&quot;&gt;&lt;/span&gt;
                Option 2
              &lt;/label&gt;
            &lt;/div&gt;
            &lt;div class=&quot;radio&quot;&gt;
              &lt;input type=&quot;radio&quot; class=&quot;form-control&quot; id=&quot;radio6&quot; name=&quot;secondRadio&quot; value=&quot;&quot;&gt;
              &lt;label for=&quot;radio6&quot;&gt;
                &lt;span class=&quot;radio-icon&quot;&gt;&lt;/span&gt;
                Option 3
              &lt;/label&gt;
            &lt;/div&gt;
            &lt;span class=&quot;error-message&quot; data-original-title=&quot;&quot;
                  title=&quot;&quot;&gt;Error Message for my second radio buttons.&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
      </code></pre>

      <br/>
      <!--(bake form-fields/text-input.html)-->
      <br/>
      <!--(bake form-fields/textarea-input.html)-->
      <br/>
      <!--(bake form-fields/password-input.html)-->
      <br/>
      <!--(bake form-fields/file-input.html)-->
      <br/>
      <!--(bake form-fields/email-input.html)-->
      <br/>
      <!--(bake form-fields/link-input.html)-->
      <br/>
      <!--(bake form-fields/telephone-input.html)-->
      <br/>
      <!--(bake form-fields/checkbox-input.html)-->
      <br/>
      <!--(bake form-fields/tristate-input.html)-->
      <br/>
      <!--(bake form-fields/radio-input.html)-->
      <br/>
      <!--(bake form-fields/time-input.html)-->
      <br/>
      <!--(bake form-fields/image-input.html)-->
      <br/>
      <!--(bake form-fields/spinbox-input.html)-->
      <br/>
      <!--(bake form-fields/forms-color.html)-->
      <br/>
      <!--(bake form-fields/forms-currency.html)-->
      <br/>
      <!--(bake form-fields/advanced-listbox.html)-->
      <br/>
      <!--(bake form-fields/select-shuttle.html)-->

    </section>
  </div>
</div>