Skip to content

Form Controls

Jump to bottom Edit New page
danfickle edited this page Nov 18, 2019 · 5 revisions

Example

<html>
<head>
<style>
@font-face {
    src: url(fonts/JustAnotherHand.ttf);
    font-family: 'hand';
    /* If you use an embedded font for form controls, make sure it is not subset. */
    -fs-font-subset: complete-font;
}
input[type="text"] {
    /* Make sure to use a built-in or non-subset font for form controls
        which display text. Also rembember that font-family is inherited so be
        very careful! */
    /* Most CSS properties are respected on form controls. */
    font-family: 'hand' !important;
    min-width: 12em;
    width: 90%;
    font-size: 40px;
    border: 1px solid red;
    border-radius: 5px;
}
</style>
</head>
<body>
<!-- You can have multiple forms in a document -->
<form action="http://localhost/form.php" method="POST">

    <input type="text" name="text-input" value="Hello World!"/>
    
    <input type="password" name="password-input"/>
    
    <textarea type="text" name="textarea-input">Goodbye Cruel World!</textarea>

    <!-- Radio control group -->
    <input type="radio" name="radio-input" value="0"/>
    <input type="radio" name="radio-input" value="1"/>
    <input type="radio" name="radio-input" value="2"/>

     <!-- Checkbox control group with all different checkbox styles -->
     <input type="checkbox" name="checker" value="1" checked="" style="-fs-checkbox-style: check;" />
     <input type="checkbox" name="checker" value="2" checked="" style="-fs-checkbox-style: square;" />
     <input type="checkbox" name="checker" value="3" checked="" style="-fs-checkbox-style: diamond;" />
     <input type="checkbox" name="checker" value="4" checked="" style="-fs-checkbox-style: star;" />
     <input type="checkbox" name="checker" value="5" checked="" style="-fs-checkbox-style: circle;" />
     <input type="checkbox" name="checker" value="6" checked="" style="-fs-checkbox-style: cross;" />
  
     <select name="select-input">
       <option value="1">Option One</option>
       <option value="2">Option Two</option>
       <option value="3">Option Three</option>
       <option value="4" selected="">Option Four</option>
     </select>
  
     <select name="multi-select-input" multiple="">
       <!-- Options without a value attribute use the option element text as value -->
       <option selected="">Option One</option>
       <option>Option Two</option>
       <option selected="">Option Three</option>
       <option>Option Four</option>
     </select>
     
     <!-- File input, not supported by most readers -->
     <input type="file" name="fle-input" value="Hello World!"/>

     <!-- Non-standard combo box control -->
     <openhtmltopdf-combo name="combo-input">
       <option>Option One</option>
       <option selected="">Option Two</option>
       <option>Option Three</option>
       <option>Option Four</option>
     </openhtmltopdf-combo>  
  
     <button type="submit">Submit Form</button>
  </form>
  
  </body>
  </html>

Additional notes

  • The name attribute is compulsory (except for submit buttons). It should consist only of [a-zA-Z0-9] and the '.' character in the case of nested fields.
  • Form controls must be contained within a <form> element.
  • If using custom css, form controls must have the display property set to either block or inline-block.
  • With the addition of a submit button, the form can be submitted to a URL as specified by the action attribute on the form. However, due to ambiguity in the character encoding used, this may not be much use unless you can guarantee clients only use one reader and one language in forms.
  • List of controls an optional attributes supported:
    • <input type="text" name="control-name"/>:
      • required (present or not)
      • readonly (present or not)
      • max-length (integer)
      • value (text)
      • title (text)
    • <input type="password" name="control-name"/> (all the same optional attributes as text controls)
    • <textarea></textarea> (all the same as text controls except the value attribute, the element content is used as default value)
    • <input type="file" name="control-name"/> (all the same as text control, however this control is not supported by the free Acrobat Reader and many other PDF viewers).
    • <input type="hidden" name="control-name"/>:
      • value (text)
    • <select name="control-name">:
      • required (present or not)
      • readonly (present or not)
      • title (text)
      • multiple (present or not)
    • <openhtmltopdf-combo name="control-name"> (all the same as select except the multiple attribute)
    • <option>:
      • value (text, if not provided the option element's text content will be used as value)
      • selected (present or not)
    • <input type="radio" name="radio-group-name" value="radio-value"/>:
      • checked (one radio button control in the group should have this attribute present)
    • <input type="checkbox" name="control-name" value="checkbox-value"/>:
      • required (present or not)
      • readonly (present or not)
      • checked (present or not)
      • title (text)
    • <input type="submit" value="control-text"/>
      • name (text, if present, the name and value pair are added as a hidden control)
      • value (text)
    • <button type="submit">Button text</button> (same as above)
    • <input type="reset" value="control-text"/> (resets form to default values)

Open issues

  • #252 Form controls not correctly positioned - Fixed in RC15.
  • The checkbox group functionality appears to be broken (with all checkboxes in the group toggling when one is pressed).
  • Form control placement is not transform aware, therefore form controls must not be contained in a transformed element.
  • Given the character encoding issue mentioned above, we need to investigate alternate ways of submitting the form such as submitting the entire document with saved form.
  • #151 NPE when no name attribute is provided on form control. Workaround: Make sure all form controls have a name attribute set. - Fixed in 1.0.1.
  • #183 NPE when no font is resolved at form creation. Workaround: Always use an em unit in CSS for the control size.

Thank you for using this project.

Add a custom sidebar
Clone this wiki locally