<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Styled Forms Sample</title>
<link href="../common.css" rel="stylesheet" type="text/css"/>
<style>
@page {
size: letter landscape;
}
table {
width: 100%;
border-collapse: collapse;
border: 0.5pt solid gray;
background-color: whitesmoke;
break-inside: avoid;
}
.thbottomborder th {
border-bottom-width: 1pt;
}
th, table td {
text-align: center;
border-width: 0pt 0.5pt;
border-style: solid;
border-color: gray;
width: 20%;
padding: 1mm 0mm;
}
.autoresized .resize input[type="text"],
.autoresized .resize textarea {
width: calc(100% - 2mm - 3pt - 3pt); /*calc(width - margin - border - padding)*/
-ro-height: auto;
margin: 1mm;
}
.autoresized .normalsize {
text-align: left;
vertical-align: top;
}
.autoresized .normalsize input[type="text"],
.autoresized .normalsize textarea {
margin: 1mm;
}
.autoresized td:first-child {
vertical-align: top;
padding-top: 3mm;
}
td.acroform input, td.acroform button, td.acroform select, td.acroform textarea {
-ro-pdf-format: pdf;
}
td.styled input, td.styled button, td.styled select, td.styled textarea {
text-align: left;
}
td.styled input {
color: steelblue;
background-color: ghostwhite;
border: 1pt solid steelblue;
font-family: sans-serif;
font-weight: bold;
padding: 3pt;
padding-top: 4pt;
}
td.styled input[type="button"] {
border-radius: 6pt;
background-image: -webkit-linear-gradient(-90deg, ghostwhite 50%, aliceblue 50%);
background-image: -moz-linear-gradient(-90deg, ghostwhite 50%, aliceblue 50%);
background-image: linear-gradient(180deg, ghostwhite 50%, aliceblue 50%);
}
td.styled input[type="checkbox"] {
border-radius: 3pt;
padding: 0;
}
td.styled input[type="file"] {
border-radius: 3pt;
}
td.styled input[type="password"] {
border-radius: 3pt;
}
td.styled input[type="radio"] {
border-radius: 50%;
padding: 0;
}
td.styled input[type="reset"] {
color: firebrick;
border-radius: 6pt;
background-image: -webkit-linear-gradient(-90deg, ghostwhite 50%, aliceblue 50%);
background-image: -moz-linear-gradient(-90deg, ghostwhite 50%, aliceblue 50%);
background-image: linear-gradient(180deg, ghostwhite 50%, aliceblue 50%);
}
td.styled input[type="submit"] {
color: darkgreen;
border-radius: 6pt;
background-image: -webkit-linear-gradient(-90deg, ghostwhite 50%, aliceblue 50%);
background-image: -moz-linear-gradient(-90deg, ghostwhite 50%, aliceblue 50%);
background-image: linear-gradient(180deg, ghostwhite 50%, aliceblue 50%);
}
td.styled input[type="text"] {
border-radius: 3pt;
color: black;
}
td.styled button[type="button"] {
background-image: -webkit-linear-gradient(-91deg, ghostwhite 30%, lightsteelblue 70%);
background-image: -moz-linear-gradient(-91deg, ghostwhite 30%, lightsteelblue 70%);
background-image: linear-gradient(181deg, ghostwhite 30%, lightsteelblue 70%);
color: black;
border: outset 1.1pt dimgray;
border-radius: 4pt;
font-size: 12pt;
font-weight: bold;
padding: 2pt;
}
td.styled button[type="reset"] {
background-color: crimson;
color: white;
border: 4pt outset crimson;
border-radius: 50%;
font-weight: bold;
padding: 4pt;
font-family: 'courier prime', monospace;
font-size: 14pt;
}
td.styled button[type="submit"] {
background-image: -webkit-linear-gradient(-90deg, darkseagreen 50%, forestgreen 50%);
background-image: -moz-linear-gradient(-90deg, darkseagreen 50%, forestgreen 50%);
background-image: linear-gradient(180deg, darkseagreen 50%, forestgreen 50%);
background-color: darkseagreen;
color: white;
border: 1pt solid forestgreen;
border-radius: 2pt;
padding: 2pt;
font-size: 14pt;
font-weight: bold;
font-family: serif;
}
tr[id="combobox"] td.styled select {
background-image: -webkit-linear-gradient(-91deg, ghostwhite 30%, lightsteelblue 70%);
background-image: -moz-linear-gradient(-91deg, ghostwhite 30%, lightsteelblue 70%);
background-image: linear-gradient(181deg, ghostwhite 30%, lightsteelblue 70%);
color: black;
border: inset 1.1pt dimgray;
border-radius: 4pt;
font-size: 12pt;
font-weight: bold;
padding: 2pt;
width: 2.25cm;
}
tr[id="singleselectionlist"] td.styled select {
border: 1pt solid steelblue;
background-color: ghostwhite;
color: steelblue;
font-weight: bold;
font-size: 11pt;
border-radius: 6pt;
padding: 1pt;
width: 2.25cm;
}
tr[id="multipleselectionlist"] td.styled select {
background-image: -webkit-linear-gradient(-91deg, darkseagreen, forestgreen);
background-image: -moz-linear-gradient(-91deg, darkseagreen, forestgreen);
background-image: linear-gradient(180deg, darkseagreen, forestgreen);
color: white;
border: 1pt solid forestgreen;
border-radius: 1pt;
padding: 4pt;
font-family: serif;
font-size: 12pt;
line-height: 1.1em;
width: 2.25cm;
}
td.styled textarea {
color: steelblue;
background-color: ghostwhite;
border: 1pt solid steelblue;
font-family: sans-serif;
padding: 3pt;
padding-top: 4pt;
font-size: 10pt;
border-radius: 4pt;
}
@-ro-preferences {
page-layout: 1 column;
initial-zoom: fit-page;
}
</style>
</head>
<body>
<h1>Demonstration of non-interactive PDF forms and AcroForms</h1>
<p>This document demonstrates the HTML forms and interactive PDF forms (sometimes refered to as AcroForms)
capabilities of PDFreactor. Each type of each form element will be displayed, at first as a non-interactive PDF form,
then as an AcroForm. Additionally, these categories are repeated as CSS styled forms. At last, the auto resizing feature
is demonstrated for input elements of the type "text" and textarea elements. For more information about resizing form
controls, please have a look at chapter "Automatic Resizing of Form Controls" in the PDFreactor manual.</p>
<form>
<h2>Input Element</h2>
<table>
<thead>
<tr class="thbottomborder">
<th>Form Element</th>
<th>Painted Form</th>
<th>AcroForm</th>
<th>Painted Form – styled</th>
<th>AcroForm – styled</th>
</tr>
</thead>
<tr>
<td>Button</td>
<td><input type="button" name="inputbutton1" value="Button"></input></td>
<td class="acroform"><input type="button" name="inputbutton2" value="Button"></input></td>
<td class="styled"><input type="button" name="inputbutton3" value="Button"></input></td>
<td class="acroform styled"><input type="button" name="inputbutton4"
value="Button"></input></td>
</tr>
<tr>
<td>Checkbox</td>
<td><input type="checkbox" name="inputcheckbox1" />unchecked<input
type="checkbox" name="inputcheckbox" checked="checked" />checked</td>
<td class="acroform"><input type="checkbox" name="inputcheckbox2" />unchecked<input
type="checkbox" name="inputcheckbox" checked="checked" />checked</td>
<td class="styled"><input type="checkbox" name="inputcheckbox3" />unchecked<input
type="checkbox" name="inputcheckbox" checked="checked" />checked</td>
<td class="acroform styled"><input type="checkbox" name="inputcheckbox4" />unchecked<input
type="checkbox" name="inputcheckbox" checked="checked" />checked</td>
</tr>
<tr>
<td>File</td>
<td><input type="file" name="inputfile1" size="16" value="Test.png" /></td>
<td class="acroform"><input type="file" name="inputfile2" size="16"
value="Test.png" /></td>
<td class="styled"><input type="file" name="inputfile3" size="16"
value="Test.png" /></td>
<td class="acroform styled"><input type="file" name="inputfile4" size="16"
value="Test.png" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="inputpassword1" size="16" value="Password" /></td>
<td class="acroform"><input type="password" name="inputpassword2" size="16"
value="Password" /></td>
<td class="styled"><input type="password" name="inputpassword3" size="16"
value="Password" /></td>
<td class="acroform styled"><input type="password" name="inputpassword4"
size="16" value="Password" /></td>
</tr>
<tr>
<td>Radio</td>
<td><input type="radio" name="inputradio1" />unchecked<input type="radio"
name="inputradio1" checked="checked" />checked</td>
<td class="acroform"><input type="radio" name="inputradio2" />unchecked<input
type="radio" name="inputradio2" checked="checked" />checked</td>
<td class="styled"><input type="radio" name="inputradio3" />unchecked<input
type="radio" name="inputradio3" checked="checked" />checked</td>
<td class="acroform styled"><input type="radio" name="inputradio4" />unchecked<input
type="radio" name="inputradio4" checked="checked" />checked</td>
</tr>
<tr>
<td>Reset</td>
<td><input type="reset" name="inputreset1" /></td>
<td class="acroform"><input type="reset" name="inputreset2" /></td>
<td class="styled"><input type="reset" name="inputreset3" /></td>
<td class="acroform styled"><input type="reset" name="inputreset4" /></td>
</tr>
<tr>
<td>Submit</td>
<td><input type="submit" name="inputsubmit1" /></td>
<td class="acroform"><input type="submit" name="inputsubmit2" /></td>
<td class="styled"><input type="submit" name="inputsubmit3" /></td>
<td class="acroform styled"><input type="submit" name="inputsubmit4" /></td>
</tr>
<tr>
<td>Text</td>
<td><input type="text" name="inputtext1" size="16"
value="An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls." /></td>
<td class="acroform"><input type="text" name="inputtext2" size="16"
value="An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls." /></td>
<td class="styled"><input type="text" name="inputtext3" size="16"
value="An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls." /></td>
<td class="acroform styled"><input type="text" name="inputtext4" size="16"
value="An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls." /></td>
</tr>
</table>
<h2>Button Element</h2>
<table>
<thead>
<tr class="thbottomborder">
<th>Form Element</th>
<th>Painted Form</th>
<th>AcroForm</th>
<th>Painted Form – styled</th>
<th>AcroForm – styled</th>
</tr>
</thead>
<tr>
<td>Button</td>
<td><button type="button" name="buttonbutton1">Button</button></td>
<td class="acroform"><button type="button" name="buttonbutton2">Button</button></td>
<td class="styled"><button type="button" name="buttonbutton3">Button</button></td>
<td class="acroform styled"><button type="button" name="buttonbutton4">Button</button></td>
</tr>
<tr>
<td>Reset</td>
<td><button type="reset" name="buttonreset1">Reset</button></td>
<td class="acroform"><button type="reset" name="buttonreset2">Reset</button></td>
<td class="styled"><button type="reset" name="buttonreset3">Reset</button></td>
<td class="acroform styled"><button type="reset" name="buttonreset4">Reset</button></td>
</tr>
<tr>
<td>Submit</td>
<td><button type="submit" name="buttonsubmit1">Submit</button></td>
<td class="acroform"><button type="submit" name="buttonsubmit2">Submit</button></td>
<td class="styled"><button type="submit" name="buttonsubmit3">Submit</button></td>
<td class="acroform styled"><button type="submit" name="buttonsubmit4">Submit</button></td>
</tr>
</table>
<h2>Select Element</h2>
<table>
<thead>
<tr class="thbottomborder">
<th>Form Element</th>
<th>Painted Form</th>
<th>AcroForm</th>
<th>Painted Form – styled</th>
<th>AcroForm – styled</th>
</tr>
</thead>
<tr id="combobox">
<td>Combo box</td>
<td><select name="selectcombobox1">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select></td>
<td class="acroform"><select name="selectcombobox2">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select></td>
<td class="styled"><select name="selectcombobox3">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select></td>
<td class="acroform styled"><select name="selectcombobox4">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select></td>
</tr>
<tr id="singleselectionlist">
<td>List single selection</td>
<td><select name="selectsinglelist1" size="3">
<option>Option 1</option>
<option selected="selected">Option 2</option>
<option>Option 3</option>
</select></td>
<td class="acroform"><select name="selectsinglelist2" size="3">
<option>Option 1</option>
<option selected="selected">Option 2</option>
<option>Option 3</option>
</select></td>
<td class="styled"><select name="selectsinglelist3" size="3">
<option>Option 1</option>
<option selected="selected">Option 2</option>
<option>Option 3</option>
</select></td>
<td class="acroform styled"><select name="selectsinglelist4" size="3">
<option>Option 1</option>
<option selected="selected">Option 2</option>
<option>Option 3</option>
</select></td>
</tr>
<tr id="multipleselectionlist">
<td>List multiple selection</td>
<td><select name="selectmultiplelist1" size="3" multiple="multiple">
<option>Option 1</option>
<option selected="selected">Option 2</option>
<option selected="selected">Option 3</option>
</select></td>
<td class="acroform"><select name="selectmultiplelist2" size="3"
multiple="multiple">
<option>Option 1</option>
<option selected="selected">Option 2</option>
<option selected="selected">Option 3</option>
</select></td>
<td class="styled"><select name="selectmultiplelist3" size="3"
multiple="multiple">
<option>Option 1</option>
<option selected="selected">Option 2</option>
<option selected="selected">Option 3</option>
</select></td>
<td class="acroform styled"><select name="selectmultiplelist4" size="3"
multiple="multiple">
<option>Option 1</option>
<option selected="selected">Option 2</option>
<option selected="selected">Option 3</option>
</select></td>
</tr>
</table>
<h2>Textarea Element</h2>
<table>
<thead>
<tr class="thbottomborder">
<th>Form Element</th>
<th>Painted Form</th>
<th>AcroForm</th>
<th>Painted Form – styled</th>
<th>AcroForm – styled</th>
</tr>
</thead>
<tr>
<td>Textarea</td>
<td><textarea rows="6" cols="11" name="mytextarea1">Extensible Markup Language (XML) is a simple, very flexible text format derived from SGML (ISO 8879). Originally designed to meet the challenges of large-scale electronic publishing, XML is also playing an increasingly important role in the exchange of a wide variety of data on the Web and elsewhere. The Extensible HyperText Markup Language (XHTML) is a family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML. XHTML Family document types are all XML-based, and ultimately are designed to work in conjunction with XML-based user agents.</textarea></td>
<td class="acroform"><textarea rows="6" cols="11" name="mytextarea2">Extensible Markup Language (XML) is a simple, very flexible text format derived from SGML (ISO 8879). Originally designed to meet the challenges of large-scale electronic publishing, XML is also playing an increasingly important role in the exchange of a wide variety of data on the Web and elsewhere. The Extensible HyperText Markup Language (XHTML) is a family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML. XHTML Family document types are all XML-based, and ultimately are designed to work in conjunction with XML-based user agents.</textarea></td>
<td class="styled"><textarea rows="6" cols="11" name="mytextarea3">Extensible Markup Language (XML) is a simple, very flexible text format derived from SGML (ISO 8879). Originally designed to meet the challenges of large-scale electronic publishing, XML is also playing an increasingly important role in the exchange of a wide variety of data on the Web and elsewhere. The Extensible HyperText Markup Language (XHTML) is a family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML. XHTML Family document types are all XML-based, and ultimately are designed to work in conjunction with XML-based user agents.</textarea></td>
<td class="acroform styled"><textarea rows="6" cols="11" name="mytextarea4">Extensible Markup Language (XML) is a simple, very flexible text format derived from SGML (ISO 8879). Originally designed to meet the challenges of large-scale electronic publishing, XML is also playing an increasingly important role in the exchange of a wide variety of data on the Web and elsewhere. The Extensible HyperText Markup Language (XHTML) is a family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML. XHTML Family document types are all XML-based, and ultimately are designed to work in conjunction with XML-based user agents.</textarea></td>
</tr>
</table>
<div class="autoresized">
<h2>Automatically Resized Input Fields and Textareas</h2>
<table>
<thead>
<tr class="thbottomborder">
<th>Form Element</th>
<th>Normal sized Form<br />as defined in input document
</th>
<th>Automatically resized Form</th>
</tr>
</thead>
<tr>
<td>Input Text Field</td>
<td class="normalsize"><input type="text" name="inputtextresized1"
size="16"
value="An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls." /></td>
<td class="resize"><input type="text" name="inputtextresized3" size="16"
value="An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls." /></td>
</tr>
<tr>
<td>Textarea</td>
<td class="normalsize"><textarea rows="6" cols="11"
name="mytextarearesized1">Extensible Markup Language (XML) is a simple, very flexible text format derived from SGML (ISO 8879). Originally designed to meet the challenges of large-scale electronic publishing, XML is also playing an increasingly important role in the exchange of a wide variety of data on the Web and elsewhere. The Extensible HyperText Markup Language (XHTML) is a family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML. XHTML Family document types are all XML-based, and ultimately are designed to work in conjunction with XML-based user agents.</textarea></td>
<td class="resize"><textarea rows="6" cols="11" name="mytextarearesized3">Extensible Markup Language (XML) is a simple, very flexible text format derived from SGML (ISO 8879). Originally designed to meet the challenges of large-scale electronic publishing, XML is also playing an increasingly important role in the exchange of a wide variety of data on the Web and elsewhere. The Extensible HyperText Markup Language (XHTML) is a family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML. XHTML Family document types are all XML-based, and ultimately are designed to work in conjunction with XML-based user agents.</textarea></td>
</tr>
</table>
</div>
</form>
</body>
</html>