Forms, Fields, and Labels

Input components are designed to make it easy to assign labels to form fields. Labels build a programmatic relationship between a form field and its textual label. When using a placeholder in an input component, set the label attribute for accessibility.

Use the input components that extend ui:input, except when type="file". For example, use ui:inputTextarea in preference to the <textarea> tag for multi-line text input or the ui:inputSelect component in preference to the <select> tag.

If your code failed, check the label element during component rendering. A label element should have the for attribute and match the value of input control id attribute, OR the label should be wrapped around an input. Input controls include <input>, <textarea>, and <select>.

1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!-- Good: using label/for= -->
18<label for="fullname">Enter your full name:</label>
19<input type="text" id="fullname" />
20
21<!-- Good: --using implicit label>
22<label>Enter your full name:
23    <input type="text" id="fullname"/>
24</label>