1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Please Review it.

Discussion in 'HTML & Website Design' started by Ellys Kho, Apr 17, 2013.

  1. #1
    i make simple form. here the form

    
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    .table{background-color: #fff0f8;border-radius:10px 10px 10px 10px}
    </style>
    <script type="text/javascript">
    function testingform(){document.getElementById("Submit")innerHTML="Thank You For Your Data";}
    </script>
    
    </head>
    <body>
    <form method="post" action="">
    <table border="0" class="table">
    <tr>
    <td>Name :</td>
    <td><input type="name" name="name" /></td>
    </tr>
    <tr>
    <td>Email :</td>
    <td><input type="email" name="email" /></td>
    </tr>
    <tr>
    <td>Website :</td>
    <td><input type="URL" name="URL" value="http://" />
    </tr>
    <tr>
    <td>Gender :</td>
    <td><input type="radio" name="Gender" value="Male" />Male<br />
    <input type="radio" name="gender" value="Female" />Female</td>
    </tr>
    <tr>
    <td>Where Did You Hear Us :</td>
    <td><input type="checkbox" name="Search Engine" value="Search Engine" />Search Engine<br />
    <input type="checkbox" name="Friend" value="Friend" />Friend<br />
    <input type="checkbox" name="other" value="Other.." />Other..</td>
    </tr>
    <br />
    <tr>
    <td><input type="submit" Value="Submit" id="submit" onclick="form()"/></td>
    </table>
    </form>
    
    </body>
    </html>
    
    Code (markup):
    please review it.
     
    Ellys Kho, Apr 17, 2013 IP
  2. rolodex

    rolodex Well-Known Member

    Messages:
    364
    Likes Received:
    37
    Best Answers:
    5
    Trophy Points:
    175
    #2
    Shouldn't be using tables though...Use the form elements, <label>, <fieldset> etc.
     
    rolodex, Apr 18, 2013 IP
  3. Andrea from CasinoRealis

    Andrea from CasinoRealis Greenhorn

    Messages:
    69
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    15
    #3
    I'd switch the tables for CSS
    <div class="field text">
      <label for="fieldName">Field Title</label>
      <input value="input value" type="text" name="fieldName" id="fieldName" />
    </div>
    Code (markup):
    Hope it helps!
     
  4. Ellys Kho

    Ellys Kho Guest

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #4
    iam sorry. but i still don't get it. since i was new on coding. maybe you can give me more advice.

    thanks guys.
     
    Ellys Kho, Apr 18, 2013 IP
  5. flexcarrera

    flexcarrera Banned

    Messages:
    159
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    80
    #5
    Before advancing any further, I'd suggest learning about tableless forms, it'll benefit you greatly in the long run.

    Here's a good read.

    Good luck.
     
    flexcarrera, Apr 18, 2013 IP
  6. rolodex

    rolodex Well-Known Member

    Messages:
    364
    Likes Received:
    37
    Best Answers:
    5
    Trophy Points:
    175
    #6
    Good read? Where?
     
    rolodex, Apr 18, 2013 IP
  7. flexcarrera

    flexcarrera Banned

    Messages:
    159
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    80
    #7
    For some reason the link isn't inserting in my previous post.

    http://nicholasbarger.com/2009/06/22/a-simple-tableless-form/
     
    flexcarrera, Apr 18, 2013 IP
  8. Ellys Kho

    Ellys Kho Guest

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #8
    thanks for advice.
     
    Ellys Kho, Apr 19, 2013 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    You mean semantic markup... Yes CSS would be applied for style, but what would be switched first is the markup.

    Lemme explain what everyone else is saying... but not explaining.

    There are two ways of writing HTML, one is broken outdated half-assed nonsense, the other one remains true to the entire purpose of writing HTML. They are presentational markup -- choosing your tags based on what they look like, vs. semantic markup, choosing tags based on what things ARE.

    The former is pretty much the hallmark of HTML 3.2 circa the late 1990's -- and a LOT of people still have their heads wedged up 1997's arse practicing presentational markup; Not your fault you were doing it, you likely were learning from a decade and a half out of date book or tutorial published last week. :/ People doing so usually slap a 4 tranny or 5 lip-service doctype on it, instead of an actual RECOMMENDATION document... and since you have the 5 lip service, it's pretty clear you're learning from the wrong people... particularly with that goofy javascript in there too.

    As I said, semantic markup is about saying what things ARE. This is the original intent of HTML, and the intent of HTML 4 Strict - in this case you have LABEL because the text are labels for the inputs... and the inputs are semantic too. The information is NOT tabular data (rows and columns where it's all related -- like a spreadsheet) so it has NO business in a table. What it looks like? That's CSS' job.

    You've got other bits of outdated code in there that aren't even valid in the willy-nilly slap it together any old way mess known as HTML 5 -- like BORDER, that attribute has NO business being used on any website written after 1997. Your radio button name's don't match when they should...

    FORM's are supposed to have FIELDSETS -- grouping data fields together, this is the element that in most cases should be for semantic reasons the direct child of the table. Likewise related fields, like your radio buttons would get their own FIELDSET and LEGEND.

    In 4 Strict you need to have a LEGEND describing the table -- it's optional in XHTML 1.0 Strict which is one of the reasons I prefer it, but still I'd probably have a LEGEND on that saying what the form IS. LEGEND can be tricky to style since it's inconsistent cross browser, but a easy workaround is to stick a span inside it. (I hate this, but it's the best solution I've seen)

    LABEL have an attribute called "FOR", it should point at the ID of the input the label is... well... for!

    INPUT, TEXTAREA, SELECT, and their kine should have both a ID and a NAME. The ID so the LABEL has something to point at and for targeting it uniquely -- and remember ID's are UNIQUE, meaning you can only use an ID on ONE element. TO make sure this isn't an issue I usually use the same ID I put on the form as a underscored prefix to the INPUT ID's, reducing the chances of accidentally using the same ID more than once.

    Likewise there's the name attribute. Used to be name was used for targeting via scripting in Nyetscape 4, and for hashes to index to, but in modern markup the only legitimate purpose they should serve is what is sent server-side. NAME is what it's called on the server, ID is what it's called from your scripts, CSS, and anything else client-side.

    In your code there are other flubs -- like there is no type="name", even in HTML 5... I don't use the HTML 5 types because I am not convinced they serve a legitimate purpose... just like the rest of the specification. Also you shouldn't have spaces in NAME.

    So... If I was writing that same page the markup would go something like this:

    <!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"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <meta
    	name="viewport"
    	content="width=device-width; initial-scale=1.0"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Contact Form Demo
    </title>
    
    </head><body>
    
    <form method="post" action="#" id="contactForm">
    	<fieldset class="contactInfo">
    		<legend><span>Contact Us</span></legend>
    		
    		<label for="contactForm_name">Name:</label>
    		<input type="text" name="name" id="contactForm_name" />
    		<br />
    		
    		<label for="contactForm_eMail">E-Mail:</label>
    		<input type="text" name="email" id="contactForm_eMail" />
    		<br />
    		
    		<label for="contactForm_website">Website:</label>
    		<input type="text" name="website" id="contactForm_website" value="http://" />
    		<br />
    	</fieldset>
    		
    	<fieldset class="gender">
    		<legend><span>Gender:</span></legend>
    		
    		<input type="radio" name="gender" id="contactForm_genderMale" value="Male" />
    		<label for="">Male</label>
    		<br />
    		
    		<input type="radio" name="gender" id="contactForm_genderFemale" value="Female" />
    		<label for="">Female</label>
    	</fieldset>
    	
    	<fieldset>
    		<legend><span>Where Did You Hear About Us:</span></legend>
    		
    		<input type="checkbox" name="searchEngine" id="contactForm_searchEngine" value="1" />
    		<label for="contactForm_searchEngine">Search Engine</label>
    		<br />
    		
    		<input type="checkbox" name="friend" id="contactForm_friend" value="1" />
    		<label for="contactForm_friend">Friend</label>
    		<br />
    		
    		<input type="checkbox" name="other" id="contactForm_other" value="1" />
    		<label for="contactForm_other">Other</label>
    	</fieldset>
    	
    	<fieldset class="message">
    		<label for="contactForm_message">Message:</label>
    		<textarea name="message" id="contactForm_message" rows="8" cols="40"></textarea>
    	</fieldset>
    		
    	<div class="submitAndHiddens">
    		<input type="submit" class="submit" value="Submit" />
    	<!-- .submitAndHiddens --></div>
    	
    <!-- #contactForm --></form>
     
    </body></html>>
    Code (markup):
    Though that last inner fieldset, shouldn't those be radio buttons, or were you using checkboxes just to see what checkboxes do?

    Everything else needed for styling being handled in the CSS... Which can get far more complicated than the above.
     
    deathshadow, Apr 20, 2013 IP
  10. Ellys Kho

    Ellys Kho Guest

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #10
    @Deathshadow what i can say. you're really amazing. i will try to learn it more.
     
    Ellys Kho, Apr 20, 2013 IP