InputText

The most common form controls are text-based input fields. They accept arbitrary text (as opposed to date pickers and color pickers, which restrict the input to their data type).

The most simple example is a plain b:inputText with a placeholder attribute, which contains an hint that is shown in the input field until something is typed in it. The demo below shows what such a simple inputText looks like. We've added a bit of AJAX functionality with a small delay to it to make it more interesting:

As you noticed, the input is as large as its parent container (minus a little margin). You will see how to control its size later in this section.

Enhancing the b:inputText form control

To help you enhance the user experience, BootsFaces comes in with a useful feature:

You can easily prepend or append text to your inputTexts and what you prepend and append will seem part of the input field. Just use the facets prepend and append and put the h:outputText element (or image, or whatever) into the facet. You can even prepend and append at the same time, as in the following example:

Finally, you can go further and prepend or append multiple text elements, as in the following example:

Appending or prepending icons

You can take advantage of the <b:icon> or <b:iconAwesome> components to append (or prepend) icons :

Appending or prepending buttons

Another nice feature is that you can append (or prepend) buttons, allowing you to build compact mini-forms for specific actions with little effort:

caveat There is only one limitation: you can not prepend or append mixed texts and buttons. The elements on each side can be only of the same type. For instance, it's possible to prepend text elements and append buttons. But it's not possible to prepend both a text element and a button at the same time.

Appending or prepending DropButtons

What you have seen also applies to DropButtons:

Controlling the size of b:inputText

Height sizing

You can create larger or smaller form controls that match button sizes.

Use the fieldSize attribute for predefined input field sizes:

AJAX and JavaScriptsince 0.8.0

The <b:inputText > supports the full suite of JavaScript and AJAX events, as described in the description of AJAX in BootsFaces. Basically, each of the many JavaScript callback handlers (the on[event] attributes) also supports AJAX. To get familiar with BootsFaces AJAX, try the BootsFaces AJAX demo project.

JSF 2.2 pass-through attributes

It's possible to use pass-through attributes with the <b:inputText widget, but there's a twist: the attributes are added multiple times. This is because there are several plausible places to put a pass-through attribute in, so we decided to leave it as it is.

For instance, consider this JSF snippet:

The generated HTML code looks like so:

Labels, required fields and error messagesbreaking change in 1.1.0

You can add a label by adding the attribute label. The label is also used by the JSF messages. To give you maximum flexibility, you can suppress automatic rendering of labels by adding renderLabel="false".

BootsFaces 1.0.2 and below:

Required inputs fields and their labels both bear the CSS class bf-required. By default, this adds an asterisk to the label.

If the field has a FacesMessage, one of the CSS classes bf-info, bf-warning, bf-error or bf-fatal, depending on which error severity the message has. The latter two classes color the label red.

If there's no message, the field and its label bear the pseudo CSS class bf-no-message and has-success. The latter colors the label green by default.

BootsFaces 1.1.0:

bf-info, bf-warning, bf-error or bf-fatal have been dropped in favor of the standard Bootstrap CSS classes has-success, has-warning and has-error. Plus, they are applied to the form-group instead of the labels and input fields.

Compatibility settings

If your application depends on the old HTML code, activate the context parameter net.bootsfaces.legacy_error_classes in the web.xml. The example below shows how to do this.

Bean Validation API (JSR 303 and JSR 349)since 1.1.0

Inline formsbreaking change in 1.1.0

To comply with the coding style recommended and supported by the Bootstrap team, we've decided to rework the concept of horizontal and inline forms from scratch in BootsFaces 1.1.0. If you're migrating from an earlier version of BootsFaces, and if you're using inline forms, you'll most likely want to replace them by horizontal forms.

Since BootsFaces 1.1.0, inline forms can only be used with a single row. There's no such thing as a multi-line inline form. Multiline-forms are supported either by regular stacked forms (default) or by horizontal form. You activate the horizontal form mode by using the BootsFaces form <b:form horizontal="true" >

.

Configuring the default value of therenderLabel attribute

Strictly speaking, BootsFaces adds a second meaning to an attribute that already exists. Standard JSF useslabel to decorate <h:message />. In order to minimize confusion, we decided to deactivate the label rendering feature of BootsFaces by default. However, at the end of the day, it's your application. So it's you who needs to be in charge. Starting with BootsFaces 0.8.5, you can add a context parameter to the web.xml of your application to set the default value of renderLabel. It goes without saying that you can use EL expressions with this attribute. We traded performance to give you maximum flexibility.

id vs. fieldId, or how to be compatible to JAAS since 0.9.0

BootsFaces adds some Bootstrap code to the HTML input field. This often leads to problems with the ids. Intuitively, most developers expect the id of the <b:inputText> to be identical to the id of the <h:input> field. At the same time they expect that AJAX updates the input field when the update attribute is <b:inputText id="firstNameID" update="firstNameId" />.

To solve the problem, we've introduced a second id, the fieldId. The fieldId is the id of the input field itself, while the attribute id refers to the entire component.

Similarly, you can optionally set the attribute name.

Note that in this case the ids of the container are not added automatically. You are responsible to make the ids and names unique.

This feature comes in handy if you're working with JAAS, which requires the id and the name of the field to be "j_username" and "j_password":

Responsive designsince 0.9.0

You can use all the attributes controlling the responsive behaviour of <b:column /> also with <b:inputText />. Note that this is equivalent to putting it into a <b:column />. In particular, the CSS styles are inside the column div. Responsive design only applies to horizontal forms.

Using the span attribute for responsive design

The span attribute is a short-hand notation for col-md or medium-screen:

Visibility depending on screen sizesince 0.8.6/0.9.0

You can play also with col-*-*, visible and hidden attribute, as any bootstrap elements. For example:

Tagssince 0.9.0

By setting the attribute tags="true" you can display the input values as tag - similar to <b:badge /> or to price tags in the supermarket. The tags are separated by commas. Users can separate tags either by tying a comma or by hitting the return key.

We've dedicated a special showcase page to the input text tags.

Masksince 1.1.2improved with 1.2.1

An input mask can be set using the mask attribute. Default masking definitions:

• 9: numeric
• a: alphabetical
• *: alphanumeric
• A: alphabetical, upper case
• &: alphanumerical upper case (note that you have to escape the & character in JSF)
• currency: currency (only dollars)
• email: email address
• numeric: numeric values
• decimal: synonym of numeric
• integer: integer values
• numeric: integer values
• h: hours
• s: seconds or minutes (number in the range between 0 and 59)
• m: simple month
• y: simple year
• mm/dd/yyyy: American date
• dd/mm/yyyy: French and Italien date
• dd.mm.yyyy: German date (complete list at https://github.com/RobinHerbots/Inputmask/blob/4.x/README_date.md)

Masks can also contain a variable number of tokens. For example: 9-a{1,3}9{1,3}. This first number in the curly braces defines the minimum number of characters. The second number specifies the maximum number of characters. Optional masks can be defined by putting them into square brackets: 9{1,3}[,999].

When a mask starts with { it is considered to be a JSON object. This allows you to use more advanced masks, for example using a regular expression: { regex: '\\d*' }, or set greedy to false: { mask: '9[-9999]', greedy: false }. Read the full documentation at the project page of the underlying JavaScript plugin written by Robin Herbots.

Reference section