Form Input Markup

In Easy Digital Downloads 3.0, we are actively working to make admin side forms and inputs more semantic, accessible, and consistent. This page is added to the wiki to serve as a proposed guideline for the recommended markup for standard inputs.

Please note:

1. These recommendations are for EDD 3.0+
2. This is still in development. At this time, we do not recommend adoption by third parties, as the recommendations may change.
3. This is not intended to be a complete list at this time.

WordPress Core provides additional basic classes which can be used with some inputs:

• small-text
• regular-text
• large-text

Any variables used should be properly escaped: generally esc_attr for attributes, and esc_html or esc_html_e for labels.

Labels should be properly linked to the related input using for. If a visible label is not appropriate, consider using screen-reader-text as an additional class on the label, which will hide it visually, but keep the label/input relationship semantic and accessible.

Checkbox Inputs

<div class="edd-form-group">
	<div class="edd-form-group__control">
		<input type="checkbox" id="edd-sample-checkbox" class="edd-form-group__input" value="1" />

		<label for="edd-sample-checkbox">Checkbox Label</label>
	</div>
</div>

Descriptions

When adding text to help clarify the purpose of an input, use the WordPress Core description class in addition to edd-form-group__help.

<p class="edd-form-group__help description">Help</p>

Number Inputs

<div class="edd-form-group">
    <label for="edd-sample-number" class="edd-form-group__label">Sample Number</label>
    <div class="edd-form-group__control">
        <input type="number" id="edd-sample-number" class="edd-form-group__input" value="1" step="1" min="1" />
    </div>
</div>

Radio Inputs

<fieldset class="edd-form-group">
	<legend class="edd-form-group__label">Label for Group</legend>

	<div class="edd-form-group__control">
		<input type="radio" class="edd-form-group__input" id="edd-sample-radio-input-1" />
 		<label for="edd-sample-radio-input-1">Radio 1</label>
	</div>

	<div class="edd-form-group__control">
		<input type="radio" class="edd-form-group__input" id="edd-sample-radio-input-2" />
		<label for="edd-sample-radio-input-2">Radio 2</label>
	</div>
</fieldset>

Text Inputs

<div class="edd-form-group">
	<label class="edd-form-group__label" for="edd_sample_text_input">Label</label>
	<div class="edd-form-group__control">
		<input type="text" class="edd-form-group__input regular-text" id="edd_sample_text_input" />
	</div>
	<p class="edd-form-group__help description">Help</p>
</div>

Currency Inputs

Some inputs, such as currency fields, require extra markup. In these cases, the edd-form-group__control container will wrap around a span containing the currency symbol, as well as the input.

<div class="edd-form-group">
	<label class="edd-form-group__label" for="edd_currency">Label</label>
	<div class="edd-form-group__control">
		<span class="edd-amount-control__currency is-before">$</span> <input type="number" min="0" step="0.01" class="edd-form-group__input small-text" value="5" id="edd_currency" name="edd_currency">
	</div>
</div>