Printable View
We have users fill out information, (it seems they would rather type it out on the web page) through a series of input textboxes then they print the page bring into the office for approval. Is there a way to have the input text borderless or at least print with out the borders? Thanks in advance Steve
Loads of ways to do this, a DIV block with contentEditable attribute set, or turn off the border of the Text Input:
Try my example and let me know if it was helps!Code:<HTML>
<HEAD>
<TITLE>Borders test page</TITLE>
</HEAD>
<BODY>
<table width="50%">
<tr><td><i>Normal Text Input:</i></td></tr>
<tr><td><input type="text" style="width:100%" id=text1 name=text1 value="Type Here!"></input></td></tr>
<tr><td> </td></tr>
<tr><td><i>Normal Text Input (no border):</i></td></tr>
<tr><td><input type="text" style="width:100%;Border:none" id=text2 name=text2 value="Type Here!"></input></td></tr>
<tr><td> </td></tr>
<tr><td><i>Normal Text Input (flat border):</i></td></tr>
<tr><td><input type="text" style="width:100%;Border:solid 1px gray" id=text3 name=text3 value="Type Here!"></input></td></tr>
<tr><td> </td></tr>
<tr><td><i>Div Text Input (inset border & contentEditable):</i></td></tr>
<tr><td><div type="text" contenteditable style="width:100%;Border:inset 2px" id=div1 name=div1>Type Here!</div></input></td></tr>
<tr><td> </td></tr>
<tr><td><i>Div Text Input (no border & contentEditable):</i></td></tr>
<tr><td><div type="text" contenteditable style="width:100%;Border:none" id=div2 name=div2>Type Here!</div></input></td></tr>
<tr><td> </td></tr>
<tr><td><i>Div Text Input (flat border & contentEditable):</i></td></tr>
<tr><td><div type="text" contenteditable style="width:100%;Border:solid 1px gray" id=div3 name=div3>Type Here!</div></input></td></tr>
</table>
</BODY>
</HTML>
the second and fifth one will work as long as they know thats where to enter information. thanks again, Steve
Jerry, what browsers is your page supposed to work under?
Will work on browsers which support the STYLE attribute (CSS) and the contentEditable attribute, so it limits the browsers a bit!
Try IE 5.5 or IE 6.0
All should work for them!
I supose you are a Netscape fan then?
I didn't bother testing it in Netscape, but it doesn't work in Opera 6. I haven't checked the documentation, but my first guess is that your page strays from the standard to a degree accepted by IE.
And I keep saying that IE is the world's worst browser, but you know.... it isn't IE's fault. The IE user base thinks that IE sets the standards. I guess it is IE users, not IE that is to blame.
'Course, like I said, I'm not going to waste time looking up the documentation on this particular incident, so it may not be the fault of IE or any browser (Opera may be at fault or this may be specified at the discretion of the UA in the standards).
Travis, you might want to put the form tags in that code. I know netscape will not work without the form tags, not sure about opera. so that might be your problem. once again IE interprets what the user meant. :p
I know this has probably been answered already, but I would use an Embedded StyleSheet instead of an In-Line Stylesheet so you can reuse it with less typing:
If you're intrested in learning more CSS, check out my tutorial here: http://www.mindlessdrone.com/tutoria...r/cssone.shtmlCode:<html>
<head>
<style>
.form { border: none; }
</style>
</head>
<body>
<form>
First Name: <input type="text" name="fname" class="form">
</form>
</body>
</html>
Or if you even want to get more simplistic and make it apply to every Input tag, then use:
Code:<html>
<head>
<style>
input { border: none; }
</style>
</head>
<body>
<form>
First Name: <input type="text" name="fname">
</form>
</body>
</html>