SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 31
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    implementing a form

    Hey,

    I tried implementing a form and I seem to stumbe upon yet another problem: I don't succeed in getting the form where i want.
    I tried resetting every positioning syntax there is but it wont move to the desired place.

    Here is the code:

    HTML Code:
    <form id="formulier" action="mailto:nobody@nobody.com" method="post" enctype="text/plain">
    	<table width="80%" border="0" cellspacing="0" cellpadding="2">
    		<tr>
    			<td width="35%">
    				<div align="right"><span class="vet">Name:</span></div>
    			</td>
    			<td width="65%">
    				<input type="text" name="name" size="15">
    			</td>
    		</tr>
    		<tr>
    			<td width="35%">
    				<div align="right"><span class="vet">Email:</span></div>
    			</td>
    			<td width="65%">
    				<input type="text" name="email" size="20">
    			</td>
    		</tr>
    		<tr>
    			<td width="35%">
    				<div align="right"><span class="vet">Comment:</span></div>
    			</td>
    			<td width="65%">
    				<textarea name="comment" cols="25" wrap="virtual" rows="3"></textarea>
    			</td>
    		</tr>
    		<tr>
    			<td width="35%">&nbsp;</td>
    			<td width="65%">
    				<input type="submit" name="Submit" value="Submit">
    				<input type="reset" name="reset" value="Reset">
    			</td>
    		</tr>
    		<tr>
    			<td width="35%">&nbsp;</td>
    			<td width="65%">&nbsp;</td>
    		</tr>
    	</table>
    </form>
    this is code for another table in the page
    Code:
    /* TABEL */
    table {
    	margin: 10px 0 0 0;
    	font: 11px/24px Verdana, Arial, Helvetica, sans-serif;
    	border-collapse: collapse;
    	width: 540px;
    	}
    	
    th {
    	padding: 0 0.5em;
    	text-align: left;
    	border-left: 1px solid #CCC;
    	}
    	
    tr.yellow th{
    	border-top: 1px solid #FB7A31;
    	border-bottom: 1px solid #FB7A31;
    	background: #FFC;
    	}
    	
    td {
    	border-bottom: 1px solid #CCC;
    	padding: 0 0.5em;
    	}
    	
    td:first-child {
    	width: 120px;
    	}
    	
    td+td {
    	border-left: 1px solid #CCC;
    	text-align: center;
    	}
    and this is the actual code for styling the form
    Code:
    form#formulier table tr td{
    	width: 1px;
    	margin:0 0 0 10px;
    	border:1px solid #000;
    	text-align: left;
    }

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    And from that, how are we supposed to know what you want it to look like?

    I'm guessing that setting the width of every cell in the table to 1px won't be helping matters...

    But really, you shouldn't be using a table there at all. That isn't tabular data, it's a form, and there are proper elements to use in forms, like <fieldset> and <label>, rather than throwing things randomly into table cells.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for your help

    You can find the page here but i already switched back to a div styled form instead of a table styled one

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ajajajak View Post
    I tried resetting every positioning syntax there is but it wont move to the desired place.
    Your form displays ok, but where is the "desired place" you want it to be.

    btw- imho using tables is ok in this case because you can legitimately argue this is tabular data.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you know of any good form styling tutorials these would also be welcome. Trying google now, cheers

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Ajajajak View Post
    If you know of any good form styling tutorials
    Here's a good one:

    http://articles.sitepoint.com/articl...orm-design-css

    Quote Originally Posted by Kalon View Post
    imho using tables is ok in this case because you can legitimately argue this is tabular data.
    Forms have their own semantics (relationships between labels and inputs etc.) so why confuse this with table semantics (relationships between rows and columns etc.)?

  7. #7
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Forms have their own semantics (relationships between labels and inputs etc.) so why confuse this with table semantics (relationships between rows and columns etc.)?
    let me give you a typical example of where I routinely use tables in a form.

    In a customised cms for a newsletter subscription website I will have a menu item called "Manage Users".

    When I extract the users' records from the database and display them in a form I will have going across the page for each user record columns titled

    userID, first name, last name, email, subscriptions, access level, edit, delete

    The edit will be a link to a "user info" form and the delete will be a checkbox so I can delet multiple users in 1 go, but that is beside the point.

    Imho these rows of users x 8 columns can legitimately be argued to be tabular data and so it is legitimate to use a table to display these rows and columns in a table within a <form>.

    The table cells can still containg <labels> and other appropriate elements where required but in terms of aligning x number of rows by 8 columns correctly a table is much quicker and simpler for me.

    If you accept the above as being valid then it makes no difference whether the data has 2,3,4 or whatever number of columns.

    I agree that "generally speaking" tables are a no-no for content layout but as I say above, imho the above type of data can be argued to be tabular data.

    The defence rests its case your honour

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Kalon View Post
    in terms of aligning x number of rows by 8 columns correctly a table is much quicker and simpler for me.
    It sounds more like a case of convenience rather than appropriate semantics to me, as this is basically a visual layout issue.

    Personally I don't like using tables (I wasn't weaned on them) so I avoid them wherever not strictly necessary.

  9. #9
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It sounds more like a case of convenience rather than appropriate semantics to me, as this is basically a visual layout issue.
    yes you're right - as I said it's easier for me to line up 8 columns for x number of rows using a table for this type of data since it can be argued to be tabular data.

    so can you please then give some example code (with I assume the required css) on how you would markup without using tables say 2 rows x 8 columns with the column titles I posted so that the userId, first and last names (text strings) are left justified and aligned vertically, the access level are 2 radio buttons (admin or user), subscriptions is a <select> and the edit and delete are links and checkboxes respectively and are aligned centrally with their "columns".

    Apart from myself, I am sure there will be others interested as well since

    Personally I don't like using tables (I wasn't weaned on them) so I avoid them wherever not strictly necessary.

  10. #10
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Personally I don't like using tables (I wasn't weaned on them) so I avoid them wherever not strictly necessary.
    I wasn't weaned on them either, but thinking a bit more about this (as I'm always happy to learn new things)....hmmmmmmm, interesting

    By "not strictly necessary" I asume you mean there is no other way of doing something with other html elements and css apart from using tables and I simply can't think of a situation where that would be so - but I'm not a html/css expert , or an expert on anything for that matter.

    Assumning you have used tables before, can you please post a code snippet of where you have in the past felt using a table was "strictly necessary".

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Kalon View Post
    where you have in the past felt using a table was "strictly necessary".
    I was really just talking about tabular data. That's where I would say it's strictly necessary. I'll have a look at your code question later, as I must run now.

  12. #12
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I was really just talking about tabular data. That's where I would say it's strictly necessary....
    fair enough and therein lies the crux of the issue.

    it boils down to whether someone can argue that a data set is legitimate tabular data or not.

    what is tabular data can be a grey area and open to interpretation.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Kalon View Post
    it boils down to whether someone can argue that a data set is legitimate tabular data or not.
    Lately I've been experimenting with screen reader software, and that's an eye-opener in terms of how information is presented. You wouldn't want content read out as table data unless there really is a reason for form elements to be arranged that way. I'm not necessarily saying that that's not appropriate for a form in some instances, but certainly in the OP's case I'd say not.

  14. #14
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've never used screen reader software but I am aware of the principle of how they work and you make a valid point.

    Regarding the OP's code, when I ran it I thought you can argue it is tabular data but I concede that in his/her case it would not be too difficult to markup the elements without using tables.

    But as the number of rows and columns become larger, and if I want a tabular appearance of the elements in the browser then for me it becomes much easier and quicker to use a table.

    But I totally agree tables should not be used to create a common header, sidebar, content and footer layout.

  15. #15
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    btw- imho using tables is ok in this case because you can legitimately argue this is tabular data.
    Uh, no? This form is three questions:
    Name:
    Email:
    Comment:

    SEND, CANCEL

    No need for a table for that. The stuff ABOVE the form is tabular, yes. The form itself? No.

    Looking at the form code the way it is now, that's all you need: heck, you DON'T need the "field" classes on those divs, or any classes on the labels, because you can

    #formulier div {
    style divs in the form with the id of formulier
    }
    and
    #formulier label {
    style labels in this form
    }

    Usually I have lots of forms and they start styles like this:
    form div {
    styles;
    }

    form label {
    styles;
    }

    And then if I need something specifically different for a form, I'll use the form's id to reset that control.

    I have done forms in tables for the reason Kalon has: sometimes a form is a user filling out a table. But then you have to build carefully: screen readers are more likely to see just the form stuff than the table stuff, so you make sure the table doesn't get in the way and the relevant parts of the table are visible as "form controls".

    Brothercake did a table to a form in a clever way but I'll have to look around to find it. It was rather brilliant.

  16. #16
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hm thanks for that stomme poes


    Another issue: the mailto command. Does it automatically send what you wrote to the email adress or does it pop up an outlook or whatever email client for you? I don't need the last. I want the comment sent directly

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Ajajajak View Post
    Another issue: the mailto command. Does it automatically send what you wrote to the email adress or does it pop up an outlook or whatever email client for you? I don't need the last. I want the comment sent directly
    In some clients it pops up the email client, in other cases nothing happens at all (such as in Mac Mail). But in no cases does it send the email directly, so this is not the process to use. You really need to process a form with something like PHP.

  18. #18
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Uh, no? This form is three questions:
    Name:
    Email:
    Comment:

    SEND, CANCEL

    No need for a table for that. The stuff ABOVE the form is tabular, yes. The form itself? No.
    the operative word here is "need".

    yes I agree you can markup the elements without using tables but I would still argue that if the required visual display in the browser is to be a tabular display then it is legitimate to use a table to markup up the elements if the developer chooses to do so.

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Kalon View Post
    I would still argue that if the required visual display in the browser is to be a tabular display then it is legitimate to use a table to markup up the elements
    Although visual layout is quite different from the meaning of the code. (The old chestnut! )

  20. #20
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    but I would still argue that if the required visual display in the browser is to be a tabular display
    Unless I misread you, I believe I saw you say you thought the OP's form looked tabular. I disagree that one can argue this needs or should even think of having a table.


    And, if you are using a table for layout and display purposes, why stop at forms? You can use tables for whole pages for that reason then. Just saying.
    But definitely if you can see that the user is filling in a table... yeah, makes sense to use a table in the first place. As you say, the results are then returned in the same manner they were filled in.


    Actually the only thing saving my butt in my old table-forms is the use of the title attribute, because otherwise many readers aren't going to hear the table headers at all. In a real table, if the inputs are in td's, often the "label" text is equal to the combination of the column header and the row header. While you can mark up a table to have that td be associated with the headers correctly, for readers who go into a Forms Mode (to type into the inputs), the table stuff can be and is ignored. So later when I bring that table back, filled in, everything's fine: it's a normal table with values and everyone can read it. But as a form I have to be really careful... and possibly Orca screen reader is missing the titles (but might be reading the table headers so not sure on that one).

  21. #21
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so the way I see it, you're basically confirming that

    Quote Originally Posted by Kalon View Post
    it boils down to whether someone can argue that a data set is legitimate tabular data or not.

    what is tabular data can be a grey area and open to interpretation.
    and we'll have to just agree to disagree.

  22. #22
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Another issue: the mailto command. Does it automatically send what you wrote to the email adress or does it pop up an outlook or whatever email client for you? I don't need the last. I want the comment sent directly
    In addition to what ralph said (I agree), keep in mind also that spambots can read that email you put out there like that. Since usually the point of a contact form is to keep your email hidden, this defeats the purpose. A backend script who knows your email address is safer in that regard.

    Quote Originally Posted by Kalon
    it boils down to whether someone can argue that a data set is legitimate tabular data or not.

    what is tabular data can be a grey area and open to interpretation.
    Yes, I agree the developer is the one who determines if something counts as tabular data. I also think there's a limit to how far that can be stretched, but people can make similar arguments for lists in forms: some see it as a list of questions, sometimes even with a set order (so they even do an ordered list). So long as the form is accessible and logical to the user, the markup isn't a huge deal in comparison.

    Quote Originally Posted by me
    I disagree that one can argue this needs or should even think of having a table.
    This is my opinion as a developer... certainly isn't set in any hard rules anywhere. : )

  23. #23
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since we are all happy together: does someone know of a good php tutorial on implementing the type of form I have here ?

    Also I have my webpage uploaded to a byethost server which is linked to a free .co.cc domain. How do I make it so that when users surf to www.haasfazant.co.cc they get automatically sent to the homepage instead of the visitor getting a serverlist with the different pages uploaded?

  24. #24
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Ajajajak View Post
    does someone know of a good php tutorial on implementing the type of form I have here ?
    There are lots online. Try this one to start with, as it's nice and simple:
    http://webgeekworld.com/web_developm...ails.php?id=42

    How do I make it so that when users surf to www.haasfazant.co.cc they get automatically sent to the homepage
    Change the name of home.htm to index.html. Most folders/directories expect to find an "index" file which they show by default when you point to that directory. Otherwise you just get a list of files like that.

  25. #25
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Ajajajak View Post
    Since we are all happy together: does someone know of a good php tutorial on implementing the type of form I have here?
    I wrote a very quick and (I hope!) simple guide here:
    http://www.sitepoint.com/forums/show....php?p=4698246

    If you've got any questions on that, just ask!


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
  •