<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Example</title>
<!-- start style -->
<style>
@page {size: 210mm 297mm; margin: 15mm;}
html{background-color: #808080;}
body{font: 12px "Arial";line-height:22px;padding:1em;}
h1{font-size: 2.5em ; line-height:1em}
h2{font-size: 1.5em}
h3{font-size: 1.25em;font-weight: bold}
h4{font-size: 1.25em;font-weight: normal}
h5{font-size: 1em}
h6{font-size: 0.75em}
html, body{margin: 0; padding: 0}
h1, h2, h3, h4, h5, h6{margin-left: 0px;}
address, blockquote, dl, form,fieldset, ol, table, p, pre, ul{
margin: 0;
}
li {margin-left: 6px;}
ul {list-style-type: square;}
hr {height: 1px;}
p {-webkit-hyphens: auto;-moz-hyphens: auto;hyphens: auto;}
textarea,input[type=text],input[type=date]{
border: 1px solid #dadada;
text-shadow: 1px 1px 1px #d0d0d0;
background-image: url(data:image/gif;base64,R0lGODlhDgAOAMIFANzu/+Lx/+Py//f7//v9/////////////ywAAAAADgAOAAADIii6rAEkyhlHKDhrTMT+RQdu4piVZuilKtuyqBmPM1h/XQIAOw==);
line-height:14px;
padding: 0px;
}
.page{
position:relative;
display:block;
height:297mm;
width:210mm;
margin: auto;
margin-top:5mm;
padding:5mm;
background-color: #ffffff;
}
.footer{
position: absolute;
bottom: 16px;
right: 16px;
width: 100%;
text-align: right;
}
@media print
{
.footer
{
display: none !important;
}
input,textarea,select{border:1px solid transparent !important;background-color: transparent !important}
}
</style>
<!-- end style -->
<!-- start SaveOfflineForm code -->
<script>
if (navigator.appVersion.indexOf("MSIE") != -1)
{
alert("If you use the Explorer browser will not be able to save the data. Use Chrome or Firefox!");
}
//Add this code inside the tag "<body>":
//<button type="button" onclick="SaveAs();">Save</button>
//save file------------------------------------------------->
var Download = {
click: function(node) {
var ev = document.createEvent("MouseEvents");
ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
return node.dispatchEvent(ev);
},
encode: function(data) {
return 'data:application/octet-stream;base64,' + btoa(unescape(encodeURIComponent(data)));
},
link: function(data, name) {
var a = document.createElement('a');
a.download = name || self.location.pathname.slice(self.location.pathname.lastIndexOf('/') + 1);
a.href = data || self.location.href;
return a;
},
save: function(data, name) {
this.click(
this.link(
this.encode(data),
name
)
);
}
};
function SaveAs() {
SaveData();
var str = document.getElementsByTagName("html")[0].innerHTML;
var title = document.getElementsByTagName("title")[0].innerHTML.replace(/ /g, "_");
var filename = title + "_" + new Date().toISOString().slice(0, 19).replace('T', '_').substr(0, 10) + ".html";
Download.save("<!DOCTYPE html>\n<html>\n" + str + "\n</html>", filename);
}
function SaveData() {
var elements = document.getElementsByTagName("input");
for (var i in elements)
{
try {
elements[i].setAttribute("value", elements[i].value);
if (elements[i].checked)
elements[i].setAttribute("checked", "checked");
else
elements[i].removeAttribute("checked");
} catch (e) {
}
}
elements = document.getElementsByTagName("textarea");
for (var i in elements)
{
try {
elements[i].innerHTML = elements[i].value;
} catch (e) {
}
}
elements = document.getElementsByTagName("select");
for (var i in elements)
{
if (elements[i].options) {
var selectedIndex = elements[i].selectedIndex;
for (var o in elements[i].options)
{
try {
elements[i].options[o].removeAttribute("selected");
} catch (e) {
}
}
elements[i].options[selectedIndex].setAttribute("selected", "selected");
}
}
}
</script>
<!-- end SaveOfflineForm code -->
</head>
<body>
<div class="page">
<h1>Sample form</h1>
<form method="post" target="_blank" action="#">
Name:<br />
<input type="text" size="40" name="name" value=""><br>
Surname:<br />
<input type="text" size="40" name="surname" value=""><br>
Male<input type="radio" value="2" name="sex">
Female<input type="radio" value="3" name="sex"><br /><br />
Email:<br />
<input type="text" size="20" name="email" value=""><br>
Street Address<br />
<input type="text" size="80" name="address" value=""><br>
Street Address 2<br />
<input type="text" size="80" name="address2" value=""><br>
City:<br />
<input type="text" size="10" name="city" value=""><br>
Zip Code:<br />
<input type="text" size="5" name="zipcode" value=""><br>
Telephone:<br />
<input type="text" size="10" name="telephone" value=""><br>
<br />
Text:<br>
<textarea cols="80" rows="10" name="description">Test</textarea><br>
<p>Choose an option:</p>
<select name="select_1">
<option value="1">option a</option>
<option value="2">option b</option>
<option value="3">option c</option>
<option value="4">option d</option>
</select><br />
<p class="footer">
<button type="button" onclick="SaveAs();">Save</button>
<button type="submit" >Submit</button>
<button type="button" onclick="window.print()">Print</button>
</p>
</form>
</div>
</body></html>
|
Download
