This is what the following code produces. Could someone please help me make the text line up with the textboxes on all screen sizes? Originally I wanted to set the height of each text to line it up with the textboxes, but then realized it wouldn't be lined up on different sized screens. Any help is appreciated.
<body>
<h1>Contact Us</h1>
<p>Please take a few moments to fill out our feedback form. It will help us to better address your needs. Thank you.</p>
<div id="mainLeft">
<table border="0" style="z-index: 1; position: inline; width: 440px; height: 334px; left: 0px; top: 0px;" width="644">
<tbody>
<tr>
<td height="40" scope="col" width="144"><strong><span class="style4"><span class="style5">Your Name:</span> </span></strong></td>
<td height="269" rowspan="10" scope="col" width="267">
<form action="send-form.php" id="form" method="post" name="form">
<p><input id="name" name="name" size="35" type="text" value="" /> </p>
<p><input id="email" maxlength="55" name="email" size="35" type="text" /></p>
<p><input id="address" maxlength="55" name="address" size="35" type="text" /></p>
<p><input id="city" maxlength="55" name="city" size="35" type="text" /></p>
<p><input id="state" maxlength="55" name="state" size="15" type="text" /></p>
<p><input id="zip" maxlength="55" name="zip" size="25" type="text" /></p>
<p><input id="telephone" maxlength="55" name="telephone" size="35" type="text" /></p>
<p><input id="fax" maxlength="55" name="fax" size="35" type="text" /></p>
<p><input id="feedback" maxlength="55" name="feedback" size="35" type="text" /></p>
<p><textarea cols="30" id="comments" name="comments" rows="7" wrap="virtual"></textarea></p>
<input name="Submit" onclick="MM_validateForm('email','','RisEmail','phone','','NisNum','comments','','R');return document.MM_returnValue" tabindex="1" type="submit" value="Submit" /> </form>
</td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">Email Address: </span><br /></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">Mailing Address: </span><br /></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">City: </span></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">State: </span></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">Zip Code: </span></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">Telephone: </span></strong></td>
</tr>
<tr>
<td height="0"scope="col"><strong><span class="style6">Fax: </span></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">How did you hear about us?: </span></strong></td>
</tr>
<td scope="col"><span class="style6"><strong>Explanation of your legal situation: </strong></span><strong><span class="style4"> </span></strong></td>
</tr>
<tr>
<td align="right"> </td>
<td align="right" height="35"> </td>
<td align="left" height="35"> </td>
</tr>
</tbody>
</table>
</div>
</body>
Don't use tables for that... use something as simple as:
<label for="name">Your name:</label><input type="text" name="name" /><br />
<label for="email">Email address:</label><input type="text" name="email" /><br />
etc...
You might not even need the line breaks (<br />s) if you style everything properly with CSS.
You don't need tables here, but you can take a look at example below how to do this:
<html>
<body>
<h1>Contact Us</h1>
<p>Please take a few moments to fill out our feedback form. It will help us to better address your needs. Thank you.</p>
<div id="mainLeft">
<form action="send-form.php" id="form" method="post" name="form">
<table border="0" style="z-index: 1; position: inline; width: 440px; height: 334px; left: 0px; top: 0px;" width="644">
<tbody>
<tr>
<td scope="col" width="144"><strong><span class="style4"><span class="style5">Your Name:</span> </span></strong></td>
<td><input id="name" name="name" size="35" type="text" value="" /></td>
</tr>
<tr>
<td scope="col"><strong><span class="style6">Email Address: </span><br /></strong></td>
<td><input id="email" maxlength="55" name="email" size="35" type="text" /></td>
</tr>
<tr>
<td scope="col"><strong><span class="style6">Mailing Address: </span><br /></strong></td>
<td><input id="address" maxlength="55" name="address" size="35" type="text" /></td>
</tr>
<tr>
<td scope="col"><strong><span class="style6">City: </span></strong></td>
<td><input id="city" maxlength="55" name="city" size="35" type="text" /></td>
</tr>
<tr>
<td scope="col"><strong><span class="style6">State: </span></strong></td>
<td><input id="state" maxlength="55" name="state" size="15" type="text" /></td>
</tr>
<tr>
<td scope="col"><strong><span class="style6">Zip Code: </span></strong></td>
<td><input id="zip" maxlength="55" name="zip" size="25" type="text" /></td>
</tr>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Proper way to do this is:
<label for="test">Test</label>
<input type="text" name="test"/><br/>
Take a search/read some CSS tutorial to properly format your html.
Hope this help! :)
Try using a label with the for attribute.
This example would actually place a label next to your text field.
<label for="myField">foo</label>
<input type="text" name="myField" id="myField" />
You don't need table here.
Everyone's going nuts seeing tables for a form, but forgot to answer your question: A css property called vertical-align can be played around with to get everything aligned. In my example, I've set it to 'top'. But you can use pixels (positive and negative values) to change the alignment as well. e.g vertical-align: 1px; or vertical-align:-1px;
Anyways, You shouldn't use tables for this (especially the way you're using them). You can achieve the same thing quite simply using divs/spans/etc:
HTML (snippet from your attached code)
<form action="send-form.php" id="form" method="post" name="form">
<div class="fields">
<label>Your name:</label>
<span><input id="name" name="name" size="35" type="text" value="" /></span>
</div>
<div class="fields">
<label>Email Address:</label>
<span><input id="email" maxlength="55" name="email" size="35" type="text" /></span>
</div>
<div class="fields">
<label>Comments:</label>
<span><textarea></textarea></span>
</div>
</form>
CSS to style the above
.fields {width: 500px;}
.fields > label { display:inline-block; width:150px; font-weight:bold; vertical-align:top; }
.fields > span { display: inline-block; }
Preview: http://jsfiddle.net/JESqY/5/
Related
I have read the other questions, but i cant seem to apply it to my problem.
In the validator it is giving me the problem 'The for attribute of the label element must refer to a form control'.
Can someone help me out? here is my code:
<h2>Contact Us</h2>
<form name="contactform" method="post"
action="http://dev.itas.ca/~christopher.allison/send_form_email.php">
<table>
<tr>
<td>
<label for="first_name">First Name *</label>
</td>
<td>
<input type="text" name="first_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td>
<label for="last_name">Last Name *</label>
</td>
<td>
<input type="text" name="last_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td>
<label for="email">Email Address *</label>
</td>
<td>
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td>
<label for="telephone">Telephone Number</label>
</td>
<td>
<input type="text" name="telephone" maxlength="30" size="30">
</td>
</tr>
<tr>
<td>
<label for="comments">Comments *</label>
</td>
<td >
<textarea name="comments" maxlength="1000" cols="25" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<div class="buttonHolder">
<input value="Submit" title="submit" name="lucky" type="submit" id="btn_i">
</div>
</td>
</tr>
</table>
</form>
</div><!--close form_settings-->
The issue you have is that the for attribute must reference the id attribute of the input instead of the name:
<label for="first_name">First Name *</label>
<input type="text" id="first_name" name="first_name" maxlength="50" size="30">
You can still use the name attribute for whatever you want but to link label with input you need to add an id.
Check out label documentation.
I have this form:
<form id="br" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]) ?>">
<table>
<tr>
<td>Report Title:*</td> <td><input name="title" type="text" required placeholder="The bug that you want to report" size="50" maxlength="35" /></td><td></td>
</tr><br />
<tr>
<td>Reporter:*</td> <td><input name="user" type="text" required class="username" placeholder="Your name" size="50" maxlength="35"></td><td><input type="checkbox" name="anonymous" id="cb" /><label for="cb">Report anonymously</label></td>
</tr>
<tr>
<td style="vertical-align: top;">Report summary:* </td> <td><textarea name="sum" cols="39" rows="15" required id="sum"></textarea></td></td><td></td>
</tr>
<tr><td style="font-size:12px;"><em>* - required field</em></td><td></td><td></td></tr>
</table>
<br />
<div class="submitform"></div>
<br />
</form>
But the required fields won't validate, even if I put the required attribute to them. It would immediately submit the form without validating anymore...
ok , i got it
<div class="submitform"></div>
It should be
<input type="submit" name="submit" />
I have a website that displays differently on different monitors.
Desktop:
Laptop:
HTML
<body>
<div id="Links">
<img src="Slideshow/About.png" width="140em" />
<br /><br />
<img src="Slideshow/Contact.fw.png" width="140em" />
<br /><br />
<img src="Slideshow/Services.fw.png" width="140em" />
</div>
<div id="mainText">
<h1>Contact</h1>
<p>If you want to contact me please call at <b>1.800.SUCCESS</b> or use the form below to sned me an email!</p>
</div>
<form name="contactform" method="post" action="send_form_email.php">
<table id="conTable">
<tr>
<td valign="top">
<label for="first_name">First Name *</label>
</td>
<td valign="top">
<input type="text" name="first_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top"">
<label for="last_name">Last Name *</label>
</td>
<td valign="top">
<input type="text" name="last_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Telephone Number</label>
</td>
<td valign="top">
<input type="text" name="telephone" maxlength="30" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="comments">Comments *</label>
</td>
<td valign="top">
<textarea name="comments" maxlength="1000" cols="25" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</body>
CSS
body
{
background-image:url(Pictures/background.jpg);
background-repeat:no-repeat;
background-size:100%;
}
#mainText
{
position: absolute;
width: 70%;
float: left;
left: 14em;
}
#conTable
{
left:14em;
top:8em;
position:absolute;
}
#Banner
{
position:absolute;
padding-left:40%;
}
#Links
{
position:absolute;
float:left;
width:50px;
}
Can anyone please tell me why things look different on my laptop then it does on my desktop and how to fix it. As you can see from the pictures everything on my laptop is shifted to the left.
Try wrapping a "Relative" #container around all your "absolute" divs. I've adjusted your code below:
<body>
<div id="container">
<div id="Links">
<img src="Slideshow/About.png" width="140em" />
<br /><br />
<img src="Slideshow/Contact.fw.png" width="140em" />
<br /><br />
<img src="Slideshow/Services.fw.png" width="140em" />
</div>
<div id="mainText">
<h1>Contact</h1>
<p>If you want to contact me please call at <b>1.800.SUCCESS</b> or use the form below to sned me an email!</p>
</div>
<form name="contactform" method="post" action="send_form_email.php">
<table id="conTable">
<tr>
<td valign="top">
<label for="first_name">First Name *</label>
</td>
<td valign="top">
<input type="text" name="first_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top"">
<label for="last_name">Last Name *</label>
</td>
<td valign="top">
<input type="text" name="last_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Telephone Number</label>
</td>
<td valign="top">
<input type="text" name="telephone" maxlength="30" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="comments">Comments *</label>
</td>
<td valign="top">
<textarea name="comments" maxlength="1000" cols="25" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</div>
</body>
CSS:
body
{
background-image:url(Pictures/background.jpg);
background-repeat:no-repeat;
background-size:100%;
}
#mainText
{
position: absolute;
width: 70%;
left: 14em;
}
#conTable
{
left:14em;
top:8em;
position:absolute;
}
#Banner
{
position:absolute;
padding-left:40%;
}
#Links
{
position:absolute;
top: 0;
left: 0;
width:50px;
}
#container {position: relative; width: 100%}
I am having an issue right now. When I load up my webpage, all of the boxes/words are aligned awkwardly, and I was wondering if I can get some help aligning the boxes all to be on the same line.
click here for a jsfiddle demo
<table bgcolor="#bbbbbb" width="100%" border="0" cellspacing="0" cellpadding="0" valign="center">
<tr>
<td width="10%" valign="top" align="center">
<form name="form1" method="post" action="checklogin.php">
<font size="5"><strong>Account Login</strong></font><br />
Username :
<input name="myusername" type="text" id="myusername"><br />
Password :
<input name="mypassword" type="password" id="mypassword"> <br />
<input style="width:75px; font-size:14px; height:25px;" type="submit" name="Submit" value="Login">
</form>
</td>
<td width="10%" valign="top" align="center">
<form id="form1" name="form1" method="post" action="registration_script.php">
<font size="5"><strong>Account Register</strong></font><br />
Username :
<input type="text" name="txtUser" id="txtUser" /> <br />
Repeat :
<input name="myusername" type="text" id="myusername"><br />
Password :
<input type="password" name="txtPassword" id="txtPassword" /> <br />
Repeat :
<input name="myusername" type="text" id="myusername"><br />
<input style="width:75px; font-size:14px; height:25px;" type="submit" name="btnRegister" id="btnRegister" value="Register" />
</td>
</tr>
</form>
</table>
try to check this one: Edited
hope this gives the idea(on my own very way:)).
<table bgcolor="#bbbbbb" width="100%" border="0" cellspacing="0" cellpadding="0" valign="center">
<tr>
<td width="10%" valign="top" align="center">
<form name="form1" method="post" action="checklogin.php">
<table>
<thead align="center">Account Login</thead>
<tr>
<td>Username :</td>
<td><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
<td>Password :</td>
<td><input name="mypassword" type="password" id="mypassword"></td>
</tr>
<tr>
<td></td>
<td colspan="1"><input style="width:75px; font-size:14px; height:25px;" type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</form>
</td>
<td width="10%" valign="top" align="center">
<form id="form1" name="form1" method="post" action="registration_script.php">
<table>
<thead align="center">Account Register</thead>
<tr>
<td>Username :</td>
<td> <input type="text" name="txtUser" id="txtUser" /></td>
</tr>
<tr>
<td>Repeat :</td>
<td><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
<td>Password :</td>
<td><input type="password" name="txtPassword" id="txtPassword" /></td>
</tr>
<tr>
<td>Repeat :</td>
<td><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
<td></td>
<td colspan="1"><input style="width:75px; font-size:14px; height:25px;" type="submit" name="btnRegister" id="btnRegister" value="Register" /></td>
</tr>
</table>
</form>
</td>
</tr>
In case you don't mind tableless:
<style>
.pseudo-table, form p {
display: table;
background-color: #bbbbbb;
}
.pseudo-cell, form p label {
display: table-cell;
vertical-align: top;
}
form p label {
width: 100px;
}
</style>
<div class='pseudo-table'>
<div class='pseudo-cell'>
<form name='form1' method='post' action='checklogin.php'>
<h2>Account Login</h2>
<p>
<label>Username</label>
: <input name='myusername' type='text' id='myusername'>
</p>
<p>
<label>Password</label>
: <input name='mypassword' type='password' id='mypassword'>
</p>
<button>Login</button>
</form>
</div>
<div class='pseudo-cell'>
<form name='form2' method='post' action='registration_script.php'>
<h2>Account Register</h2>
<p>
<label>Username</label>
: <input type='text' name='txtUser' id='txtUser'>
</p>
<p>
<label>Repeat</label>
: <input name='myusername' type='text' id='myusername'>
</label>
<p>
<label>Password</label>
: <input type='password' name='txtPassword' id='txtPassword'>
</p>
<p>
<label>Repeat</label>
: <input name='myusername' type='text' id='myusername'>
</p>
<button>Login</button>
</form>
</div>
</div>
you can define you own css to define the alignment
for example:
<style>
selector{
float:left;
}
</style>
if you try my code below you can see that the background color is light blue and it occupies the whole page of a site, I want to resize it how can you do that? I mean that the color will fit to the same size where the fill up boxes are,
do i need to add this code: width="60%"
can you please tell me where can I add this? Thanks
<html>
<div style="color:red">[+validationmessage+]</div>
<p style="color:#4C4C4C;font-weight:bold">« You can subscribe here: »</p>
<p>[+MailChimp.message+]</p>
<div style="background-color:#CCDFED">
<form method="post" action="[~[*id*]~]">
<br/>
<table>
<tr>
<td><label style="margin:0.5em"> Email: </label></td>
<td><input type="text" name="mc_EMAIL" size="60"
maxlength="60" style="margin:0.1em" value="" /></td>
</tr>
<tr>
<td><label style="margin:0.5em"> Name: </label></td>
<td><input type="text" name="mc_FNAME" size="60"
maxlength="60" style="margin:0.1em" value="" /></td>
</tr>
<tr>
<td><label style="margin:0.5em"> Last Name: </label></td>
<td><input type="text" name="mc_LNAME" size="60"
maxlength="60" style="margin:0.1em" value="" /></td>
</tr>
<tr>
<td><label style="margin:0.5em"> Website: </label></td>
<td><input type="text" name="mc_URL" size="60" maxlength="60"
style="margin:0.1em" value="" /></td>
</tr>
<tr>
<td><label style="margin:0.5em"> </label></td>
<td><input type="submit" name="subscribe" size="60"
maxlength="60" value="Register" /></td>
</tr>
</table>
</form>
<p><br/></p>
</div>
</html>
Try this:
<form method="post" action="[~[*id*]~]" style="display:inline-block;background-color:#CCDFEF">
Remove the <div style="background-color:#CCDFED"> before the form and </div> after it.