An Input is a form field used for freeform data entry
<div class="form-group">
<label for="input-1">Label</label>
<input type="text" id="input-1" class="form-control" value="" />
</div>
Help text can provide additional instruction, as needed.
This is a note about the above field
<div class="form-group">
<label for="input-2">Label</label>
<input type="text" id="input-2" class="form-control" value="" />
<p id="input-2_help" class="help-block">This is a note about the above field</p>
</div>
Use required indicators and attributes to show users which fields they must fill out.
<div class="form-group">
<label for="input-3" class="is-required">Label</label>
<input type="text" id="input-3" class="form-control" value="" required />
</div>
Placeholder text is added as an attribue to the input, such as placeholder="MM/YY". Placeholder text is optional and is used to show how to format data for the input field. Pay attention to ensure that placeholder doesn't look like an actual value.
The placeholder attribute is not widely supported by assistive technologies, and has usability concerns.
Placeholders are NOT label replacements.
Disabled fields are used to show information that can't be edited.
<div class="form-group">
<label for="input-4">Label</label>
<input type="text" id="input-4" class="form-control" value="" disabled />
</div>
If a field's value cannot be changed, but users need to be able to read or apply focus to the field, user readonly. If a user needs to be able to copy the value from a field, but can not change it, use readonly.
<div class="form-group">
<label for="input-5">Label</label>
<input type="text" id="input-5" class="form-control" value="" readonly />
</div>
To indicate an error state, add the class .has-error (from Bootstrap) to the parent element of the input element. Inputs with errors should also have aria-describedby and aria-invalid="true" attributes added to them to ensure that the associated field level error message is read by assistive technology.
If the error message for an input has id="input-6-error", the input will have aria-describedby="input-6-error".
Error message
<div class="form-group has-error">
<label for="input-5">Label</label>
<input type="text" id="input-5" class="form-control" value="" aria-describedby="input-6-error" aria-invalid="true" />
<p id="input-6-error" class="help-block">Error message</p>
</div>
Password inputs, type="password", replace the characters typed with bullet symbols to ensure the characters cannot be read by others.
An Email input, type="email", changes the keyboards for users of software keyboards to provide high-frequecy use keys, such as '@' and '.com'.
The Date input, type="date", allows a user to chose a date visually from a calendar or by typing a date into the input field.
Date pickers should not be used to select memorable dates like birthdays.
Number inputs, type="number" are available, but their use case is very limited, they are difficult to interact with, and are prone to causing errors. If it’s likely that the user will need to enter a number and you want to bring up the numeric keypad on a mobile device, set the inputmode attribute to numeric and the pattern attribute to [0-9]*
Text areas allow the user to input extended, multi-line text values.
Text areas can also be set to auto-grow their height. It requires the textarea be wrapped in an element with a class qw-autogrow-wrap. Additionally, a snippet of javascript is required to be added to the textarea element: onInput="this.parentNode.dataset.replicatedValue = this.value"