|
CSS - Clean Looking Forms
I'm trying to structure a nice looking form using strictly CSS for its layout. I am used to constructing my forms using tables, so I have become accustomed to the labels' column being only as wide as the longest entry in it (if that makes sense).
To clarify, this is what I'm used to: Code: <table border="0" cellspacing="0" cellpadding="2">
<tr>
<td>Enter this information:</td>
<td><input type="text" name="info" size="20"/></td>
</tr>
<tr>
<td>More info:</td>
<td><input type="text" name="moreinfo" size="20"/></td>
</tr>
</table>
So in this case, the descriptions column would be as long as "Enter this information:". I have been able to accomplish a similar look by specifying the width of the label tag in CSS, but I can't seem to find a way to do this dynamically. Here's how I do it by specifying the width: Code: <style>
form.ttcform fieldset ol {
margin: 0;
padding: 0;
}
form.ttcform fieldset li {
list-style: none;
padding: 5px;
margin: 0;
}
fieldset label {
display: inline-block;
line-height: 1.8;
vertical-align: top;
width: 150px;
}
</style>
<fieldset>
<legend>This is my form</legend>
<ol>
<li>
<label>This is my information:</label>
<input type="text" name="info" size="20"/>
</li>
<li>
<label>More info:</label>
<input type="text" name="mroeinfo" size="20"/>
</li>
</ol>
</fieldset>
Any ideas to how I could get these columns to size by the column with the longest content? Similar TutorialsHi there I have a login page, now the thing is I see alot of sites use the small text boxes, does anyone know ho or where to set the size of a text box? Thanks Hi, I'm having a problem that occurs in both firefox and IE so its probably a problem in my code. Basically what's happening is one of the <input> has a borked margin and is spread out away from the rest of the <input>s. Here is the link http://jameshu.com/jdhpacific/?contact. Anyone know what's wrong? Thank you for your time. Hi guys, i really don't know if this can be accomplished with CSS but here it goes: I want a user that's filling a form on my web application to be able to click on a certain field(or a link near that field) and pop out another form, fill it, submit it and then continue to fill the original form. Maybe there's a bit of Javascript there or a combination of technologies, i really don't know so forgive me if i'm in the wrong forum, but i've seen similar stuff done with CSS, so if any of you has any idea on how i can accomplish this i'd appreciate it very much. I've attached a graphic to illustrate it better. Thanks! Hi, I am currently having problems aligning two form in a div. I have the following CSS code: Code: #right {
width:200px;
float:right;
position:relative;
margin-right:-200px;
margin-left:1px;
}
and Code: #right1 {
width:200px;
float:right;
position:relative;
margin-right:-200px;
margin-left:1px;
}
How would I structure these two DIV's so that the second DIV wil be inserted under the 1st DIV? Thank you I'm looking for recommendations for good CSS forms tutorials. I did do a brief Google search this afternoon, but it seemed like a veritable cornucopia of crap. So I was wondering if people here had some favorite resources that deal specifically with form elements in terms of layout / positioning, and style? Thanks... I know how to customise textfields and inputs, what I'm interested in customising is drop down boxes. This is the code i'd like to edit, but I have no clue where to start! (the HTML code can't be edited, its on a livejournal layout) Quote: <select id="SearchType" name="type"> <option value="user" selected="selected"> Username </option> <option value="email"> </option> <option value="region"> Region </option> <option value="int"> Interest </option> <option value="aolim"> AOL IM </option> <option value="icq"> ICQ Number </option> <option value="yahoo"> Yahoo! ID </option> <option value="msn"> MSN Username </option> <option value="jabber"> Jabber </option> </select> I'm trying hard to converting some forms to css from tables. They look good in IE but issues in FF. What am I doing wrong? In Firefox: In Internet Explorer: Here's the code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<link type="text/css" media="screen, projection" rel="stylesheet" href="./css/buffet_review_boxes.css">
<style type="text/css">
form {
font:100% verdana,arial,sans-serif;
margin: 0;
padding: 0;
min-width: 500px;
max-width: 600px;
width: 560px;
}
form fieldset {
border-color: #000;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 0;
}
form label {
display: block;
float: left;
width: 150px;
padding: 0;
margin: 5px 0 0;
text-align: right;
}
</style>
</head>
<body>
<h2>Login:</h2>
Please enter your login and password.
<form name="form1" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<label for="login">Login:</label>
<input type="text" name="login" size="20" value=""><br>
<label for="password">Password:</label>
<input type="password" name="password" size="8" value=""><br>
<label for="remember">Remember login?</label>
<input type="checkbox" name="remember" value="yes">
<br>
<input type="submit" name="Submit" value="Login">
</form>
<br /><br />Not registered yet? <a href="./register.php">Click here.</a>
<br /><br /><a href="./forgot_password.php">Forgot your password?</a>
<br /><br /><a href="login_local.php">Login with messages according user's language settings </a><br>(only for users with a profile)
</body>
</html>
As per the subject I'm looking for examples of attractive yet sensibly coded forms where the layout uses only CSS. I guess bad things would be where the layout is done using absolute positioning. I'm looking for something that is easy to reuse and straightforward to code a stylesheet for. Thanks, Geoff Hey guys, On the following page, I need some very simple help aligning these forms using CSS. I've tried a lot however I am not the best when it comes to CSS yet. Here is what the forms look like currently: http://www.blackoutplaylists.com/?page_id=150 And here is what I want the alignment to look like: http://fratmusic.com/playlist/create/ I want the text aligned to the left and I need the rest aligned to the center(ish). I also want to be able to add little text underneath on the bottom. Anyways, here is the code. Any help would be greatly appreciated. Code:
<!-- form start -->
<form method="post" action="http://www.blackoutplaylists.com/wp-content/plugins/tdo-mini-forms/tdomf-form-post.php" id='tdomf_form%%FORMID%%' name='tdomf_form%%FORMID%%' class='tdomf_form' >
%%FORMKEY%%
<div><input type='hidden' id='tdomf_form_id' name='tdomf_form_id' value='%%FORMID%%' /></div>
<div><input type='hidden' id='redirect' name='redirect' value='%%FORMURL%%' /></div>
<!-- widgets start -->
<!-- customfields-3 start -->
<fieldset>
<?php if(isset($post_args["customfields-tf-3-tf"])) {
$temp_text = $post_args["customfields-tf-3-tf"];
} else {
$temp_text = "";
} ?>
<label for="customfields-tf-3-tf" class="required">Who Created This Playlist?:
<br/>
</label>
<input type="text" title="Who Created This Playlist?" name="customfields-tf-3-tf" id="customfields-tf-3-tf" size="30" value="<?php echo htmlentities($temp_text,ENT_QUOTES,get_bloginfo('charset')); ?>"/>
</fieldset>
<!-- customfields-3 end -->
<!-- customfields-4 start -->
<fieldset>
<?php if(isset($post_args["customfields-tf-4-tf"])) {
$temp_text = $post_args["customfields-tf-4-tf"];
} else {
$temp_text = "";
} ?>
<label for="customfields-tf-4-tf" class="required">School/Fraternity:
<br/>
</label>
<input type="text" title="School/Fraternity" name="customfields-tf-4-tf" id="customfields-tf-4-tf" size="30" value="<?php echo htmlentities($temp_text,ENT_QUOTES,get_bloginfo('charset')); ?>"/>
</fieldset>
<!-- customfields-4 end -->
<!-- content start -->
<fieldset>
<?php if(isset($post_args["content-title-tf"])) {
$temp_text = $post_args["content-title-tf"];
} else {
$temp_text = "";
} ?>
<label for="content-title-tf" class="required">Playlist Name:
<br/>
</label>
<input type="text" title="Playlist Name" name="content-title-tf" id="content-title-tf" size="30" value="<?php echo htmlentities($temp_text,ENT_QUOTES,get_bloginfo('charset')); ?>"/>
<br/><br/>
<label for="content-text-ta" class="required">Playlist Code:
</label>
<br/>
<textarea title="Playlist Code" rows="10" cols="60" name="content-text-ta" id="content-text-ta" ><?php if(isset($post_args["content-text-ta"])) {
echo $post_args["content-text-ta"];
} else { ?><?php } ?></textarea>
</fieldset>
<!-- content end -->
<!-- excerpt start -->
<fieldset>
<label for="excerpt-ta" class="required">Description:
</label>
<br/>
<textarea title="Description" rows="5" cols="40" name="excerpt-ta" id="excerpt-ta" ><?php if(isset($post_args["excerpt-ta"])) {
echo $post_args["excerpt-ta"];
} else { ?><?php } ?></textarea>
</fieldset>
<!-- excerpt end -->
<!-- categories start -->
<fieldset>
<?php $defcat = 1; if(isset($post_args['categories'])) { $defcat = $post_args['categories']; } ?>
Select a category:
<select name='categories' class='tdomf_categories' size='1' >
<option value="1"<?php if( (is_array($defcat) && in_array(1, $defcat))
|| ( 1 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Uncategorized</option>
<option value="3"<?php if( (is_array($defcat) && in_array(3, $defcat))
|| ( 3 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Pop</option>
<option value="4"<?php if( (is_array($defcat) && in_array(4, $defcat))
|| ( 4 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Dance</option>
<option value="5"<?php if( (is_array($defcat) && in_array(5, $defcat))
|| ( 5 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Rap/Hip-Hop</option>
<option value="6"<?php if( (is_array($defcat) && in_array(6, $defcat))
|| ( 6 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Study</option>
<option value="7"<?php if( (is_array($defcat) && in_array(7, $defcat))
|| ( 7 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Alternative</option>
<option value="8"<?php if( (is_array($defcat) && in_array(8, $defcat))
|| ( 8 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Reggae</option>
<option value="9"<?php if( (is_array($defcat) && in_array(9, $defcat))
|| ( 9 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Ska</option>
<option value="10"<?php if( (is_array($defcat) && in_array(10, $defcat))
|| ( 10 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Acoustic</option>
<option value="11"<?php if( (is_array($defcat) && in_array(11, $defcat))
|| ( 11 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Country</option>
</select>
</fieldset>
<!-- categories end -->
<!-- i-agree start -->
<fieldset>
<input type="checkbox" name="iagree" id="iagree" <?php if($iagree) { echo 'checked'; } ?> />
<label for="iagree" class="required" > I agree with the <a href='http://www.blackoutplaylists.com/?page_id=84'>posting policy</a>. </label>
</fieldset>
<!-- i-agree end -->
<!-- widgets end -->
<!-- form buttons start -->
<table class='tdomf_buttons'><tr>
<td><input type="submit" value="Send To Blackoutplaylists" name="tdomf_form%%FORMID%%_send" id="tdomf_form%%FORMID%%_send"/></td>
</tr></table>
<!-- form buttons end -->
</form>
<!-- form end -->
<!-- Form 3 end -->
not really sure what the problem is here so sorry if the title of the thread doesnt reflect the problem to well. So ive been trying to fix this for 3 days now and ive read tut after tut on tableless forms using labels and inputs floated left and i cant get it working. As always its IE thats causing the problem, ive printed the display of the 4 main browsers and usually if i have a css problem in IE its also in Opera, but this time its only IE. http://img682.imageshack.us/img682/4570/browserviews.jpg As you can see the two problems here a 1. the gender select is completely screwy 2. the second fieldset doesnt display below the first the 2nd im not overly concerned about, if i can fix it great, if not then i'll deal with it, it drops down to below the first fieldset if i shrink my browser window or increase the fieldset width so heres the code: HTML Code: <span>Fields marked with <span class="red">*</span> are not optional, all others are</span> <form method="post" action="register.php"> <fieldset> <legend>Login Credentials</legend> <label>Username<span class="red">*</span>:</label><input type="text" maxlength="30" name="username" style="width: 200px;" /><img src="images/t.gif" alt="unameinfo" id="unametip" class="info" title="Must be at least 3 characters long." /> <label>Password<span class="red">*</span>:</label><input type="password" name="pass" style="width: 150px;" /><img src="images/t.gif" alt="passwordinfo" id="pwtip" class="info" title="<p class='head b'>Must be at least 8 characters long.</p>While we do not enforce any password policies we recommend you always use a random password containing both upper and lowercase letters, at least 1 number and 1 special character." /> <label>Password Again<span class="red">*</span>:</label><input type="password" name="passagain" style="width: 150px;" /> </fieldset> <fieldset> <legend>Personal Details</legend> <label>Email<span class="red">*</span>:</label><input type="text" name="email" style="width: 200px;" /><img src="images/t.gif" alt="emaildisclaimer" id="emailtip" class="info" title="We send any confirmation requests as required to your email. Article subscriptions also require a valid email address." /> <label>First Name:</label><input type="text" name="fname" style="width: 150px;" /> <label>Surname:</label><input type="text" name="sname" style="width: 150px;" /> <label>Gender:</label><img src="images/t.gif" alt="male" class="genderm" /><input type="radio" name="gender" value="m" /> <img src="images/t.gif" alt="female" class="genderf" /><input type="radio" name="gender" value="f" /> </fieldset> </form> CSS Code:
/*** ClearFix ***/
clearfix:after { clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden; }
.clearfix { display: inline-block; zoom: 1; }
.clear {clear:both;}
/*.*/
/*** Tableless Forms ***/
form fieldset {
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 1px #dddddd solid;
padding: 10px;
width: 550px;
margin-top: 10px;
}
form fieldset legend {
border: 1px #1a6f93 solid;
color: black;
font-size: 13px;
padding-right: 5px;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 2px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
form label {
width: 140px;
padding-left: 20px;
margin: 5px;
float: left;
text-align: right;
clear: left;
display: block;
}
form img { float: left; margin: 5px 0 0 5px;}
input, textarea {
margin: 5px;
padding: 0px;
float: left;
}
/*** css colors **/
.red { color: #FF0000; }
/*** css classes for html styling tags ***/
.b { font-weight: bold; }
/*** tooltip ***/
div.ttwrap {
background-color: #FFFFFF;
border: 2px solid #009999;
z-index: 10;
position: absolute;
width: 300px;
height: auto;
padding: 5px;
/*** not css standard but it will do until css3 is supported by all major browsers ***/
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}
div.ttwrap > p.head {
margin: 0 0 5px 0;
}
/*** CSS icons ***/
img.genderm, img.genderf, img.info { background-image: url("images/icons.png"); background-repeat: no-repeat; }
img.genderm { background-position: 0 0; width: 16px; height: 16px; float: left; }
img.genderf { background-position: 0 -16px; width: 16px; height: 16px; float: left; }
img.info { background-position: 0 -33px; width: 16px; height: 16px; float: left;}
the code does validate to xhtml strict and css using the w3validator (apart from the gecko and webkit border radious declarations ofcourse but i doubt that would cause an issue) any help appreciated Hello all, Can anyone advise what the best way to add an "Add to Quote" button and forms, similar to a shopping cart but we don't need the capability to take money. Prices are rapidly changing and a lot of our transactions are business to business. Is this something I can implement myself with a basic knowledge of html and css or does it go beyond that? http://www.abrametal.com http://www.abra-metal.com Best Regards, Colin I do not know what you call this. But I have seen forms that have text entered in them like "enter your name here", however when you put your cursor in the input field, the text automatically disappears. How is that done? Thanks! Well this isn't too much of a problem basically my form displays one way in dreamweaver and another when I preview the site any idea why its pretty annoying. heres how it looks in dreamweaver and heres it in a browser Lately, I see articles everywhere telling us to ditch tables and use CSS to position forms. I don't necessarily have a problem with using CSS although I'm admitedly a bit new to using it for anything more than basics like sizing, color, borders and backgrounds. But my basic question is why ditch the tables? Tables have been around since the inception of html. They work with any browser you care to name and the provide a valid function allowing developers to position things on the screen in a pleasing manner. The flow of data in tables is simple, so the developer and usually the user can predict where the cursor will go when the user hits the tab key. There are certainly problems with tables, such as text wrapping or being truncated when the screen resolution is lower than the developer designed for and the positioning is not as clean as absolute positioning with CSS. Absolute positioning with CSS can lead to its own problems though. If the user has fonts set to a different size or odd video settings the size of the object positioned may not be large enough to display the text. This can cause object to overlap making the page unreadable. It may sound as if I'm just trying to hang on to the old way of doing things, and there may be a bit of truth in that, but more I'm asking for valid reasons to change the way I do things. I actually like finding new ways of doing things but there has to be a benefit to it. How will swithing to CSS layout instead of tables make my pages better for my users or easier to develop and maintain for me? I look forward to your responses. Hi: If there is a post related to my question kindly redirect me there -- will be much appreciated. Question: Can a form be made transparent rather than using a solid color or, can you create a transparent background using CSS? If so, how is it done? Links, if any, please! Thank you. Hello All, I'm having a ton of difficulty on the drop down navigation bar for my site. I used webmonkey's "Add CSS Drop-Down Menus" tutorial As I wanted a really simple, quick and easy drop down menu especially since the lists that create the menu are populated through php. Now I found that I had to use z-index so the menu div layed on top of the text div (as other wise the menu div or the text div would overlap and obscure the other) This all worked fine. Sadly, when I tried to put a form into one page, I realized all the input fields could not be used because of the z-indexes and the menu bar overlaying it. So again I had to find a solution and here's where I'm stuck. Does anyone know a way I can keep it as is and have the form functional? If not, can anyone help me change the menu bar so that the second level of the list is shown on one line (therefore it won't lay on top of the form causing it to be obstructed). So I'd rollover "Telecommunications" and all the sub-categories are listed on one line Here's the html code: Code:
<div id="content">
<ul id=nav>
<li><a href='index.php?id=12'>About ACC</a></li>
<li><a href='index.php?id=13'>Telecommunications</a>
<ul>
<li><a href='index.php?id=6'>Telephone Systems</a>
<li><a href='index.php?id=7'>Voice Over IP Solutions</a>
<li><a href='index.php?id=5'>Local & Long Distance</a>
<li><a href='index.php?id=4'>Conferencing</a>
<li><a href='index.php?id=11'>Internet Access and Bandwidth</a><li><a href='index.php?id=10'>WAN/LAN Networking</a>
<li><a href='index.php?id=9'>Fiber Optics</a></ul></li>
<li><a href='index.php?id=14'>Our Services</a>
<ul>
<li><a href='index.php?id=8'>Cost Consulting & Analysis</a></ul></li>
<li><a href='index.php?id=19'>Contact Us</a></li>
</li>
</ul>
<div id="newscontent">
<table width="100%" border="0">
<tbody>
<tr>
<td>
<form method="post" action="mailto:spicelmf@gmail.com">
<b>Test:<b> <br />
<input type="text" size="71" name="title" /><br />
<br />
<input type="submit" value="Submit" /> <input type="reset" value="Try again" /></b> </b>
</form>
</td>
</tr>
</tbody>
</table></div>
</div>
and here's the css: Code: #nav {
position: relative;
margin: 0 auto 0 auto;
top: 67px;
width: 720px;
left: 50px;
padding: 0;
height: 400px;
/*list-style-type: none;*/
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
position: relative;
float: left;
min-width: 150px;
}
li ul {
position: absolute;
top: 35px;
display: none;
}
ul li a {
display: block;
text-align: center;
text-decoration: none;
line-height: 24px;
font-size: 14px;
color: #21448c;
padding: 5px;
background: #e6e3b8;
margin: 0 2px;
border-style: solid;
border-width: 0 1px 1px 1px;
border-color: #21448c;
}
ul li a:hover { background: #8da6bc; }
li:hover ul, li.over ul { display: block; }
#content {
position: relative;
height: 500px;
margin: 0 auto 0 auto;
width: 720px;
top: 56px;
padding: 0;
font-family: Arial,Helvetica,sans-serif;
}
#newscontent {
position: absolute;
margin: 0 auto 0 auto;
min-height: 380px;
top: 135px;
padding: 0px 54px 20px 50px;
width: 620px;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 10pt !important;
z-index: -1;
background: transparent url(maincontent_bg.png) repeat-y left top;
}
Thanks and apologies if this was already covered, I searched for ages and couldn't find what i was looking for. ok i developed the site www.fmrehab.com and the input forms on it are way oversized, is there something im missing or what. my code below: Code:
input.search {
width:124px;
padding:2px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#003366;
border:1px solid #003366;
background-color:#FFFFFF;
margin-bottom:3px;
}
This problem is in Internet Explorer. Here's the first page that looks the way it should: http://www.invistation.com/invite_me/contact.php And here's the other page, that references the same css file, but rendered differently: http://www.invistation.com/invite_me/resetpass.php My CSS File: http://www.invistation.com/invite_me/css/index2.css What gives? It doesn't make any sense why the form on the resetpass page is shifted more to the right than the form on the contact page. I'm using the same div for the two forms. ok...This is driving me slightly bonkers. I'm trying to do forms without tables. The issue is, I need a description sometimes, and I'd like to have multiple descriptions line up properly, as if they were in a table. Here's the stylesheet: Code:
/*
CSS Style sheet for BES OOP Forms
*/
.Form fieldset
{
background-color: #FFFFFF;
border: 0px;
margin: 0;
padding: .5em;
}
.Form > fieldset
{
border: 1px solid #009;
}
.Form legend
{
background: #BBB;
border: #009 solid 1px;
padding: 2px 10px;
font-weight: bolder;
margin:0;
}
.Form .Form_Row
{
border-bottom: 1px dotted #009;
margin: 0;
padding: .25em;
clear: left;
}
.Form .Form_Footer
{
text-align: center;
border: 1px solid #009;
margin: -1px 0 0;
background-color: #EEE;
clear: left;
}
.Form label
{
width: 13em;
display: block;
float: left;
}
.Form .Form_Input
{
display: block;
float: left;
width: 20em;
}
.Form .Form_Desc
{
display: block;
float: left;
}
The issue is one of flexibility: as you can see in the attached images, it works fine as long as the .Form_Input is narrower than the 20em allotted. However, when the .Form_Input is wider than that, the description is placed over the end of the input itself, which stinks. IE does it "right", sorta, and just bumps the description over further than it really should. Any ideas? display:table, etc are out, because that doesn't work at all in IE. min-width solves the problem for Mozilla and company, but is ignored completely by IE. I really want to do this without tables...but damn. MPEDrummer Hi: Can anyone tell me whether you can create raised shadowed text or forms with CSS? If it is, how can you do it? Thanks for the tip! |
|||||||