Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I am a beginner and I have made a Reservation Form in HTML. I'm pretty sure it will look horrible to any developer out there, but hey, that's why I've posted it.

I'd like a general review of this. I'm especially concerned about the quality and enhancements of this form. What should I do to add attractive looks and to upload the input data somewhere, So that I could read it?

<HTML><BODY>
<H1>RESERVATION FORM</H1>
<P>NAME<INPUT TYPE="TEXT" SIZE="20" MAXLENGTH="99" />
<P>AGE<INPUT TYPE="TEXT" SIZE="12" MAXLENGTH="99" />
<P>ADDRESS<INPUT 

<TYPE="TEXT" SIZE="42" MAXLENGTH="99" />
<P>EMAIL<INPUT TYPE="TEXT" SIZE="30" MAXLENGTH="99" />
<P>TELEPHONE<INPUT TYPE="TEXT" SIZE="10" MAXLENGTH="99" />
<P>SELECT YOUR 

BERTH
<SELECT NAME="CHOICES" SIZE="3">
<OPTION>TATKAL</OPTION>
<OPTION>LADIES</OPTION>
<OPTION>GENRAL</OPTION>
</SELECT></P>
<P>CITY<SELECT naME="CITY"><OPTION SELECTED> 

DELHI</OPTION><OPTION>MUMBAI</OPTION><OPTION>KOLKATA</OPTION><OPTION>CHENNAI</OPTION></p><br><br>
<input type="submit" value="click here to submit" />
<input 

type="reset" value="clear this form" /></BODY></HTML>
share|improve this question
2  
"What should I do to add attractive looks" - Add a CSS stylesheet –  ChrisW Mar 18 at 5:14
2  
"What should I do to upload the input data somewhere, so that I could read it?"- Put the form on a web server, so that users can load the form in their web browser using HTTP. You'll also need a <form> element in the page. –  ChrisW Mar 18 at 5:17

2 Answers 2

The most obvious mistake — which makes your code malformed HTML — is the extra < before TYPE:

<P>ADDRESS<INPUT

<TYPE="TEXT" … />

The next biggest issue, in my opinion, is that your <P> tags aren't consistently being closed. Only in the earliest days of HTML was it acceptable to use an unclosed <P> as a line break. These days, it's generally accepted that paragraphs should lie between <P> and </P>.

The next thing you should do is to add a doctype declaration at the very beginning, which tells the browser which version of the HTML standard is being used. Without the doctype, browsers will interpret the document in slightly non-standard ways, especially if you use CSS. If you have no preference for any particular doctype, use HTML5:

<!DOCTYPE html>
<html>
    ...
</html>

Once you have declared a doctype, you can then run the code through an HTML validator, which will tell you everything else that is syntactially incorrect. For example, it's OK to say

<option selected="selected">...</option

or

<option selected>...</option>

but not

<option selected="true">

HTML is case-insensitive, but you should choose either uppercase or lowercase consistently anyway. Since XHTML mandates lowercase, I recommend using lowercase everywhere too, even if you are using HTML instead of XHTML.

Oddly, your form has no <form> tag.

share|improve this answer
3  
I can't believe I missed the missing <form></form> tags..... Face Palm –  Malachi Mar 18 at 5:06
    
Why did you use <P> instead of <p> ? Should not all tags be lowercase ? –  Marc-Andre Mar 19 at 18:31
2  
@Marc-Andre Yes, it should be lowercase. I only wrote <P> instead of <p> since I deferred mention of the lowercase issue until the end. –  200_success Mar 19 at 18:33
  1. You are missing ending paragraph tags
  2. your tags should be lowercase
    • I think that Uppercase is normal for straight HTML, but I suggest using something other than straight HTML. I suggest XHTML or HTML5, and in that case everything should be lowercase.
  3. be careful with your indentation.
    • When you go looking through code you want to be able to find things right away and know when one tag ends and another one starts.

With that it should look like this

<html>
 <body>
  <form>
   <h1>RESERVATION FORM</h1>
   <p>NAME<input type="TEXT" size="20" maxlength="99" /></p>
   <p>AGE<input type="TEXT" size="12" maxlength="99" /></p>
   <p>ADDRESS<input type="TEXT" size="42" maxlength="99" /></p>
   <p>EMAIL<input type="TEXT" size="30" maxlength="99" /></p>
   <p>TELEPHONE<input type="TEXT" size="10" maxlength="99" /></p>
   <p>SELECT YOUR BERTH </p>
   <select name="CHOICES" size="3">
    <option>TATKAL</option>
    <option>LADIES</option>
    <option>GENRAL</option>
   </select>
   <p>CITY</p>
   <select name="CITY">
    <option selected="selected">DELHI</option>
    <option>MUMBAI</option>
    <option>KOLKATA</option>
    <option>CHENNAI</option>
   <br/><br/>
   <input type="submit" value="click here to submit" />
   <input type="reset" value="clear this form" />
  </form>
 </body>
</html>

I don't like your input tags being nested inside of your paragraph tags either. You should replace this with label tags like this:

<label text="Name" />
<input type="text" size="20" maxlength="99" />
<label text="age" />
<input type="text" size="12" maxlength="99" />
<label text="Address" />
<input type="text" size="42" maxlength="99" />
<label text="Email" />
<input type="text" size="30" maxlength="99" />
<label text="Telephone" />
<input type="text" size="10" maxlength="99" />
<label text="Select Your Birth" />
....

This is the perfect reason to use a label tag instead of a paragraph tag. you may want to use some <br/> in there too, but that depends on what you are going to do CSS wise, if you are going to use CSS that is.

If you are going really old school you are going to want to set up some tables, but that wouldn't be good, so use CSS.


With the CSS you might want to Add some ID's or classes for the input tags and maybe the label tags as well, so that you can add styling to them. It would also be difficult to use some sort of code behind with this HTML unless you have some ID's associated with the controls that you want to change dynamically.


UPDATE

I added the form tags to this answer after I saw @200_Success's answer. I can't believe I missed the missing tags.

After all that, there are still many attributes missing in the other tags, and more things missing to make this fun registration form from working.


I changed my option tags so that they validate, I don't know what I was thinking. Maybe I was still in C# mode thinking or something.

share|improve this answer
    
<option selected="true"> fails validation. You can say <option selected="selected"> or <option selected>, depending on the HTML dialect. –  200_success Mar 20 at 2:29
    
Please feel free to edit it in, i am in bed trying to check email from my tablet, when i read that it clicked. I will fix it in the morning maybe if you don't named the change before then. Thanks @200_success –  Malachi Mar 20 at 3:59

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.