14, February 2012

Tabless form layout - webmaster forum

 
Webdigity webmaster forums
[ Home | Help | Search | Forum's Shop | Archive | Login | Register | Webmaster Directory ]
Webdigity Webmaster Forums  >  Design and Layout  >  Web Page Design  >  CSS (Moderator: Meth0d)
Topic: Tabless form layout		 « previous next »
Pages: [1] Print
Instabuck - The easy way to sell digital products online

Author Topic: Tabless form layout  (Read 2931 times)
I am a metal monkey!
Administrator
Community Supporter ?
Jedai Sword Master
*****
Gender: Male
Posts: 5779
46271 credits
Members referred : 3
« on: Jun 14, 2006, 11:56:59 am »
As I am experimenting with my new project, which is my first HTML 4.01 Strict, I found this very nice way to create forms look nice without tables.

The form is this :

Code:
<dl>
<dt>Email:</dt>
<dd><input type="text" name="email" /></dd>
<dt>Name:</dt>
<dd><input type="text" name="name" /></dd>
<dt>&nbsp;</dt>
<dd><input type="submit" value="Submit" /></dd>
</dl>

and the CSS attributes to make that work are those :

Code:
FORM DT {
   clear:both;
   width:33%;
   float:left;
   text-align:right;
}

FORM DD {
   float:left;
   width:66%;
   margin:0 0 0.5em 0.25em;
}

The code for this taken from this blog
Trial and Error my two best teachers Cool
Join us @ facebook or twitter

Last blog : Butterfly Marketing 2.0
Global Moderator
Community Supporter ?
Jedai Sword Master
*****
Gender: Male
Posts: 6691
34714 credits
Members referred : 374


It's time to use PHP5!
« Reply #1 on: Jun 14, 2006, 01:48:09 pm »
ok, why not using this xhtml markup?

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
form div {
clear:both;
margin-bottom:5px;
}
label {
float:left;
width:120px;
}
#submit_btn {
margin-left:120px;
}
</style>
</head>

<body>
<form action="process.php" method="post">
  <div>
    <label for="field">My Label</label>
    <input type="text" id="field" name="fieldname" size="30" value="Enter a value here..." />
  </div>
  <div>
    <label for="next_field">next Label</label>
    <input type="text" id="next_field" name="next_fieldname" size="30" value="Enter another value..." />
  </div>
  <div>
    <input type="submit" id="submit_btn" name="Submit" value="Process" />
  </div>
</form>
</body>
</html>
Website Monitoring Service

Free WordPress Themes
Magento Templates

Last blog : A new Wordpress theme for our blog
I am a metal monkey!
Administrator
Community Supporter ?
Jedai Sword Master
*****
Gender: Male
Posts: 5779
46271 credits
Members referred : 3
« Reply #2 on: Jun 14, 2006, 01:53:02 pm »
Nice. Thanks for sharing this Smiley
Trial and Error my two best teachers Cool
Join us @ facebook or twitter

Last blog : Butterfly Marketing 2.0
Global Moderator
Community Supporter ?
Jedai Sword Master
*****
Gender: Male
Posts: 6691
34714 credits
Members referred : 374


It's time to use PHP5!
« Reply #3 on: Jun 14, 2006, 02:01:34 pm »
... my advice is write html code for xhtml 1.0 strict... but check the limitations first...

select menu's and checkboxes are needing diff. parameters (and a lot html elements too) like:

Code:
  <div>
    <label for="my_select">Nice Menu</label>
    <select id="my_select" name="nice_menu">
  <option value="1" selected="selected">value 1</option>
  <option value="2">value 2</option>
</select>
  </div>
  <div>
    <label for="best_checkbox">Please (un)check</label>
<input id="best_checkbox" name="please_check" value="super" checked="checked" />
  </div>
Website Monitoring Service

Free WordPress Themes
Magento Templates

Last blog : A new Wordpress theme for our blog
Community Supporter ?
Bill Gates is my home boy
*****
Gender: Male
Posts: 619
5660 credits
Members referred : 0


www.dg9.org
« Reply #4 on: May 13, 2007, 04:57:31 am »
http://www.dg9.org , Just Visit...
Partners:
http://www.resume-fix.com , Free Resumes

Last blog : Archos: Where are you?
Global Moderator
Community Supporter ?
Jedai Sword Master
*****
Gender: Male
Posts: 6691
34714 credits
Members referred : 374


