Forms

Metanorma supports a subset of HTML form elements, encoded using Asciidoctor macros [added in https://github.com/metanorma/metanorma-standoc/releases/tag/v1.9.2]. In PDF and Word output, these elements are rendered with simple fallbacks.

A form is entered as an open block or example block with style parameter [form], and with optional parameters id, name, action, and [added in https://github.com/metanorma/metanorma-standoc/releases/tag/v1.10.1] class.
An input element is entered as the macro input:type:[attributes], where type is the input type attribute, and attributes are the remaining supported attributes (id name value disabled readonly checked maxlength minlength), as comma-delimited name=value expressions. The supported types of input are button checkbox date file password radio submit text.
A label element is entered as the macro label:for:[text], where for is the value of the label for attribute (i.e. the id attribute of the element it references), and text is the textual content of the label.
A select element is entered as the macro select:[attributes], where attributes are the supported select attributes (id name size disabled multiple value). The select element is followed by one or more option:[text,attributes], where 'text` is the display text for the option, and attributes are the supported option attributes (disabled value). For consistency with input, the select/@value is used to indicate a preselected value, instead of option/@selected.
A textarea element is entered as the macro textarea:[attributes], where attributes are the supported textarea attributes (id name rows cols value). For consistency with input, the textarea/@value is used to indicate a prepopulated value, instead of text content for the textarea.

The following is an illustration of a Metanorma encoding of a form, and the HTML that it generates:

[form,id=N0,name=N1,action="/action_page.php",class="checkboxes"]
--
label:fname[First name:] +
input:text[id=fname,name=fname] +
label:lname[Last name:] +
input:text[id=lname,name=lname] +
label:pwd[Password:] +
input:password[id=pwd,name=pwd] +
input:radio[id=male,name=gender,value=male]
label:male[Male] +
input:radio[id=female,name=gender,value=female]
label:female[Female] +
input:radio[id=other,name=gender,value=other]
label:other[Other] +
input:checkbox[id=vehicle1,name=vehicle1,value=Bike,checked=true]
label:vehicle1[I have a bike] +
input:checkbox[id=vehicle2,name=vehicle2,value=Car]
label:vehicle2[I have a car] +
input:checkbox[id=vehicle3,name=vehicle3,value=Boat]
label:vehicle3[I have a boat] +
input:date[id=birthday,name=birthday] +
label:myfile[Select a file:]
input:file[id=myfile,name=myfile] +
label:cars[Select a car:] +
select:[id=cars,name=cars,value=fiat,size=4,disabled=true,multiple=true]
option:[Volvo,value=volvo,disabled=true]
option:[Saab,value=saab]
option:[Fiat,value=fiat]
option:[Audi,value=audi]
textarea:[id=t1,name=message,rows=10,cols=30,value="The cat was playing in the garden."]
input:button[value="Click Me!"]
input:button[]
input:submit[value="Submit"]
--

<form id="_0e96c6c2-44a2-4657-9899-4649470fbf41" name="N1" action="/action_page.php" class="checkboxes">
<p id="_3ba204fc-eb2b-4369-951d-5b5e2bd19b6b"><label for="fname">First name:</label><br />
<input id="fname" name="fname" type="text" /><br />
<label for="lname">Last name:</label><br />
<input id="lname" name="lname" type="text" /><br />
<label for="pwd">Password:</label><br />
<input id="pwd" name="pwd" type="password" /><br />
<input id="male" name="gender" type="radio" value="male" />
<label for="male">Male</label><br />
<input id="female" name="gender" type="radio" value="female" />
<label for="female">Female</label><br />
<input id="other" name="gender" type="radio" value="other" />
<label for="other">Other</label><br />
<input id="vehicle1" name="vehicle1" type="checkbox" value="Bike" checked="true" />
<label for="vehicle1">I have a bike</label><br />
<input id="vehicle2" name="vehicle2" type="checkbox" value="Car" />
<label for="vehicle2">I have a car</label><br />
<input id="vehicle3" name="vehicle3" type="checkbox" value="Boat" />
<label for="vehicle3">I have a boat</label><br />
<input id="birthday" name="birthday" type="date" /><br />
<label for="myfile">Select a file:</label>
<input id="myfile" name="myfile" type="file" /><br />
<label for="cars">Select a car:</label><br />
<select id="cars" name="cars" size="4" disabled="true" multiple="true">
<option disabled="true" value="volvo"></option>
<option value="saab"></option>
<option selected="true" value="fiat">
</option><option value="audi"></option>
</select>
<textarea id="t1" name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
<input type="button" value="Click Me!" />
<input type="button" />
<input type="submit" value="Submit" /></p>
</form>