XForms 输入控件

XForms användargränssnitt använder XForms-kontroller.

XForms-kontroller

Användargränssnittselementen i XForms kallas XForms-kontroller。

De mest använda kontrolelementen är <input> och <submit>.

Varje kontrolelement har en ref-egenskap som pekar tillbaka till XForms-data-modellen.

Kontroller oberoende av enhet

För att förstå XForms-användargränssnittet är det viktigt att inte exakt beskriva hur XForms-kontroller kommer att visas.

Eftersom XForms är oberoende av plattform och enhet, lämnar XForms valet av hur dessa utrymmen ska visas till webbläsaren.

Därför kan XForms användas för alla typer av enheter, datorer, mobiltelefoner, handdatorer etc. XForms är också en perfekt lösning för att definiera användargränssnitt för funktionshindrade.

Input-kontroll

Input-kontroll är den mest använda XForms-kontrollen. Den används för att mata in en rad text:

<input ref="name/fname">
<label>Förnamn</label>
</input>

De flesta gånger kommer input-kontrollen att visas som en sådan inmatningszon:

input 控件的显示

Try it yourself

<label>-elementet

<label>-elementet är en obligatorisk underkomponent för alla XForms-inputkontroller.

Anledningen till detta är för att säkerställa att formuläret är tillgängligt för alla typer av enheter (eftersom etiketter kan hanteras på olika sätt.). För röstprogram kan etiketter läsas upp, och för vissa handhållna enheter måste etiketter följa med inmatningen skärm för skärm.

Secret-kontroll

Secret-kontroll är en specialvariant av input-utrymme, designad för att användas för att mata in lösenord eller annan dold information:

<secret ref="name/password">
<label>Lösenord:</label>
</secret>

De flesta gånger kommer secret-kontrollen att visas som en sådan inmatningszon:

Secret 控件的显示

Textarea-kontroll

Textarea-kontroll används för flera rader av inmatning:

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

Textarea-kontroll kan visas som en sådan inmatningszon:

Textarea 控件的显示

Skicka in-kontroll

Skicka in-kontroll används för att skicka in data:

<submit submission="form1">
<label>Skicka in</label>
</submit>

Trigger-kontroll

Trigger-kontroll används för att utlösa en åtgärd:

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

Output-kontroll:

Output utrymme används för att visa XForms-data:

<p>First Name: <output ref="name/fname" /></p>
<p>Last Name:  <output ref="name/lname" /></p>

上面的例子仅仅可输出 XForms XML 文档（XForms 实例）中的 <fname> and <lname> 节点的内容：

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

显示为这样：

First Name: David
Last Name: Smith

Try it yourself

Upload 控件

upload 控件是为向服务器上传文件而设计的：

<upload bind="name">
<label>File to upload:</label>
<filename bind="file"/>
<mediatype bind="media"/>
</upload>