Champ de saisie

Champ de saisie de données sous forme de texte, de nombre, de date, de couleur, etc.

Classes du composant

Modificateurs de taille

form-field--sm : Small
form-field--md : Medium
form-field--lg : Large
form-field--xl : Extra-large

Modificateurs d'apparence

form-field--accent : Met le texte du champ de saisie en valeur
form-field--selected : Met le champ de saisie en valeur de façon à montrer qu'il est sélectionné
form-field--seamless : Rend le champ de saisie discret en supprimant ses bordures
form-field--auto-size : Permet au champ de s'agrandir avec le texte saisi à l'intérieur
form-field--select : Indique que le champ de saisie est de type "select" (voir documentation dédiée)
form-field--tick : Indique que le champ de saisie est de type "checkbox" ou "radio" (voir documentation dédiée)
form-field--expanded : Permet au champ de saisie d'occuper 100% de la largeur disponible
form-field--inline : Aligne le champ de saisie au centre de la ligne de texte quand il est utilisé en "inline"

Commentaires

Distinction `id` et `name`

Le paramètre name n'étant pas obligatoire, il prendra, par défaut, la valeur du paramètre id.

`type` du champ de saisie

Ce champ prend en compte tous les types définis par le champ <input> en HTML. Par défaut, la valeur de type sera text (saisie de texte simple).

Il prend aussi en charge le type spécial textarea permettant d'utiliser un champ de saisie de texte multi-ligne plutôt qu'un champ de texte simple.

Prénom

Message

Couleur

Téléphone

Date de naissance

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>

<%@ taglib prefix="kuik" uri="kuik" %>

<kuik:form-field-input id="first-name" label="Prénom" size="md" />

<kuik:form-field-input id="message" label="Message" size="md" type="textarea" />

<kuik:form-field-input id="color" label="Couleur" size="md" type="color" />

<kuik:form-field-input id="phone" label="Téléphone" size="md" type="phone" />

<kuik:form-field-input id="birth-date" label="Date de naissance" size="md" type="date" />

Name	Type	Required	Description
size	java.lang.String	false	Taille du champ de saisie
id	java.lang.String	true	Identifiant unique du champ
label	java.lang.String	false	Nom du champ de saisie
type	java.lang.String	false	Type du champ de saisie (tous types d'input OU textarea)
name	java.lang.String	false	Nom technique du champ de saisie
value	java.lang.String	false	Valeur prédéfinie du champ de saisie

<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<%@ attribute name="size" type="java.lang.String" required="false" description="Taille du champ de saisie" %>
<%@ attribute name="id" type="java.lang.String" required="true" description="Identifiant unique du champ" %>
<%@ attribute name="label" type="java.lang.String" required="false" description="Nom du champ de saisie" %>
<%@ attribute name="type" type="java.lang.String" required="false" description="Type du champ de saisie (tous types d'input OU textarea)" %>
<%@ attribute name="name" type="java.lang.String" required="false" description="Nom technique du champ de saisie" %>
<%@ attribute name="value" type="java.lang.String" required="false" description="Valeur prédéfinie du champ de saisie" %>

<c:set var="__formFieldInputId" value="${pageScope.id}" scope="request" />

<c:set var="formFieldSize" value="form-field--${not empty pageScope.size ? pageScope.size : 'md'}" />
<c:set var="formFieldClasses" value="form-field ${pageScope.formFieldSize}" />
<c:set var="formFieldName" value="${not empty pageScope.name ? pageScope.name : pageScope.id}" />
<c:set var="formFieldType" value="${not empty pageScope.type ? pageScope.type : 'text'}" />
<c:set var="formFieldValue">
    <c:if test="${not empty pageScope.value}">
        value="<c:out value="${pageScope.value}"/>"
    </c:if>
</c:set>

<c:set var="attributes">
    <c:forEach items="${dynattrs}" var="a">
        <c:choose>
            <c:when test="${a.key == 'class'}">
                <c:set value="${formFieldClasses} ${a.value}" var="formFieldClasses"/>
            </c:when>
            <c:otherwise>${a.key}="${a.value}" </c:otherwise>
        </c:choose>
    </c:forEach>
</c:set>

<c:set var="__formFieldInputStep" value="controlstart" scope="request" />
<jsp:doBody var="controlStart" />
<c:set var="__formFieldInputStep" value="help" scope="request" />
<jsp:doBody var="fieldHelp" />
<c:set var="__formFieldInputStep" value="controlend" scope="request" />
<jsp:doBody var="controlEnd" />

<div class="${pageScope.formFieldClasses}">
    <c:if test="${not empty pageScope.label}">
        <label for="${pageScope.id}" class="form-field__label">
            <c:out value="${pageScope.label}" />
        </label>
    </c:if>
    <div class="form-field__control">
        <c:if test="${not empty fn:trim(controlStart)}">
            <c:out value="${controlStart}" escapeXml="false" />
        </c:if>
        <c:choose>
            <c:when test="${type eq 'textarea'}">
                <textarea
                    class="form-field__input"
                    id="${pageScope.id}"
                    name="${pageScope.formFieldName}"
                    <c:if test="${not empty fn:trim(fieldHelp)}">aria-describedby="${pageScope.id}-help"</c:if>
                    ${pageScope.attributes}
                ><c:out value="${pageScope.value}" escapeXml="true" /></textarea>
            </c:when>
            <c:otherwise>
                <input
                    class="form-field__input"
                    type="${pageScope.formFieldType}"
                    id="${pageScope.id}"
                    name="${pageScope.formFieldName}"
                    <c:if test="${not empty fn:trim(fieldHelp)}">aria-describedby="${pageScope.id}-help"</c:if>
                    ${pageScope.formFieldValue}
                    ${pageScope.attributes}
                >
            </c:otherwise>
        </c:choose>
        <c:if test="${not empty fn:trim(controlEnd)}">
            <c:out value="${controlEnd}" escapeXml="false" />
        </c:if>
    </div>
    <c:if test="${not empty fieldHelp}">
        <c:out value="${fieldHelp}" escapeXml="false" />
    </c:if>
</div>