|
-
Feb 21st, 2002, 10:23 AM
#1
Thread Starter
Member
Text box border
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
-
Feb 21st, 2002, 11:16 AM
#2
Fanatic Member
Loads of ways to do this, a DIV block with contentEditable attribute set, or turn off the border of the Text Input:
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>
Try my example and let me know if it was helps!
-
Feb 21st, 2002, 12:21 PM
#3
Thread Starter
Member
the second and fifth one will work as long as they know thats where to enter information. thanks again, Steve
Last edited by dmach8; Feb 21st, 2002 at 12:26 PM.
-
Feb 21st, 2002, 12:27 PM
#4
Frenzied Member
Jerry, what browsers is your page supposed to work under?
Travis, Kung Foo Journeyman
As always, RTFM.
WWW Standards: HTML 4.01, CSS Level 2, ECMA 262 Bindings to DOM Level 1, JavaScript 1.3 Guide and Reference
Perl: Learn Perl, Llama, Camel, Cookbook, Perl Monks, Perl Mongers, O'Reilly's Perl.com, ActiveState, CPAN, TPJ, and use Perl;
YBMS, but Mozilla doesn't.
-
Feb 21st, 2002, 12:35 PM
#5
Fanatic Member
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?
-
Feb 21st, 2002, 12:57 PM
#6
Frenzied Member
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, Kung Foo Journeyman
As always, RTFM.
WWW Standards: HTML 4.01, CSS Level 2, ECMA 262 Bindings to DOM Level 1, JavaScript 1.3 Guide and Reference
Perl: Learn Perl, Llama, Camel, Cookbook, Perl Monks, Perl Mongers, O'Reilly's Perl.com, ActiveState, CPAN, TPJ, and use Perl;
YBMS, but Mozilla doesn't.
-
Feb 21st, 2002, 02:50 PM
#7
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. 
-
Feb 21st, 2002, 09:56 PM
#8
Stuck in the 80s
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:
Code:
<html>
<head>
<style>
.form { border: none; }
</style>
</head>
<body>
<form>
First Name: <input type="text" name="fname" class="form">
</form>
</body>
</html>
If you're intrested in learning more CSS, check out my tutorial here: http://www.mindlessdrone.com/tutoria...r/cssone.shtml
-
Feb 21st, 2002, 09:58 PM
#9
Stuck in the 80s
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>
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|
Reply With Quote