2011-08-10 6 views
0

8.5インチx 11インチの用紙に用紙を印刷する必要があります。フォームはすべてのフォームフィールドを空白にする必要があります。その後、私の顧客はフォームに署名するつもりです。私はその後、コンピュータ上のすべてのフォームフィールドに入力し、すべてのフォームフィールドをフォームに印刷する必要があります。リーガルサイズの用紙にhtml/cssフォームを印刷

どのように私はhtmlとcssでそれを行うことができます。

答えて

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を変更します。

希望の方はこちら=>

+0

うーん、ありがとうございました。 [メディアスタイルのサポート](http://caniuse.com/#search=media) – ghayes