0
8.5インチx 11インチの用紙に用紙を印刷する必要があります。フォームはすべてのフォームフィールドを空白にする必要があります。その後、私の顧客はフォームに署名するつもりです。私はその後、コンピュータ上のすべてのフォームフィールドに入力し、すべてのフォームフィールドをフォームに印刷する必要があります。リーガルサイズの用紙にhtml/cssフォームを印刷
どのように私はhtmlとcssでそれを行うことができます。
A
答えて
2
通常のページでフォームをデザインし、CSS3 Media Stylesを使用してページを「印刷」フォーマットにスタイルする必要があります。例えば。
@media print { /* Just for printer */
body { font-size: 10pt }
}
@media screen { /* Just for computer */
body { font-size: 13px }
}
は、印刷用のページスタイルを設定するための良いブログ記事です。
そこから、あなたは簡単に印刷アクションを起こすために、簡単なJavaScriptを追加することができます。
<a href="JavaScript:window.print();">Print this page</a>
または
<body onload="JavaScript:window.print();">
1
ghayes方法が働くだろう。
がしかし、CSS3のメディアスタイルを使用して9（More Info Here）
前に、IEでサポートされていません。しかし、すべてのブラウザがメディアタイプをサポートしていないEX：
<link href="/css/print.css" media="print" type="text/css" rel="stylesheet" />
私は印刷スタイルシートのためにメディアタイプに固執するだろう。
私は
/*
*********************************
* PRINT ONLY STYLES ***
*********************************
*/
/* TAGS */
html, body{
font-size:12pt !important; } /* !important Tags are to overide other CSS
when printed */
h1{ font-size:18pt !important; }
h2{ font-size:16pt !important; }
h3{ font-size:14pt !important; }
h4{ font-size:12pt !important; }
h5, h6{ font-size:10pt !important; }
* {color:#000 !important; }
/* HIDE HEAD, FOOTER, AND SIDEBAR ELEMENTS */
#top, .social, #pre_footer_back_ground, #right_sidebar, .full_shadow,
.slideshow, .light_button, .dark_button, .addthis_toolbox, img
{ display:none; }
/*SHOW PRINT ONLY AREAS*/
#logo-print, #copyright-print, #contact-print {display:block;}
/* DISPLAY ABSOLUTE LINKS */
a[href^="http://"]:after{content: " (" attr(href) ") ";}
a {text-decoration:none;}
/* FORMS FOR PRINT */
#form textarea, #form input, #form select{ border:1px solid #fff; color:#fff; }
#form textarea:focus, #form input:focus{ background-color:#fff; }
.form textarea, .form input, .form select{ border:1px solid #fff; color:#fff; }
.form textarea:focus, .form input:focus{ background-color:#fff; }
#form, .form{ clear:both; }
#form form, .form form{ padding-top:10px; }
#form textarea{ float:right; margin-bottom:10px; padding:6px 5px 6px 5px; width:450px; height:130px; overflow:hidden; }
.form textarea{ float:right; margin-bottom:10px; padding:6px 5px 6px 5px; width:450px; height:130px; overflow:hidden; }
#form input{ float:right; margin-bottom:10px; padding:6px 5px 6px 5px; width:450px; font-size:13px; line-height:18px; }
.form input{ float:right; margin-bottom:10px; padding:6px 5px 6px 5px; width:450px; font-size:13px; line-height:18px; }
#form input, #form textarea, .form input, .form textarea{
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}
/* ETC Add your print only styles */
を（私は自分のサイト上で使用するもの）を簡易印刷スタイルシートの例を与えるあなたは簡単にのみフォームを表示できるようにフォームをカスタマイズして、簡単にユーザーの印刷を行うことができますフォーム。次に、署名された紙を取り出し、情報を記入して、プリンタで再度実行します。
整列などのすべてを正しく行うには少しの労力がかかりますが、それは非常に難しくありません。
基本的に通常どおり（HTML）フォームを作成してサイトのスタイルを設定し（CSS）、次に印刷専用スタイルのCSSを変更します。
希望の方はこちら=>
うーん、ありがとうございました。 [メディアスタイルのサポート]（http://caniuse.com/#search=media） – ghayes