Member Avatar for ppetree

WARNING: I'm a complete CSS novice!

What I want to do is create a simple registration form that looks like a real paper form.

It has a white background.
The edit fields (i.e. name, address etc.) are edit boxes without a border but have a line that the user types on that is just like the one you would find on paper (maybe that line turns red to show it as the current field).

I saw one on a flash site about a year ago and can't remember the URL for the life of me but I always remembered it as being really cool.

Has anyone seen an example of anything like that? They can point me to or have some suggestions on how to make it work?

Thanks!

Pete

  • 2 Contributors
  • 9 Replies
  • 83 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by almostbob
Member Avatar for almostbob 
input[type=text] { background:white; border:0; border-bottom:1px solid black;}
input[type=text]:hover { border:0; border-bottom:1px solid red;}
input[type=text]:focus { border:0; border-bottom:1px solid red;}
input[type=text]:active { border:0; border-bottom:1px solid red;}

something like this in your <style> or external css file

what you want is doable in css

Edited by almostbob because: n/a
Member Avatar for ppetree 
input[type=text] { background:white; border:0; border-bottom:1px solid black;}
input[type=text]:hover { border:0; border-bottom:1px solid red;}
input[type=text]:focus { border:0; border-bottom:1px solid red;}
input[type=text]:active { border:0; border-bottom:1px solid red;}

I copied the above straight into a CSS called form.css and then did the following test page and it's not doing what I want. You can still see the outline of the edit boxes and not getting a red line at all.

Here's the form:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title>HalfFrogHalfPrince - Where I Call Home</title>
  <link rel="stylesheet" type="text/css" href="form.css" />
  </head>
  <body bgcolor="green">
  <font face='arial' color='white'>
  <center>
  <h1>Test Form</h1>
  <br>
  <br>
  <br>
  <br>
  <br>
  <div class='form'>
  <table bgcolor='white'>
  <form metod='post' action='register.php'>
  <tr>
  <td>Name:</td><td><input type='text' name='name' max='40'></td>
  </tr>
  <tr>
  <td>Address:</td><td><input type='text' name='name' max='40'></td>
  </tr>
  </form>
  </table>
  </div>
  <br>
  <br>
  <br>
  <br>
  <br>
  <font size='1'>
  <p>Copyright (C) <a href='store.html'>2010</a> by Phil Petree, All rights reserved worldwide.</p>
  </font></font>
  </body>
</html>

And you can see the results here!