It's time to use PHP5!
« Reply #5 on: May 13, 2007, 07:46:31 pm »
Quote from: designer on May 13, 2007, 04:57:31 am
I skin my forms... interested in skinned forms, check out my site or http://www.badboy.ro/assets/articles/niceforms/niceforms.html which I based it on...

Newest Version:
http://www.badboy.ro/assets/articles/niceforms1.0/niceforms.html

The site:
http://www.badboy.ro/articles/2007-01-30/niceforms/

looks like a mix of CSS and javascript right?
Website Monitoring Service

Free WordPress Themes
Magento Templates

Last blog : A new Wordpress theme for our blog
Community Supporter ?
Bill Gates is my home boy
*****
Gender: Male
Posts: 619
5660 credits
Members referred : 0


www.dg9.org
« Reply #6 on: May 14, 2007, 05:23:36 am »
You can scratch the javascript (I did on some)... its only for the onclick event anyways... But it does make my forms look pretty and cross-browser friendly since I can control how it will look...
http://www.dg9.org , Just Visit...
Partners:
http://www.resume-fix.com , Free Resumes

Last blog : Archos: Where are you?
Global Moderator
Community Supporter ?
Jedai Sword Master
*****
Gender: Male
Posts: 6691
34714 credits
Members referred : 374


It's time to use PHP5!
« Reply #7 on: May 14, 2007, 08:51:40 am »
Quote from: designer on May 14, 2007, 05:23:36 am
You can scratch the javascript (I did on some)... its only for the onclick event anyways... But it does make my forms look pretty and cross-browser friendly since I can control how it will look...

yeah absolutely it looks very nice!
Website Monitoring Service

Free WordPress Themes
Magento Templates

Last blog : A new Wordpress theme for our blog
Global Moderator
Internet Junkie
*****
Gender: Male
Posts: 1807
9006 credits
Members referred : 6
« Reply #8 on: May 14, 2007, 11:39:34 am »
wow, that looks awesome Designer!
free PHP scripts and PHP tutorials | The Big Adsventure |  Lets Work Online! | 43 Proxies

Last blog : Are You Stumbling Yet?
I am a metal monkey!
Administrator
Community Supporter ?
Jedai Sword Master
*****
Gender: Male
Posts: 5779
46271 credits
Members referred : 3
« Reply #9 on: May 14, 2007, 01:03:08 pm »
Cool! It looks like a flash embedded form
Trial and Error my two best teachers Cool
Join us @ facebook or twitter

Last blog : Butterfly Marketing 2.0
Community Supporter ?
Bill Gates is my home boy
*****
Gender: Male
Posts: 619
5660 credits
Members referred : 0


www.dg9.org
« Reply #10 on: May 15, 2007, 04:26:56 am »
the current version uses better css... but I prefer the older one for definition... Glad you guys liked it...
http://www.dg9.org , Just Visit...
Partners:
http://www.resume-fix.com , Free Resumes

Last blog : Archos: Where are you?
Trackback URI for this entry : http://www.webdigity.com/trackback.php?topic=2876
Tags : design css html xhtml Bookmark this thread : Digg Del.icio.us Dzone more....

Pages: [1] Print 
Webdigity Webmaster Forums  >  Design and Layout  >  Web Page Design  >  CSS (Moderator: Meth0d)
Topic: Tabless form layout		 « previous next »
Jump to:
User Area
Welcome, Guest. Please login or register.
Did you miss your activation email?
Feb 14, 2012, 07:34:14 am





Login with username, password and session length

Donate to our community, and get a permanent link back to your site!

Donate to our community, and get a permanent link back to your site!


Forum Statistics
Total Posts: 59.823
Total Topics: 10.616
Total Members: 19.616
Tutorials : 58
Resources : 929
Designs : 395
Latest Member: eprocaccnath

115 Guests, 2 Users online :

56 users online today:

Recent topics
TWAZZUP ??
Re: File4Sharing.com- 50$/1...
hello everyone!
Breneton for Burning Mouth ...
Re: 4 Super Steps To Making...
Hello! :)
Re: What is your favorite f...
Re: What is reseller? ...

HumanWorks Network
Technology news
Webmaster articles
Sublime web directory
RSS Feed directory and viewer


Web Design Gallery · Whois Lookup · Pagerank · Tag Browsing · Lo-fi version · Syndication · Webmaster forum history · Advertise
Developed by HumanWorks © 2005 - 2012 Webdigity webmaster community · sublime directory
Webdigity Webmaster Forums | Powered by SMF 1.0.12. © 2001-2005, Lewis Media. All Rights Reserved.