Controle de Entrada XForms

A interface do usuário do XForms utiliza controles XForms.

Controles XForms

Os elementos de interface do usuário no XForms são chamados de Controles XForms。

Os elementos de controle mais comuns são <input> e <submit>.

Cada elemento de controle tem um atributo ref que aponta para o modelo de dados do XForms.

Controles independentes do dispositivo

Entender a interface do usuário de XForms não descreve exatamente como os controles de XForms serão exibidos, isso é importante.

Como XForms é independente de plataforma e dispositivo, XForms deixa para o navegador a decisão de como exibir esses espaços.

Por isso, XForms pode ser usado em todos os tipos de dispositivos, computadores pessoais, telefones celulares, computadores portáteis, etc. XForms também é a solução perfeita para definir interfaces de usuário para pessoas com deficiência.

Controle de entrada

O controle de entrada é o controle mais usado de XForms. Ele é usado para entrada de uma linha de texto:

<input ref="name/fname">
<label>Primeiro Nome</label>
</input>

A maioria das vezes, o controle de entrada é exibido como um campo de entrada assim:

Exibição do controle Input

Experimente você mesmo

O elemento <label>

O elemento <label> é um subelemento obrigatório de todos os controles de entrada de XForms.

Essa razão é para garantir que o formulário seja acessível em todos os tipos de dispositivos (porque os rótulos podem ser tratados de diferentes maneiras.) Para software de voz, os rótulos podem ser lidos, e para alguns dispositivos móveis, os rótulos devem seguir página a página na entrada.

Controle de secretaria

O controle de secretaria é uma variante especial do espaço de entrada, projetado para entrada de senhas ou informações ocultas:

<secret ref="name/password">
<label>Senha:</label>
</secret>

A maioria das vezes, o controle de secretaria é exibido como um campo de entrada assim:

Exibição do controle Secret

Controle de textarea

O controle de textarea é usado para entradas de múltiplas linhas:

<textarea ref="message">
<label>Mensagem</label>
</textarea>

O controle de textarea pode ser exibido como um campo de entrada assim:

Exibição do controle Textarea

Controle de envio

O controle de envio é usado para enviar dados:

<submit submission="form1">
<label>Enviar</label>
</submit>

Controle de trigger

O controle de trigger é usado para acionar uma ação:

<trigger ref="calculate">
<label>Calcular!</label>
</trigger>

Controle de saída:

O espaço de saída é usado para exibir dados de XForms:

<p>Nome: <output ref="name/fname" /></p>
<p>Sobrenome:  <output ref="name/lname" /></p>

O exemplo acima apenas pode gerar o conteúdo dos nós <fname> e <lname> do documento XML (instância) XForms:

<instance>
  <person>
    <name>
      <fname>David</fname>
      <lname>Smith</lname>
    </name>
  </person>
</instance>

Será exibido assim:

Nome: David
Sobrenome: Smith

Experimente você mesmo

Controle Upload

O controle upload foi projetado para enviar arquivos para o servidor:

<upload bind="name">
<label>Arquivo para upload:</label>
<filename bind="file"/>
<mediatype bind="media"/>
</upload>