Page History

Requires: phpFox version 4.6.0 or higher.

Since 4.6.0, HTML source code is restructured, defined by coding standard:

Help developer re-use layout component without writing more HTML source code, defining more CSS, even without writing javascript code.
Help developer create component components that look consistency with anotherothers.
It's easy to maintenance maintain and flexible to continue customizingcustomize.

FORM Component

In this guide, we introduce how to create layout for standard html form HTML Form components

Form group and form control
Label with class .required
Help block for form-control

Since 4.6.0, form Form component was is re-structured to separating separate row by row, each row contain contains one
element such as email, username, etc.

In order to define a form Form element:

Wrap element in <div class="form-group">...</div>
Add a label for element by <label for="title">Label</div>
Put field input/select/textarea, ... into form Form group, in most of case cases it must contain class form-control.
If field is required, do not forgot to add class required to label element.
If element contain contains note/description, put text into <div class="help-block">

...

Code Block

	actionscript3
	actionscript3


<div class="form-group">
    <label for="title" class="required">{_p var='what_are_you_selling'}</label>
    <input class="form-control" type="text" name="val[title]" value="" id="title" maxlength="100" />
    <div class="help-block">[Your note here]</div>
</div>

...

Code Block

	actionscript3
	actionscript3


<div class="form-group">
    <label for="title" class="required">Password</label>
    <input class="form-control" type="text" name="val[password]" value="" id="title" maxlength="100" />
    <div class="help-block">[Your password note here]</div>
</div>

...

Code Block

	actionscript3
	actionscript3


<div class="form-group">
    <label for="mini_description">{_p var='short_description'}</label>
    <textarea id="mini_description" class="form-control" rows="3" name="val[mini_description]">{value type='textarea' id='mini_description'}</textarea>
</div>

...

Code Block

	actionscript3
	actionscript3


<div class="form-group">
    <label for="category">{_p var='short_description'}</label>
    <select name="" class="form-control">
        <option>...</option>
    </select>
</div>

...

Code Block

	actionscript3
	actionscript3


<div class="form-group">
    <label>Enable payment?</label>
    <label class="radio-inline">
        <input type="checkbox" name="val[is_sell]" value="1" /> Yes
    </label>
    <label class="radio-inline">
        <input type="checkbox" name="val[is_sell]" value="0" selected='true' /> No
    </label>
</div>

...

Code Block

	actionscript3
	actionscript3


<div class="form-group">
    <label for="postal_code">{_p var='enable_instant_payment'}</label>
    <div class="radio">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
        Option one is this and that&mdash;be sure to include why it's great
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
        Option two can be something else and selecting it will deselect option one
      </label>
    </div>
</div>

...

Code Block

	actionscript3
	actionscript3


<div class="form-group">
    <label for="postal_code">{_p var='enable_instant_payment'}</label>
    <label class="radio-inline">
        <input type="radio" name="val[is_sell]" value="1" {value type='radio' id='is_sell' default='1'}/> {_p var='yes'}
    </label>
    <label class="radio-inline">
        <input type="radio" name="val[is_sell]" value="0" {value type='radio' id='is_sell' default='0' selected='true'}/> {_p var='no'}
    </label>
</div>

...

Code Block

	actionscript3
	actionscript3


<div class="form-group">
    <label for="postal_code">{_p var='enable_instant_payment'}</label>
    <div class="radio">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
        Option one is this and that&mdash;be sure to include why it's great
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
        Option two can be something else and selecting it will deselect option one
      </label>
    </div>
</div>

...

Code Block

	actionscript3
	actionscript3


<div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>

...

Code Block

	actionscript3
	actionscript3

     <span class="label label-default">Default</span>
    <span class="label label-primary">Primary</span>
    <span class="label label-success">Success</span>
    <span class="label label-info">Info</span>
    <span class="label label-warning">Warning</span>
    <span class="label label-danger">Danger</span>

...

Code Block

	actionscript3
	actionscript3


<div class="table-responsive">
    <table class="table {feature}">
        <thead>
            <tr>
                <th>Column Name1</th>
                <th>Column Name2</th>
                <th>Column Name3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
            </tr>
        </tbody>
    </table>
</div>

...

Code Block

	actionscript3
	actionscript3


<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

...

Code Block

	actionscript3
	actionscript3


<div class="alert alert-success" role="alert">
    <h4>Requires JavaScript alert plugin</h4>
    For fully functioning, dismissible alerts, you must use the alerts JavaScript plugin.
</div>

...

Code Block

	actionscript3
	actionscript3


<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

...

Code Block

	actionscript3
	actionscript3


<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Page tree

Versions Compared

Old Version 3

New Version Current

Key

FORM Component