Edited by ppetree because: n/a
Member Avatar for almostbob 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- @(#) $Id$ -->
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250"/>
<title>HalfFrogHalfPrince - Where I Call Home</title>
<style type='text/css'>
body {background:green; color:white; text-align:center;}
table {background:white; color:black; }
p.copy {font-size:75%; position:fixed; bottom:0; top:auto;}
input[type=text] { background:white; border:0; border-bottom:1px solid black;}
input[type=text]:hover { border:0; border-bottom:1px solid red;}
input[type=text]:focus { border:0; border-bottom:1px solid red;}
input[type=text]:active { border:0; border-bottom:1px solid red;}
</style></head>
<body>
<h1>Test Form</h1>
<br/><br/><br/><br/><br/>
<div class='form'>
<table bgcolor='white'>
<form method='post' action='register.php'>
<tr>
<td>Name:</td><td><input type='text' name='name' max='40'></td>
</tr>
<tr>
<td>Address:</td><td><input type='text' name='name' max='40'></td>
</tr>
</form>
</table>
</div>
<p class='copy'>Copyright &copy; <a href='store.html'>2010</a> by Phil Petree, All rights reserved worldwide.</p>
</body>
</html>

head slap moment, doh,

if your html page were xhtml,some css is not available in html4
sorry didnt specify,

form has method, typo

Edited by almostbob because: n/a
Member Avatar for ppetree

head slap moment, doh,

if your html page were xhtml,

sorry didnt specify,
some css is not available in html4

form has method, typo

Your form worked.... lost some formatting of the table and <h1> turned black but that appears to be fixable.

Do you mind explaining some of the changes you made? This part at the top of the code is new to me:
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- @(#) $Id$ -->

(Last time I did any html was probably 10 years ago).

And the comment inside the <style> is not supposed to be closed???

and why in the heck is everyone now escaping the <br /> but not any other >????

I'll send you a private email with another link so you'll know what I am REALLY trying to do... I think you'll find it very funny!

Edited by ppetree because: n/a
Member Avatar for almostbob

xhtml, is the next update after html4, there is html5 in the wings, but its been bumped over (the windows vista of html)

xhtml is slightly stricter in code standards
all tags must be lower case
all tags must be closed
<td></td> is fine
<img> <br> in not fine and must be <img /> <br /> any singelton tag
xhtml has the ability to handle multiple xml schema, can import xml versions of feeds, can do much
so when using xhtml you have to specify the xml schema in the <html> tag, thats as I understand it (or don't)
you may have noticed the styling of p.copy,
Just for fun I made the copyright notice remain in the same place always onscreen regardless of page scroll
&copy; is the html entity of the copyright sign, more circular than (C)
the styles are supposed to be commented, but there are very few old browsers still in use that dont understand <script> and <style> tags so it isnt as neccessary to comment out the data, but still good practice, 'nother headslap moment.
i dont know what <!-- @(#) $Id$ --> does, but stuff happens when I don't put it in, so I put it in
You can style the H elements and the table in the stylesheet, http://www.w3schools.com/css/ is a good tutorial, they wrote css standards
it has become so much easier to layout pages, without tables, every bit can be placed exactly by css

Edited by almostbob because: n/a
Member Avatar for ppetree

xhtml, is the next update after html4, there is html5 in the wings, but its been bumped over (the windows vista of html)

xhtml is slightly stricter in code standards
all tags must be lower case
all tags must be closed
<td></td> is fine
<img> <br> in not fine and must be <img /> <br /> any singelton tag
xhtml has the ability to handle multiple xml schema, can import xml versions of feeds, can do much
so when using xhtml you have to specify the xml schema in the <html> tag, thats as I understand it (or don't)
you may have noticed the styling of p.copy,
Just for fun I made the copyright notice remain in the same place always onscreen regardless of page scroll
&copy; is the html entity of the copyright sign, more circular than (C)
the styles are supposed to be commented, but there are very few old browsers still in use that dont understand <script> and <style> tags so it isnt as neccessary to comment out the data, but still good practice, 'nother headslap moment.
i dont know what <!-- @(#) $Id$ --> does, but stuff happens when I don't put it in, so I put it in
You can style the H elements and the table in the stylesheet, http://www.w3schools.com/css/ is a good tutorial, they wrote css standards
it has become so much easier to layout pages, without tables, every bit can be placed exactly by css

Actually, all of that makes sense...

I wouldnt mind using the CSS so much but I have yet to find a tool that lets me grab an element or group of elements and move them all where I want them so everything seems to be hit/publish/view/repeat and its incredibly laborious for a non .css person.

This project is giving me a bit of a chance to catch up on some of the advances I missed while running my little company.

Member Avatar for almostbob

you have at the moment, your table inside your <form>
position the form anywhere you want onscreen
there is no limit under css as to what elements accept positioning, and much more than 'align' and 'valign' to use

to avoid edit publish edit publish cycles get an ide(iintegrated development environment), they are a combination editor, localhost server and ftp program, many can do html xhtml php mysql and the supporting scripts and stylesheets
I use devphp (sourceforge is the source) on a thumbdrive as a portable ide, it works, edit view edit ok publish
wamp -Windows Apache Mysql Php, is another bundle

the attached image is a screenshot of the ide,

screenshot.jpg 123.37 KB
Edited by almostbob because: n/a
Member Avatar for ppetree

you have at the moment, your table inside your <form>
position the form anywhere you want onscreen
there is no limit under css as to what elements accept positioning, and much more than 'align' and 'valign' to use

to avoid edit publish edit publish cycles get an ide(iintegrated development environment), they are a combination editor, localhost server and ftp program, many can do html xhtml php mysql and the supporting scripts and stylesheets
I use devphp (sourceforge is the source) on a thumbdrive as a portable ide, it works, edit view edit ok publish
wamp -Windows Apache Mysql Php, is another bundle

I have WAMP installed on my desktop and do most of my work there but its still a pain... a visual css editor would be ideal but no one seems to be working in that area.

Did you get the private message? My sent folder doesnt show anything as having been sent so not sure it went through...

Member Avatar for almostbob

I have WAMP installed on my desktop and do most of my work there but its still a pain... a visual css editor would be ideal but no one seems to be working in that area.

Did you get the private message? My sent folder doesnt show anything as having been sent so not sure it went through...

I dunno, turned off notification, brb,
*edit*
yup I do, go read it

Edited by almostbob because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.