Just need a bit of feedback
Posted: Thu Mar 08, 2012 7:25 am
Hello Everyone:
After making my first registration page (with the help of Celauran), I decided to do some formatting. And now I've a couple questions about css/html. The page is working without error. I am mostly interested in feed-back. 20 years of building classical databases taught me the value of clean code and proper processes. Since this is my first real attempt at an online application, I want to be intentional about learning to write code efficiently and with "best practices" in mind. Following are my css and html code blocks:
formats.css
html block from my register.php file. Celauran helped with the php portion and it is functioning wonderfully.
Now for a few questions:
Pavilion
After making my first registration page (with the help of Celauran), I decided to do some formatting. And now I've a couple questions about css/html. The page is working without error. I am mostly interested in feed-back. 20 years of building classical databases taught me the value of clean code and proper processes. Since this is my first real attempt at an online application, I want to be intentional about learning to write code efficiently and with "best practices" in mind. Following are my css and html code blocks:
formats.css
Code: Select all
<style type="text/css">
span.error
{
color: #F00;
}
body
{
width:100%;
height:100%;
margin:0;
padding:0;
background-image: url(/schedule/images/background.jpg);
background-repeat:repeat;
}
div.header
{
margin: 0px 0px 0px 0px;
padding: 15px 0px 0px 0px;
text-align: center;
color: #754f31;
}
div.borderbx
{
margin: 0px 30px 0px 30px;
border-radius: 15px;
box-shadow:
inset 0 0 12px #754f31, /* Inset shadow */
0 0 12px #f7f5e4, /* Outset shadow */
inset -999px 0 0 transparent; /* The background color */
}
table
{
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border: 3px solid transparent;
border-color: #754f31;
color:black;
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
box-shadow:
inset 0 0 12px #754f31, /* Inset shadow */
0 0 12px #f7f5e4, /* Outset shadow */
inset -999px 0 0 #fff; /* The background color */
}
input
{
background-color:white;
width:200px
}
</style>Code: Select all
<!DOCTYPE html>
<html>
<body>
<div class="header"><head>
<a><IMG SRC="/schedule/images/banner.jpg" ALT="" WIDTH=98% HEIGHT=120"></a>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Contact Form</title>
</head></div>
<form action="" method="post">
<div class="borderbx">
<h1 style="text-align:left; padding-left:50px;"><i>Register Here .... </i></h1>
</div>
<table align="left" style = "width=25%; margin-left: 30px;">
<tr>
<td align="right">
<label for="fname">First Name</label><br />
<label for="lname">Last Name</label><br />
<label for="email">Email Address</label>
</td>
<td align="left">
<input tabindex="1" type="text" name="fname" /><br />
<input tabindex="2" type="text" name="lname" /><br />
<input tabindex="3" type="email" name="email" />
</td>
<td align="right">
<label for="password">Password</label><br />
<label for="password2">Verify Password</label>
</td>
<td align="left">
<input tabindex="4" type = "password" name="password" /><br />
<input tabindex="5" type = "password" name="password2" /><br />
<input style="font-weight:bold;" tabindex="6"type="submit" value="Submit" />
</td>
</tr>
<tr>
<td></td> <!-- This block was added simply as a spacer. Without this spacer, the error text in the next block throws the entire table out of alignment. This spacer allows error messages to align under the input boxes, rather than the labels. If they align under the labels they push the table border out to the left. -->
<td align="right"> <!-- This block of code/script does the error reporting. Nothing is vislbe until there is an error. -->
<?php if (isset($errors['fname'])): ?>
<span class="error"><?php echo $errors['fname']; ?><br /></span>
<?php endif; // See an explanation of this coding at devnetwork.net forums - topic "Field Validation Question": http://forums.devnetwork.net/viewtopic.php?p=672372#p672372?
<?php if (isset($errors['password'])): ?>
<span class="error"><?php echo $errors['password'];?><br /></span>
<?php endif; ?>
<?php if (isset($errors['lname'])): ?>
<span class="error"><?php echo $errors['lname']; ?><br /></span>
<?php endif; ?>
<?php if (isset($errors['password2'])): ?>
<span class="error"><?php echo $errors['password2'];?><br /></span>
<?php endif;?>
<?php if (isset($errors['email'])): ?>
<span class="error"><?php echo $errors['email'];?><br /></span>
<?php endif; ?>
</td></tr>
</table>
<div class="borderbx" style="margin-top: 25%; margin-left: 30px; margin-right: 50%">
<p style="text-align: center;"><?php echo $confirmation; ?></p></div>
</form>
</body>
</html>Now for a few questions:
- Just before my error messages I inserted a placeholder <td></td>. Comments as to my reasoning are inserted along with the placeholder. Is there a more efficient way to handle this problem?
Specifically... is there a way to put a row at the bottom of a table that spans the whole width of the table? The way I wrote this table code, the error messages were aligning with the first <td></td> block containing all input labels. Even if I only had one <td></td> block in the last row - it would not let content span the whole width of the table underneath all content <td></td> blocks in the preceding row. - Also, I used margins around form elements to determine placement on the page. But have concerns that this will cause "floating" depending on the users browser, and the results may not be what I intend. So... would it be better practice to insert form content into a transparent table? This way it would be possible to keep content contained within <td></td> blocks and reduce the "floating elements" issue.
- As far as I can tell, my css coding is on track. But this is the first style/format file I've coded and I just want to make sure things were done properly.
- Lastly... does anyone know of a good resource on making better looking input command buttons? The typical "submit" command button does the job. But having other options would be nice.
Pavilion