10
\$\begingroup\$

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>
\$\endgroup\$
2
  • 2
    \$\begingroup\$ "What should I do to add attractive looks" - Add a CSS stylesheet \$\endgroup\$
    – ChrisW
    Commented Mar 18, 2014 at 5:14
  • 2
    \$\begingroup\$ "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. \$\endgroup\$
    – ChrisW
    Commented Mar 18, 2014 at 5:17

2 Answers 2

Reset to default
12
\$\begingroup\$

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.

\$\endgroup\$
3
  • 3
    \$\begingroup\$ I can't believe I missed the missing <form></form> tags..... Face Palm \$\endgroup\$
    – Malachi
    Commented Mar 18, 2014 at 5:06
  • \$\begingroup\$ Why did you use <P> instead of <p> ? Should not all tags be lowercase ? \$\endgroup\$
    – Marc-Andre
    Commented Mar 19, 2014 at 18:31
  • 2
    \$\begingroup\$ @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. \$\endgroup\$
    – 200_success
    Commented Mar 19, 2014 at 18:33
11
\$\begingroup\$
  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.

\$\endgroup\$
1
  • \$\begingroup\$ <option selected="true"> fails validation. You can say <option selected="selected"> or <option selected>, depending on the HTML dialect. \$\endgroup\$
    – 200_success
    Commented Mar 20, 2014 at 2:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.