form.html

<form base="http://example.org/">

  <!-- Root Class Person -->
  <legend>Person</legend>
  <div typeof="foaf:Person" resource="Person-{pid}">
    <input name="pid" type="hidden" value="123-{foaf:name}" />

    <!-- literal property -->
    <label>Name</label>
    <input name="foaf:name" type="literal" datatype="xsd:string" required />

    <label>Gender</label>
    <input name="foaf:gender" type="literal" select select-options='{"female":"Female", "male":"Male", "other": "Other"}'  datatype="xsd:string" />

    <!-- literal property -->
    <label>E-Mail</label>
    <input name="foaf:mbox" type="literal" placeholder="name@example.org" additional />

    <!-- resource property -->
    <input name="bio:event" type="resource" value="bio:Birth"
      arguments='{"pid":"{pid}"}'
    />

    <!-- resource property -->
    <input name="bio:event" type="resource" value="bio:Event"
      arguments='{"pid":"{pid}"}' additional multiple
    />

    <!-- multiple external resources -->
    <label>Knows</label>
    <input name="foaf:knows" type="resource" select select-options='{"Person-1":"Example Person 1", "Person-2":"Example Person 2"}' external />

    <!-- literal property as textarea -->
    <label>Comment</label>
    <input name="rdfs:comment" type="literal" textarea />
  </div>

  <!-- Resource Class Birth -->
  <legend>Birth</legend>
  <div typeof="bio:Birth" resource="Birth-{pid}" id="BirthEvent">
    <p class="help">Adds the resource Birth to the Person.</p>

    <label>Place</label>
    <input name="rdfs:label" type="literal" datatype="xsd:string" placeholder="Birthplace" />

    <label>Date</label>
    <input name="dc:year" type="literal" datatype="xsd:date" placeholder="JJJJ-MM-TT" />
  </div>

  <!-- Resource Class Event -->
  <legend>Event</legend>
  <div typeof="bio:Event" resource="Event-{rdfs:label}-{pid}" id="EventEvent">
    <p class="help">Adds a biographical event to the Person. It may has a start and/or end date.</p>

    <label>Title</label>
    <input name="rdfs:label" type="literal" datatype="xsd:string" placeholder="Title" />

    <label>From</label>
    <input name="dc:date" type="literal" datatype="xsd:gYear" placeholder="JJJJ" />

    <label>To</label>
    <input name="dc:date" type="literal" datatype="xsd:gYear" placeholder="JJJJ" />
  </div>
</form>