XForms ÊäÈë¿Ø¼þ

XForms µÄÓû§½çÃæÊ¹Óà XForms ¿Ø¼þ¡£

XForms ¿Ø¼þ

XForms ÖеÄÓû§½çÃæÔªËØ±»³ÆÎª XForms ¿Ø¼þ¡£

×î³£ÓõĿؼþÔªËØÊÇ <input> ºÍ <submit>¡£

ÿ¸ö¿Ø¼þÔªËØ¾ùÓÐ ref ÊôÐÔÖ¸»Ø XForms µÄÊý¾ÝÄ£ÐÍ¡£

¶ÀÁ¢ÓÚÉ豸µÄ¿Ø¼þ

Àí½â XForms Óû§½çÃæ²¢²»»áÈ·ÇеØÃèÊöÈçºÎÏÔʾ XForms ¿Ø¼þÊǺÜÖØÒª¡£

ÓÉÓÚ XForms ÊǶÀÁ¢ÓÚÆ½Ì¨ºÍÉ豸µÄ£¬XForms °ÑÈçºÎÏÔʾÕâЩ¿Õ¼äµÄȨÀûÁô¸øÁËä¯ÀÀÆ÷¡£

ÕýÒòÈç´Ë£¬XForms ¿É±»ÓÃÓÚËùÓÐÀàÐ͵ÄÉ豸£¬¸öÈ˵çÄÔ£¬Òƶ¯µç»°¡¢ÊÖ³Ö¼ÆËã»úµÈµÈ¡£XForms ͬʱҲÊÇΪ²ÐÕÏÈËÊ¿¶¨ÒåÓû§½çÃæµÄÍêÃÀ½â¾ö·½°¸¡£

input ¿Ø¼þ

input ¿Ø¼þÊÇ×î³£ÓÃµÄ XForms ¿Ø¼þ¡£ËüÓÃÓÚÊäÈëÒ»ÐÐÎı¾£º

<input ref="name/fname">
<label>First Name</label>
</input>

´ó¶àÊýʱºò£¬input ¿Ø¼þ»á±»ÏÔʾΪÀàËÆÕâÑùµÄÊäÈëÓò£º

input ¿Ø¼þµÄÏÔʾ

Try it yourself

<label> ÔªËØ

<label> ÔªËØÊÇËùÓÐ XForms ÊäÈë¿Ø¼þµÄÇ¿ÖÆ×ÓÔªËØ¡£

ÕâÒ»µãµÄÔ­ÒòÊÇΪÁËÈ·±£±íµ¥¿ÉÓÃÓÚËùÓÐÀàÐ͵ÄÉ豸£¨ÒòΪ±êÇ©¿Éͨ¹ý²»Í¬µÄ·½Ê½À´´¦Àí¡££©¶ÔÓÚÓïÒôÈí¼þ£¬±êÇ©¿É±»¶Á³ö£¬¶ø¶ÔÓÚijЩÊÖ³ÖÉ豸£¬±êÇ©±ØÐëÒ»ÆÁ½ÓÒ»ÆÁµÄ¸úËæÊäÈë¡£

Secret ¿Ø¼þ

Secret ¿Ø¼þÊÇ input ¿Õ¼äµÄÌØÊâ±äÌ壬±»Éè¼ÆÓÃÓÚÊäÈëÃÜÂë»òÆäËûÒþ²ØµÄÐÅÏ¢£º

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

´ó¶àÊýʱºò£¬secret ¿Ø¼þ»áÏÔʾΪÕâÑùÒ»¸öÊäÈëÓò£º

Secret ¿Ø¼þµÄÏÔʾ

Textarea ¿Ø¼þ

Textarea ¿Ø¼þÓÃÓÚ¶àÐеÄÊäÈ룺

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

textarea ¿Ø¼þ¿ÉÏÔʾΪÕâÑùµÄÊäÈëÓò£º

Textarea ¿Ø¼þµÄÏÔʾ

Submit ¿Ø¼þ

Submit ¿Ø¼þÓÃÓÚÌá½»Êý¾Ý£º

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

Trigger ¿Ø¼þ

trigger ¿Ø¼þÓÃÓÚ´¥·¢Ä³¸ö¶¯×÷£º

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

Output ¿Ø¼þ£º

output ¿Õ¼äÓÃÓÚÏÔʾ XForms Êý¾Ý£º

<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>
VUE