Sexy form, does anyone know how I can make this form in CSS

paddyhaig · July 8, 2010

I am looking to make a cool looking even sexy looking form (No, nude men or woman)

I made this using tables (See graphic), but I want it to look a little cooler, I figured if I used alternating slightly transparent table row colors or something like that and maybe made the table using css as opposed to html. I might be able to do some cooler stuff (Like fine 1px borders). I have been getting some great ideas from PhPfreaks so far for other aspects of my project. Any idea or suggestions greatly appreciated.

trq · July 8, 2010

I figured if I used alternating slightly transparent table row colors or something like that and maybe made the table using css as opposed to html

CSS isn't a substitute for html, they are used together.

Where exactly are you stuck?

paddyhaig · July 8, 2010

Well let me see. I am aware that css and html are used together, maybe I should rephrase, I am interested in css style tables. I am also interested in alternating slightly transparent table row colors. Here's my present code, how would I implement the above interests? All and any help greatly appreciated.

Here's my present style sheet.

/* The below ruleset applies to the Admin Index*/
/* This first container applies to the center slightly transparent box */
#container_3col
{
position:absolute;
width:686px;
height:310px;
z-index:1;
left:50%;
top:10px;
margin-left:-343px;
border:solid white 1px;
color: #FFF;
background-color:#C1AA24;
/* for IE */
  filter:alpha(opacity=85);
/* CSS3 standard */
  opacity:0.89;
}
#container_2col
{
position:absolute;
width:462px;
height:310px;
z-index:1;
left:50%;
top:10px;
margin-left:-231px;
border:solid white 1px;
color: #FFF;
background-color:#C1AA24;
/* for IE */
  filter:alpha(opacity=85);
/* CSS3 standard */
  opacity:0.89;
}
/* End of container */
/* This second container applies to the buttons used in the above box */
#container_3col a
{
float:left;
display:block;
height:50px;
width:200px;
z-index:2;
margin-left:20px;
margin-top:20px;
text-align:center;
line-height:50px;
border:solid white 1px;
font-weight: bolder;
color: #FFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
cursor: auto;
background-color:#F00;
/* for IE */
  filter:alpha(opacity=90);
/* CSS3 standard */
  opacity:0.9;
}
#container_2col a
{
float:left;
display:block;
height:50px;
width:200px;
z-index:2;
margin-left:20px;
margin-top:20px;
text-align:center;
line-height:50px;
border:solid white 1px;
font-weight: bolder;
color: #FFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
cursor: auto;
background-color:#F00;
/* for IE */
  filter:alpha(opacity=90);
/* CSS3 standard */
  opacity:0.9;
}
/* End of container */
/* This third container is the background for the Admin Index page */
body {
background-image: url(../graphics/backpackers.png);
background-repeat: no-repeat;
}
/* End of container */
/* End of css rulesets for the Admin Index page */

Here's the html (With just a little php)

<?php
// Start time variable.
$time= strftime("%Y-%m-%d   %H:%M");
// End time variable.
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Check in/out</title>
<link href="../../css/general.css" rel="stylesheet" type="text/css" />
</head>

<body> 
<div id="container_3col">

<form action="<?php echo $editFormAction; ?>" id="check_in" name="check_in" method="POST">
      
      <table width="655" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th> </th>
        <td> </td>
        <th> </th>
        <td> </td>
      </tr>
      <tr>
        <th width="136">ID type:</th>
        <td width="192"><input type="text" name="idtype" id="idtype" /></td>
        <th width="167">Key Deposit:</th>
        <td width="160"><input name="keydeposit" type="text" id="keydeposit" value="$5.00" /></td>
      </tr>
      <tr>
        <th> </th>
        <td> </td>
        <th> </th>
        <td> </td>
      </tr>
      <tr>
        <th>ID Number:</th>
        <td><input type="text" name="idnumber" id="idnumber" /></td>
        <th>Rent:</th>
        <td><input type="text" name="rent" id="rent" /></td>
      </tr>
      <tr>
        <th> </th>
        <td> </td>
        <th> </th>
        <td> </td>
      </tr>
      <tr>
        <th>First Name:</th>
        <td><input type="text" name="forename" id="forename" /></td>
        <th>Date and Time:</th>
        <td><input name="arrivaldate" type="text" id="arrivaldate" value="<?php echo $time ?>" readonly="readonly" /></td>
      </tr>
      <tr>
        <th> </th>
        <td> </td>
        <th> </th>
        <td> </td>
      </tr>
      <tr>
        <th>Second Name:</th>
        <td><input type="text" name="surname" id="surname" /></td>
        <th>Emergency Contact#</th>
        <td><input type="text" name="departdate" id="departdate" /></td>
      </tr>
      <tr>
        <th> </th>
        <td> </td>
        <th> </th>
        <td> </td>
      </tr>
      <tr>
        <th>Nationality:</th>
        <td><input type="text" name="nationality" id="nationality" /></td>
        <th>Room number:</th>
        <td><input type="text" name="roomnumber" id="roomnumber" /></td>
      </tr>
      <tr>
        <th> </th>
        <td> </td>
        <th> </th>
        <td> </td>
      </tr>
      <tr>
        <th>Email Address:</th>
        <td><input type="text" name="emailaddress" id="emailaddress" /></td>
        <th>Total:</th>
        <td><input type="text" name="total" id="total" /></td>
      </tr>
      <tr>
        <th> </th>
        <td> </td>
        <th> </th>
        <td> </td>
      </tr>
      <tr>
       
        <th><input type="hidden" name="id" id="id" /></th>
