SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2001
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Validate table with each row a form

    I have a bunch of data that is naturally trabular in form, so I want to use a table to display it. However, each row of the table should be editable, such that some cells in the row have their content in text input fields and the last cell contains an update button. The natural markup for this is...

    HTML Code:
    <table>
       <form ...><tr>
        <td><input type="text"... /></td>
        <td><input type="text"... /></td>
        <td><input type="text"... /></td>
        <td><input type="submit"... /></td>
         </tr></form>
       <form ...><tr>
        <td><input type="text"... /></td>
        <td><input type="text"... /></td>
        <td><input type="text"... /></td>
        <td><input type="submit"... /></td>
      </tr></form>
        ...
        </table>
    However, this doesn't validate because form elements aren't allowed inside table elements. Does anyone have a solution that retains the tabular layout, with any number of rows and columns, and without the columns being fixed width (I can do a fixed width solution with css but I need the fluid width)?

    Thanks
    Richard Lord
    Big Room - Flash & PHP development
    Ubiq - Actionscript & PHP training in the UK
    Search PHP & MySQL docs from IE7 & FF2 toolbar

  2. #2
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    you can have form elements inside a table, but then the FORM tags have to go around the table

    try one table per form
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2001
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I use one table per form, then the cells in the different forms won't line up and the use of a table becomes pointless.
    Richard Lord
    Big Room - Flash & PHP development
    Ubiq - Actionscript & PHP training in the UK
    Search PHP & MySQL docs from IE7 & FF2 toolbar

  4. #4
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by riclo
    If I use one table per form, then the cells in the different forms won't line up and the use of a table becomes pointless.
    right, so at this point you are looking to decide between

    1. columns that line up
    2. code that will pass the validator

    guess which of these the client cares about

    another option -- use just one form, with a different submit button per row
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or, even better (since forms are NOT tabular data), use this instead:
    HTML Code:
    <form ...>
    	<div>
    		<fieldset>
    			<legend>Legend Text</legend>
    			<label for="inputID1">Label Text</label><input type="text"... /><br />
    			<label for="inputID2">Label Text</label><input type="text"... /><br />
    			<label for="inputID3">Label Text</label><input type="text"... /><br />
    		</fieldset>
    		<input type="submit"... />
    	</div>
    </form>
    If you want to see a working example (with CSS included), here's one you can study:
    HTML 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" xml:lang="en" lang="en">
    <head>
    <title>CSS Based Form Layout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background: #FFF;
    	color: #000;
    	padding: 1em; /* this is just to make the example easier to follow along visually */
    }
    
    #exampleForm {
    	border: 1px solid #000;
    	padding: 1em; /* this is just to make the example easier to follow along visually */
    	width: 45.75em;
    }
    
    	div#about {
    		float: left;
    		margin-right: 1em;
    		width: 26em;
    	}
    	
    	div#poll {
    		float: left;
    	}
    		#poll div {
    			padding: 0.25em 0;
    		}
    	
    	div#controls {
    		clear: left;
    	}
    	
    	fieldset {
    		border: 1px solid #000;
    		display: block;
    		margin-bottom: 0.5em;
    		padding: 0 0 0.25em 0.5em;
    	}
    		
    		#poll fieldset {
    			width: 17.5em;
    		}
    	
    	legend {
    		background: #EEE;
    		color: #00C;
    		border: 1px solid #000;
    		padding: 0 0.25em;
    	}
    
    	
    	label {
    		margin: 0.25em 0;
    	}
    		#about label {
    			clear: left;
    			float: left;
    			width: 11.8em;
    		}
    		
    		#poll label {
    			width: 10em;
    		}
    	
    	input {
    		margin: 0.25em 0;
    	}
    		#poll input {
    			clear: left;
    			float: left;
    			margin: 0 0.25em 0 0;
    			vertical-align: bottom;
    		}
    		
    		#submit, #reset {
    			clear: left;
    			float: none;
    			margin-left: 0;
    			width: 8em;
    		}
    </style>
    </head>
    <body>
    <form id="exampleForm" method="post" action="none">
    	<div id="about">
    		<fieldset id="basicInfo">
    			<legend>Basic Information</legend>
    			<label for="name">Your Name:</label> <input id="name" type="text" size="30" /><br />
    			<label for="email">Your E-Mail Address:</label> <input id="email" type="text" size="30" />
    		</fieldset>
    		<fieldset id="favorites">
    			<legend>Favorite Things</legend>
    			<label for="favoriteAnimal">What is your favorite animal?</label> <input id="favoriteAnimal" type="text" size="30" /><br />
    			<label for="favoriteSport">What is your favorite sport?</label> <input id="favoriteSport" type="text" size="30" /><br />
    			<label for="favoriteFood">What is your favorite food?</label> <input id="favoriteFood" type="text" size="30" />
    		</fieldset>
    	</div>
    	<div id="poll">
    		<fieldset>
    			<legend>What do you use to build your Web sites?</legend>
    			<div>
    				<label for="golive"><input id="golive" type="radio" /> Adobe GoLive</label><br />
    				<label for="dreamweaver"><input id="dreamweaver" type="radio" /> Macromedia Dreamweaver</label><br />
    				<label for="frontpage"><input id="frontpage" type="radio" /> Microsoft FrontPage</label><br />
    				<label for="hand"><input id="hand" type="radio" /> Text Editor</label><br />
    				<label for="other"><input id="other" type="radio" /> Other</label>
    			</div>
    		</fieldset>
    	</div>	
    	<div id="controls">
    		<input id="submit" type="submit" value="Submit Form" /> <input id="reset" type="reset" value="Clear Form" />
    	</div>
    </form>
    </body>
    </html>

  6. #6
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    that's nice css, dan, i've seen that before somewhere...

    btw, forms are tabular, but perhaps we could start a separate thread to hash that out

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2001
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937
    right, so at this point you are looking to decide between

    1. columns that line up
    2. code that will pass the validator

    guess which of these the client cares about
    Indeed, if I can't find a solution I will go with invalid code, but ideally I'd like it to validate.

    Quote Originally Posted by Dan Schulz
    (since forms are NOT tabular data)
    Very often they're not, but in this particular case the forms are tabular data.
    Richard Lord
    Big Room - Flash & PHP development
    Ubiq - Actionscript & PHP training in the UK
    Search PHP & MySQL docs from IE7 & FF2 toolbar

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937
    that's nice css, dan, i've seen that before somewhere...

    btw, forms are tabular, but perhaps we could start a separate thread to hash that out

    That would be this post:
    http://www.sitepoint.com/forums/show...19&postcount=4

    Note that I made a small change to the markup since then (and still have to write up the documentation for it - since I'm still obviously tweaking it).

  9. #9
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    since you're tweaking, add name="IDE" to the radio buttons

    without the name attribute, IE won't select the button (fill in the circle with a dot)

    the same name attribute goes on all radio buttons to make them mutually exclusive

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •