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"/>

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"/>

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"/>

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"/>

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"/>

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.

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.