<td><input type="submit" name="button" id="button" value="Submit" /></td>

        <th>Notes:</th>
        <td><input type="text" name="notes" id="notes" /></td>
      </tr>
    </table>
      <input type="hidden" name="MM_insert" value="check_in" />
</form>
</div> 
</body>
</html>

trq · July 8, 2010

I wouldn't be using tables for such a layout, the same thing can be achieved using divs. In fact you have another topic that pretty much covers the same ground here.

paddyhaig · July 8, 2010

Who made you an administrator Thorpe? I don't have anything pertaining to alternating colored rows on a form posted. Your such a time waster Thorpe and your ruining my posts. Who do I complain to? Your not helping me a bit, your just being a bitch. Do you even know how to offer solutions? Have you ever actually helped anyone? Why not offer a solution instead of criticizing peoples posts. I am making a copy of this dialog and sending a copy with a complaint to the person registered behind phpfreaks. You are totally pissing me off. You had the audacity to call me a Princess! I came here for help not to mix it with some idiot on a control trip!

isedeasy · July 9, 2010

Since when was a form tabular data?

Read up on label tags as well

As for alternate row colours just write a bit of php or javascript to add a class to every other row, then style that class using CSS.

haku · July 9, 2010

Actually, a form is exactly tabular data. A table cross references two data types on an x/y axis (add a z-axis if you want a 3-dimensional table, but those don't exist in HTML).

So let's consider the data types here. One data type is 'data'. This could be for example 'name', 'age', 'address' etc. The other data type is 'values'. For a piece of data that is 'name', you have to values:

1) Title

2) Input

The first one is the label, and the second is the input. So you are cross-referencing a data type with the values for that data type. That is tabular data.

Now the easiest way to prove something is tabular data is to show how it can be stored in a table, with no empty values. So let's consider a database table - which is a pure table in that it is fully conceptual:

Table name: Form fields

Columns: Label, Input

And here are to possible rows, that fit the above columns:

1) Label: <label>Name</label>

Input: <input name="name">

2) Label: <label>Age</label>

Input: <input name="age">

As you can see, this data fits in a database table with no empty columns., which all goes to show that this form is in fact tabular data.

isedeasy · July 9, 2010

So would you use html tables to display a html form?

the actual html used to create a form is not designed to be placed in a html table.

paddyhaig · July 9, 2010

Thanks for your help everyone, I went elsewhere and got a little help. Had to get the job done and not spend all my time bickering. I do sincerely apologize if I upset anyone, I was pretty upset myself. If you want to spend time kicking this can around then you can. If not, I am again sincerely sorry for maybe over reacting. I just felt like I was being set upon by the wanna be authorities. I just felt like the was some kind of aloof snobbery and old school cronyism. Peace!

haku · July 9, 2010

So would you use html tables to display a html form?

Honestly, I don't. But not because it's wrong, rather it's because I can create forms that render faster and require less code using CSS and not using a table. But my point is that as a form is tabular data, using a table to display it is entirely fine if that is the method someone chooses to take.

the actual html used to create a form is not designed to be placed in a html table.

Sure it is.

<table>
  <tr>
    <td><label>label 1</label>
    <td><input type="text" name="input_1" /></td>
  </tr>
  <tr>
    <td><label>label 2</label>
    <td><input type="text" name="input_2" /></td>
  </tr>
</table>

Goes in just fine.

paddyhaig · July 9, 2010

Thank's haku. Here's what I ended up with after a little help from other groups and a little experimenting. Do you know by any chance how I can make the backdrop graphic somewhat transparent without actually editing the graphic itself hopefully by using css? Or if you know of any way of making this code a little more efficient I would love to know?

I don't believe this is the right place to ask, but I also want to know how I can adjust the php time ($time_date= strftime) with an offset of + or -.

<?php
// Start time variable.
$time_date= strftime("%Y/%m/%d %H:%M");
// End time variable.
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form</title>

<style type="text/css">
<!--
/*Beginning of page layout css*/
body {
background-repeat: no-repeat;
background-color: #FFE375;
}
#backdrop {
position:absolute;
width:970px;
height:985px;
z-index:0;
left:50%;
top: -1px;
margin-left:-485px;
background-image: url(../../graphics/graphicstar.png);
}
#container 
{
position:absolute;
width:686px;
height:310px;
z-index:1;
left:50%;
top:10px;
margin-left:-343px;
border:solid white 0px;
}
#row1 {
float:left;
width:169px;
height:20px;
z-index:1;
border:solid white 0px;
background-color:#C1AA24;
/* for IE */
  filter:alpha(opacity=70);
