w3schools
  
HOME HTML CSS XML JAVASCRIPT ASP PHP SQL MORE...   References Examples Forum About
BEST WEB HOSTING JustHosts

XForms Model

« Previous Next Chapter »

The XForms model defines a template for the data to be collected from a form.


The XForms Framework

The purpose of an HTML form is to collect data. XForms has the same purpose.

With XForms, input data is described in two different parts:

  • The XForm model - defines what the form is, what it should do, what data it contains
  • The XForm user interface - defines the input fields and how they should be displayed

The XForms Model

The XForms model describes the data.

The XForms model defines a data model inside a model element:

<model>
  <instance>
    <person>
      <fname/>
      <lname/>
    </person>
  </instance>
  <submission id="form1" action="submit.asp" method="get"/>
</model>

In the example above, the XForms model uses an instance element to define the XML-template for the data to be collected, and a submission element to describe how to submit the data.

Note: The XForms model does not say anything about the visual part of the form (the user interface).


XForms Namespace

If you are missing the XForms namespace in these examples, or if you don't know what a namespace is, it will be introduced in the next chapter.


The instance Element

The instance element defines the data to be collected.

XForms is always collecting data for an XML document. The instance element in the XForms model defines the XML document.

In the example above the "data instance" (the XML document) the form is collecting data for looks like this:

<person>
  <fname/>
  <lname/>
</person>

After collecting the data, the XML document might look like this:

<person>
  <fname>John</fname>
  <lname>Smith</lname>
</person>


The submission Element

The submission element describes how to submit the data.

The submission element defines a form and how it should be submitted.

In the example above, the id="form1" identifies a form, the action="submit.asp" defines the URL to where the form should be submitted, and the method="get" attribute defines the method to use when submitting the form data.


The XForms User Interface

The XForms user interface defines the input fields and how they should be displayed.

The user interface elements are called controls (or input controls):

<input ref="fname"><label>First Name</label></input>
<input ref="lname"><label>Last Name</label></input>
<submit submission="form1"><label>Submit</label></submit>

In the example above the two <input> elements define two input fields. The ref="fname" and ref="lname" attributes point to the <fname> and <lname> elements in the XForms model.

The <submit> element has a submission="form1" attribute which refers to the <submission> element in the XForms model. A submit element is usually displayed as a button.

Notice the <label> elements in the example. With XForms every input control element has a required <label> element.


You'll Need A Container

XForms is not designed to work alone. There is no such thing as an XForms document.

XForms has to run inside another XML document. It could run inside XHTML 1.0, and it will run inside XHTML 2.0.


All Together Now

If we put it all together, the document will look like this:

<xforms>

<model>
  <instance>
    <person>
      <fname/>
      <lname/>
    </person>
  </instance>
  <submission id="form1" action="submit.asp" method="get"/>
</model>

<input ref="fname"><label>First Name</label></input>
<input ref="lname"><label>Last Name</label></input>
<submit submission="form1"><label>Submit</label></submit>

</xforms>

And the page will display pretty much like this:

First Name
Last Name


The XForms Processor

An XForms Processor built into the browser will be responsible for submitting the XForms data to a target.

The data can be submitted as XML and could look something like this:

<person>
  <fname>Hege</fname>
  <lname>Refsnes</lname>
</person>

Or it can be submitted as text, looking something like this:

fname=Hege;lname=Refsnes

« Previous Next Chapter »


Make your web applications look like a million bucks

FusionCharts   

Most web applications today use boring methods to present data to their viewers using grids or simple HTML tables. FusionCharts induces "life" into the web applications by converting monotonous data into lively charts, gauges & maps.

FusionCharts works with all technologies like ASP, ASP.NET, PHP, ColdFusion, Ruby on Rails, JSP, HTML pages etc. and connects to any database to render animated & interactive charts. It takes less than 15 minutes and no expertise whatsoever to build your first chart and just a glance of it to captivate your audience. This fact is endorsed by our 12,000 customers and 150,000 users which include a majority of the Fortune 500 companies. And yeah, your applications could look like a million bucks by spending just $69.

So go ahead, download your copy of FusionCharts and start "wow-ing" your customers now!



W3Schools Certification

W3Schools' Online Certification Program

The perfect solution for professionals who need to balance work, family, and career building.

More than 4000 certificates already issued!

The HTML Certificate documents your knowledge of HTML, XHTML, and CSS.

The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.

The XML Certificate documents your knowledge of XML, XML DOM and XSLT.

The ASP Certificate documents your knowledge of ASP, SQL, and ADO.

The PHP Certificate documents your knowledge of PHP and SQL (MySQL).

WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Top 10 Web Hosting
UK Reseller Hosting
Web Hosting
FREE Web Hosting
Top Web Hosting
Windows Hosting
WEB BUILDING
XML Editor – Free Trial!
FREE Flash Website
FREE Web Templates
FLIGHT TICKETS
Find the cheapest flight
to any destination now!
EDUCATION
US Web Design Schools
HTML Certification
JavaScript Certification
XML Certification
PHP Certification
ASP Certification
STATISTICS
Browser Statistics
Browser OS
Browser Display