In

In most cases, a label should be placed in front of every input field. Use the attribute label.

<tc:in label="Input" value="Some Text"/> Input Read Only Disabled

The following input field should be selected after reloading the page. Use the focus attribute.

<tc:in label="Input (focus)" focus="true" value="Some Text"/> Input (focus)

An input field can be set as required with the required attribute. Such an input field must contain a value, otherwise a submit is not possible. Leave the field blank and press 'submit' to see the error message.

<tc:in label="Input (required)" required="true"/> Input (required) Submit

A help text can be added with the help attribute.

<tc:in help="#{inController.helpText}"/>

To create an input field for passwords, set the password attribute to 'true'. It will hide the text as shown in the following example.

<tc:in label="Password" password="true" value="password"/> Password

A placeholder attribute can be used for explaining a user the meaning of a field.

The text of the placeholder is only shown if the value is an empty string.

<tc:in label="Placeholder" placeholder="Grey Text"/> Placeholder

There are some markups available for input fields.

<tc:in value="large input field" markup="large"/> <tc:in value="small input field" markup="small"/> <tc:in value="number markup" markup="number"/>

The autocomplete attribute can be used for explaining a user the meaning of a field.

on off name The values are documented in MDN.

The output field in this example, displays the given value on the server. With <f:ajax event="input" render="outputAjax" listener="#{inController.update}"/>, the output field will be rerendered, after the value has been changed. Additional, the listener attribute is set. The given method is called after the input field loose focus.

Input

AJAX on change

Output