/* CSS3 standard */
  opacity:0.70;
}
#row2 {
float:left;
width:169px;
height:20px;
z-index:1;
border:solid white 0px;
background-color:#F00;
    text-align:center;
font-weight: bolder;
color: #FFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
/* for IE */
    filter:alpha(opacity=90);
/* CSS3 standard */
    opacity:0.9;
}
#row3 {
float:left;
width:169px;
height:20px;
z-index:1;
border:solid white 0px;
background-color:#C1AA24;
/* for IE */
    filter:alpha(opacity=70);
/* CSS3 standard */
    opacity:0.70;
}
#row4 {
float:left;
width:169px;
height:20px;
z-index:1;
border:solid white 0px;
background-color:#F00;
    text-align:center;
font-weight: bolder;
color: #FFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: ;
/* for IE */
    filter:alpha(opacity=90);
/* CSS3 standard */
    opacity:0.9;
}
/*End of page layout css*/
/*Beginning of form css*/
INPUT {
background-color: #99ccff;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-weight:600;
font-size: 11pt;
text-align:center;
}
.altButtonFormat {
background-color: #c0c0c0;
font-family: verdana;
border: #FFFF00 3px solid;
font-size: 12px;
font-weight:600;
color: #000000;
}
/*End of form css*/
-->
</style>
</head>

<body onLoad="document.getElementById('id_type').focus()">
<div id="backdrop"></div>
<form id="form1" name="form1" method="post" action="">

<div id="container">
  
  <div id="row1"></div>
  <div id="row1"></div>
  <div id="row1"></div>
  <div id="row1"></div>

  <div id="row2">ID type:</div>
  <div id="row2"><input name="id_type" type="text" id="id_type" size="15" value=""></div>
  <div id="row2">ID Number:</div>
  <div id="row2"><input name="id_number" type="text" size="15" value=""/></div>

  <div id="row3"></div>
  <div id="row3"></div>
  <div id="row3"></div>
  <div id="row3"></div>
  
  <div id="row4">First Name:</div>
  <div id="row4"><input name="forname" type="text" size="15" value=""/></div>
  <div id="row4">Second Name:</div>
  <div id="row4"><input name="surname" type="text" size="15" value=""/></div>

  <div id="row1"></div>
  <div id="row1"></div>
  <div id="row1"></div>
  <div id="row1"></div>
  
  <div id="row2">Nationality:</div>
  <div id="row2"><input name="nationality" type="text" size="15" value=""/></div>
  <div id="row2">Emergency #</div>
  <div id="row2"><input name="emergency_number" type="text" size="15" value=""/></div>

  <div id="row3"></div>
  <div id="row3"></div>
  <div id="row3"></div>
  <div id="row3"></div>

  <div id="row4">Email address:</div>
  <div id="row4"><input name="email_address" type="text" size="15" value=""/></div>
  <div id="row4">Date - Time</div>
  <div id="row4"><input name="time_date" type="text" size="15" value="<?php echo $time_date ?>" readonly="readonly"/></div>

  <div id="row1"></div>
  <div id="row1"></div>
  <div id="row1"></div>
  <div id="row1"></div>

  <div id="row2">Room number:</div>
  <div id="row2"><input name="room_number" type="text" size="15" value=""/></div>
  <div id="row2">Rent:</div>
  <div id="row2"><input name="rent" type="text" size="15" value=""/></div>

  <div id="row3"></div>
  <div id="row3"></div>
  <div id="row3"></div>
  <div id="row3"></div>

  <div id="row4">Deposit:</div>
  <div id="row4"><input name="deposit" type="text" size="15" value="<?php echo $deposit ?>" readonly="readonly"/></div>
  <div id="row4">Total:</div>
  <div id="row4"><input name="total" type="text" size="15" value=""/></div>

  <div id="row1"></div>
  <div id="row1"></div>
  <div id="row1"></div>
  <div id="row1"></div>

  <div id="row2">Notes:</div>
  <div id="row2"><input name="notes" type="text" size="15" value=""/></div>
  <div id="row2">Press when done >></div>
  <div id="row2"><input name="Submit" type="submit" class="altButtonFormat" value="----- Submit -----" /></div>
  
  <div id="row3"></div>
  <div id="row3"></div>
  <div id="row3"></div>
  <div id="row3"></div>

</div>
</form>
</body>
</html>

haku · July 10, 2010

You can set opacity in CSS (requires an IE fix though), but it's not very good, because any child elements will also have a lower opacity, and there is no way to give the child elements full opacity.

You should open a thread in the PHP help section for your $time question. I personally stopped venturing in there a couple of years ago though, I couldn't handle seeing people coding everything and anything in tables anymore

Sign In

Sexy form, does anyone know how I can make this form in CSS

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information