Form info to be printed out

mechro99 · May 18, 2004

Hi,
I am trying to create a form that collects information and arranges it on the following page in a way that can be printed and cut out like an id card.

The following url does what I am trying to do. Any tips would be great, as I am clueless as to how to code this.

http://medids.com/free-id.html

Thanks,
Dan

Vragabond · May 19, 2004

Sorry, but you'll have to be more specific with your questions. First of all, you cannot process form information with html alone, you will be best off with a server side language, such as asp, php, perl or coldfusion, though I guess it could be possible to extract the information via javascript from the address bar if you used get method in a form. So:

Step 1: Create an html form (I gather you know how to do that)
Step 2: Find out which server side scripting is available to you and post your question in their respective forums
Step 2a: If you have no server side scripting available, ask in the Javascript forum if it is possible to extract information from the address.
Step 3: Design an outlook for your card in pure html.
Step 4: Merge the design of your card with your code that extracts information.

Sorry, I can't answer more specifically on such a general question.

tviman · May 19, 2004

mechro99 - Yes, you can do want you want but as vragabond points out, you'll have to incorporate javascript to do it. If you're just filling out a form and then wanting to print it out from another page without storing the information anywhere then you won't need any server-side scripts.

Another possiblilty would be to design the form in such a manner where the fields are in the correct position for the ID tag and then use CSS to hide all but the text when you print. Search further in these pages using css media, media

rint, and css printing.

There's always a better way. The fun is trying to find it!

mechro99 · May 19, 2004

thanks tviman. I don't need to store the info, so hopefully I'll find some answers on the hidden field thing. I'm just really inexperienced with anything more than basic E-mail form programming. Thanks for the tips.

Vragabond · May 20, 2004

tviman really gave an excellent idea. To give you a better overview of how to do it, consult this. This is a normal form, but when you try and print it, it automagically transforms into a card. This is a very simple example, but it shows what you can do:

Code:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
  <head>
    <title>Card</title>
    <style type="text/css" media="print"> 
	body {
		font: normal 0.8em Verdana, Tahoma, Arial, sans-serif;
	}
	div {
		position: relative;
		border: 1px dashed black;
		width: 8cm;
		height: 3cm;
		padding: 0.1cm;
	}
	form {
		position: relative;
		width: 100%;
		height: 100%;
		border: 1px solid black;
		margin-bottom: 0;
		padding: 0.15cm;
	}
	input {
		font: normal 1em Verdana, Tahoma, Arial, sans-serif;
		border: none;
	}
	label {
		display: none;	
	}
	#occupation {
		position: absolute;
		right: 0.1cm;
		top: 0.1cm;
		font: bold 2em Verdana, Tahoma, Arial, sans-serif;
		text-align: right;
	}
	#lastname {
		font-size: 1.5em;
		font-weight: bold;
	}		
    </style>
  </head>

  <body>
    Create your own card:
    <div>
      <form>
        <label for="lastname">Last name:</label> <input type="text" name="lastname" id="lastname" /><br />
        <label for="firstname">First name:</label> <input type="text" name="firstname" id="firstname" /><br />
        <label for="datebirth">Date of birth:</label> <input type="text" name="datebirth" id="datebirth" /><br />
        <label for="occupation">Occupation:</label> <input type="text" name="occupation" id="occupation" /><br />	
      </form>
    </div>
  </body>
</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Form info to be printed out

mechro99

Programmer

Vragabond

Programmer

tviman

Programmer

mechro99

Programmer

Vragabond

Programmer

Similar threads

Part and Inventory Search

Sponsor