Loading...
<shacl-form> is an HTML5 web component that takes SHACL shapes as input and generates an HTML form, allowing to enter data that conform to the given shapes. See the README for documentation of all element attributes, functions and supported input/output RDF formats. Basic usage example:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/form-default.js" type="module"></script>
</head>
<body>
<!-- SHACL shapes can be defined on the attribute 'data-shapes'
or can be loaded by setting attribute 'data-shapes-url' -->
<shacl-form data-shapes="
@prefix sh: <http://www.w3.org/ns/shacl#> .
@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
@prefix ex: <http://example.org#> .
ex:ExampleShape
a sh:NodeShape, rdfs:Class ;
sh:property [
sh:name 'my value' ;
sh:path ex:exampleValue ;
sh:maxCount 3 ;
] .
"></shacl-form>
<script>
const form = document.querySelector("shacl-form")
form.addEventListener('change', event => {
// check if form validates according to the SHACL shapes
if (event.detail?.valid) {
// get data graph as RDF triples and
// log them to the browser console
const triples = form.serialize()
console.log('entered form data', triples)
// store the data somewhere, e.g. in a triple store
}
})
</script>
</body>
</html>
sh:datatypes are mapped to corresponding HTML input elements, including constraints like sh:minInclusive, sh:minExclusive, sh:maxInclusive, sh:maxExclusive and sh:pattern. Note that you can affect the display order of the input elements with sh:order or group elements using sh:group.
This example demonstrates the more advanced features of <shacl-form>. See the README for an explanation.
Same as "example", but with attribute data-view on the <shacl-form> element.