Home > front end >  Pure white for help! About making web pages to fill out and print
Pure white for help! About making web pages to fill out and print

Time:10-03

First of all, thanks for the great god will point to come in, first thank you ~ ~
Is that we need to make a web page, here is a table, there are several content (text) is required, fill out need not uploaded to the server, do a print button on the page, direct print A4 paper is ok, fixed size, only one page, I'll do form, will not get input box, and print content, great god teach ~ ~ I am a little white, a little don't understand, please speak simple some
Thank you again for the

CodePudding user response:

 & lt; ! DOCTYPE html> 

<meta charset="utf-8">
<meta HTTP - equiv="X - UA - Compatible" content="IE=edge" & gt;
<meta name="viewport" content="width=device - width, initial - scale=1" & gt;

Hobbies & lt;/title> <br/></head> <br/><style> <br/>The a4 - endwise {<br/>Width: 1075 px; <br/>Height: 1567 px; <br/>Border: 1 px # 000 solid; <br/>overflow: hidden; <br/>Padding: 0; <br/>Word - break: break - all; <br/>The font size - adjust: 10; <br/>} <br/>The a4 - broadwise {<br/>Width: 1569 px; <br/>Height: 1073 px; <br/>Border: 1 px # 000 solid; <br/>overflow: hidden; <br/>Padding: 0; <br/>Word - break: break - all; <br/>} <br/>. Print {<br/>Position: fixed; <br/>Top: 1%; <br/>Right: 10%; <br/>} <br/></style> <br/><body> <br/><! - startprint - & gt; <br/><The form name="form1" id="form1" target="new" & gt; <br/><Div id="test" & gt; <br/><! -//the following input formal content - & gt; <br/><P align="right" & gt; <Strong> <The font the font-family="tahoma" size="22" & gt; Third grade & lt;/font> </strong> <Strong> <The font the font-family="tahoma" size="14" & gt; Class 2 & lt;/font> </strong> </p> <br/><p> & nbsp; </p> <br/><Div align="center" & gt; <br/><Table width="980" height="451" border="2" & gt; <br/><Tr> <br/><Td width="41" rowspan="4" & gt; <P align="center" & gt; <P align="center" & gt; A & lt;/p> <br/><P align="center" & gt; People & lt;/p> <br/><P align="center" & gt; Letter & lt;/p> <br/><P align="center" & gt; Interest & lt;/p> </td> <br/><Td height="180" colspan="3" & gt; <p> <Br> <br/>Understand the way: & lt; Input type="checkbox"/& gt; Network & lt; Input type="checkbox"/" & gt; Posters & lt; Input type="checkbox"/& gt; I heard that & lt; Br> <br/>Name: <br/><Input name="name" cols="40 rows"="1" type="text" of required id="xingming" style="width: 325 px; Height: 17 px;"> </textarea> <br/><Br> <br/>Class: <br/><Input name="class" cols="40 rows"="1" type="text" of required id="banji" style="width: 325 px; Height: 17 px;"> </textarea> <br/><Br> <br/><Br> <br/>Interests: & lt; Input type="checkbox"/& gt; Reading & lt; Input type="checkbox"/& gt; Ball (& lt; Input type="checkbox"/" & gt; Football & lt; Input type="checkbox"/& gt; Basketball) & lt; Input type="checkbox"/& gt; Games & lt;/p> </td> <br/></tr> <br/><Tr> <br/><Td height="32" colspan="3" & gt; & nbsp; </td> <br/></tr> <br/><Tr> <br/><Td width="451" height="35" & gt; & nbsp; </td> <br/><Td width="207" & gt; & nbsp; </td> <br/><Td width="251" & gt; & nbsp; </td> <br/></tr> <br/><Tr> <br/><Td height="190" & gt; & nbsp; </td> <br/><Td> & nbsp; </td> <br/><Td> & nbsp; </td> <br/></tr> <br/></table> <br/>The first & lt; Input type="submit" value="https://bbs.csdn.net/topics/check form a complete" & gt; <br/>The second & lt; Input type="submit" onclick="preview ();" Value="HTTP://https://bbs.csdn.net/topics/to print" href="javascript:;"/> <br/></div> <br/><p> & nbsp; </p> <br/></div> <br/></div> <br/></form> <br/><Div align="center" & gt; <br/><br/><! - endprint - & gt; <br/><script> <br/>/* * <br/>* [submit print] <br/>* @ return {} [type] [description] <br/>*/<br/>The function the preview () <br/>{<br/>BDHTML=window. The document. The body. The innerHTML;//get the current page's HTML code <br/>SPRNSTR="& lt; ! - startprint - & gt; ";//set the print start area <br/>Eprnstr="& lt; ! - endprint - & gt; ";//set the print over area <br/>PRNHTML=BDHTML. Substring (BDHTML. IndexOf (SPRNSTR) + 18);//code get HTML back from the start, <br/>PRNHTML=PRNHTML. Substring (0, PRNHTML indexOf (eprnstr));//from the forward end of the code HTML <br/>Window. The document. The body. The innerHTML=PRNHTML; <br/>Window. The print (); <br/>Window. The document. The body. The innerHTML=BDHTML; <br/>} <br/></script> <br/></div> <br/></body> <br/></html> </pre><p class="article - content rp"> CodePudding user response: </p>Code is like that, I don't understand from the Internet to find, idea is to make a page of A4 paper, users fill in the necessary information, and print it out, it is a text box input, a print, there is no input, and I want to print the content of the print only input, don't print the input box, and then there is the button below, you can print the check whether fill in complete it at the same time, incomplete will not print, please advise<p class="article - content rp"> CodePudding user response: </p>What a great god to help me ah <img SRC="https://img.codepudding.com/202010/127940030642573.gif" Alt=""/><p class="article - content rp"> CodePudding user response: </p>Obtain the innerHTML value does not contain the user in the content of the text box input, you rewrite the document. The body. The innerHTML user input the content of no, of course, <br/><br/>You don't have to rewrite the document. The body. The innerHTML, don't need to print part can use & lt; Style type="text/CSS" media="print" & gt; </style> Separate set of printed style <br/>If you don't print input box and the button below to <br/><style type="text/CSS" media="print" & gt; <br/>. The noprint {display: none; } <br/>Input [type="text"] {border - color: transparent; } <br/></style> <br/><br/><Div & gt; <br/>The first & lt; nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull </div> <div class="th_page th_page_color"></div> <div class="umCopyright"> <p>Page link:<a href="/frontend/48219.html" target="_blank" style="color:#999">https//www.codepudding.com/frontend/48219.html</a></p> </div> <div class="detail-arr"> <div class="detail-arr-left">Prev:<a href='/frontend/48218.html'>Ajax projects under the HTTPS can't send a post request, and HTTP is everything is ok.</a></div> <div class="detail-arr-right">Next:<a href='/frontend/48220.html'>Consult a mouseover effect</a></div> </div> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="hot-tags neitags"> <ul> <li><i class="iconfont icon-x-tags"></i> Tags:  </li> <a href='/e/tags/?tagname=HTML+%28CSS%29' target='_blank'>HTML (CSS)</a> </ul> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="xiangguan"> <ul class="msg msghead"> <li class="tbname">Related</li> </ul> <ul> </ul> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="flinks"> <ul> <li><i class="iconfont icon-x-tags"></i> Links:  </li> <li class="liflinks"><a target="_blank" href="/" title="CodePudding">CodePudding</a></li> </ul> </div> </div> </div> </div> <div class="footer"> <p><span style="font-size:16px;color:#666;font-weight: bold">About Us:</span>  <a href="https://www.codepudding.com/contact.html">Contact Us</a>      <a href="https://www.codepudding.com/service.html">Terms of Service</a>      <a href="https://www.codepudding.com/privacy.html"> Privacy Policy</a></p> <p class="foot_info">Copyright © 2010-2023,Powered By <a href="/" target="_blank">CodePudding</a> </p> </div> <script type="text/javascript" src="/skin/code/tianhu.js"></script> </body></html>