Html Tips and Tricks

Sunday, June 20, 2004

Create More Advanced Forms

Here is how to create a basic form.

Maybe you want to create a better form, so here are some more advanced html tips.
Before I start, please make sure that you change the e-mail adress in the form code.

Also, if your form does not work, try cramming the form code into one line.

Okay, so here was the code for the "basic form"
<FORM action="mailto:nilsmolina@comcast.net" method="post" enctype="text/plain">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%">
<TR>
<TD width="30%"><DIV align="right">
<B>Name:</B>
</DIV>
</TD>
<TD width="70%">
<INPUT type="text" name="name" size="20">
</TD>
</TR>
<TR>
<TD>
<DIV align="right"><B>Email:</B></DIV>
</TD>
<TD>
<INPUT type="text" name="email" size="20">
</TD>
</TR>
<TR>
<TD>
<DIV align="right">
<B>Comment:</B>
</DIV>
</TD>
<TD>
<TEXTAREA name="comment" cols="30" wrap="virtual"rows="4">
</TEXTAREA>
</TD></TR>
<TR>
<TD>&nbsp;</TD>
<TD>
<INPUT type="submit" name="submit" value="Submit">
<INPUT type="reset" name="reset" value="Reset">
</TD></TR>
</TABLE>
</FORM>


How about we first remove the name and e-mail, though if you want you can keep it.
Let's also remove the comment label, the table...
Let's just keep the box and the submit and reset buttons.
The code changes like this:
<FORM action="mailto:nilsmolina@comcast.net" method="post" enctype="text/plain">
<TEXTAREA name="comment" cols="30" wrap="virtual"rows="4">
</TEXTAREA>
<br>
<INPUT type="submit" name="submit" value="Submit">
<INPUT type="reset" name="reset" value="Reset">
</FORM>


This changes the form to this:



Now we have a simplified form. Let's put text in the box:
<FORM action="mailto:nilsmolina@comcast.net" method="post" enctype="text/plain">
<TEXTAREA name="comment" cols="30" wrap="virtual"rows="4">
Here is my comment...
</TEXTAREA>
<br>
<INPUT type="submit" name="submit" value="Submit">
<INPUT type="reset" name="reset" value="Reset">
</FORM>

And the form becomes changed like this:


Let's change the size of the box:
<FORM action="mailto:nilsmolina@comcast.net" method="post" enctype="text/plain">
<TEXTAREA name="comment" cols="20" wrap="virtual"rows="2">
Here is my comment...
</TEXTAREA>
<br>
<INPUT type="submit" name="submit" value="Submit">
<INPUT type="reset" name="reset" value="Reset">
</FORM>

And the form becomes this:



Now, let's make little circles instead of a box, like this:
This is a good website.
This is a bad website.
I don't know.

We changed the code like this:
<form action="mailto:nilsmolina@comcast.net"
method="post"enctype="text/plain">
<input type="radio" value="Yes" name="cloning">This is a good website.
<br>
<input type="radio" value="No" name="cloning">This is a bad website.
<br>
<input type="radio" value="Question" name="cloning">I don't know.
<br>

< input type="submit" name="submit" value="submit">
<input type="reset" name="reset" value="Reset">
</form>

See that if someone click on, for example, this is a good website, then "YES" is returned to the adress nilsmolina@comcast.net.
Radio means those little circles.
You can also combine a box and radios.
Let's look at checkboxes.
Here is the code for checkboxes:
<input type="checkbox" name="option1" value="Milk"> Milk<br>
<input type="checkbox" name="option2" value="Butter" checked> Butter<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>

To put the code into a form, do this:
<form action="mailto:nilsmolina@comcast.net"
method="post"enctype="text/plain">
<input type="checkbox" name="option1" value="Milk"> Milk<br>
<input type="checkbox" name="option2" value="Butter" checked> Butter<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>

<input type="submit" name="submit" value="submit">
<input type="reset" name="reset" value="Reset">
</form>

Now you get a nice form like this:
Milk
Butter
Cheese

Note that checked made the box checked.
Finally, you can also change what the buttons say, instead of boring submit, and reset, by changing the submit/reset in value="Submit"/value="Reset".
Now you can have great forms with these html tips!!!


NEED EXTRA HELP? HAVE A SUGGESTION? HAVE SOMETHING TO ADD? PLEASE POST COMMENTS WHILE LOOKING AT ALL THESE USEFUL HTML TIPS AND TRICKS. THANK YOU!

15 Comments:

  • every time i click on submit, a yahoo windows comes up tellimg me to log in so i can send the comment

    how can i prevent that?

    By Anonymous Anonymous, at July 16, 2005  

  • The reason that Yahoo asked you to log in is because the comment is sent through the form of an e-mail. Preventing this requires more advanced programming--beyond HTML--that blogspot does not support.

    By Blogger nilsmo, at August 10, 2005  

  • Thanks for the tip, I wanted to create a log of a form at the server end which uses mailto! (i.e/ it should mail at the same time create a log file!) Is this possible?

    By Anonymous Anonymous, at March 28, 2009  

  • I have a form all set up and ready to go, but when the form is submitted via e-mail no matter what program (yahoo, hotmail, comcast) it mails it through I receive a blank document. Any ideas on what is going wrong?

    By Anonymous Anonymous, at April 07, 2009  

  • can you tell me in detailed regarding email changes code ???

    please im very thank full .
    my id u can contact on akim359@gmail.com

    By Anonymous psd to html conversion, at June 29, 2012  

  • A fast check at the consummation of written work your exposition can guarantee over here that you have utilized the right tense all through the exposition.

    By Blogger ADmin, at March 08, 2013  

  • Truth be told, it this site could be an exceptionally fun and satisfying methodology.

    By Blogger ADmin, at March 14, 2013  

  • Thanks for sharing your good thoughts and idea here.are you struggling with your essays Just continue on sharing your talent and creation to us readers. There are valuable information. Thanks for sharing.

    By Blogger Arsalan Yousuf, at July 27, 2013  

  • Advanced forms? This is something I definitely want to learn. Do you have any other little tutorials we should all be interested in? I've also found some helpful information on this writing services source.

    By Blogger a.danna, at August 19, 2013  

  • You have an awesome blog! Keep up the good work...

    By Anonymous optionbinairebiz.com/, at September 17, 2013  

  • wow nice , its really helpfull

    Try this HTML Tutorials http://mkmovietrailer.blogspot.com/2013/09/html-tutorials.html

    By Anonymous M K D tutorials, at October 30, 2013  

  • This html code to create form is really very easy to make..Thanks a lot for this help..Essay writing service

    By Blogger Unknown, at June 04, 2015  

  • Everybody presently incorporates a veranda connected with some sort. All of us love the appearance on the completely new garden furniture which the makers deliver. It will be easy to examine pics of all pieces of furniture they have on the market. It will be easy to examine a detailed summation on the solution, in addition to the size in addition to anything of which you have got to learn. Now and again, it will be easy to examine health care guidance. To know more kitchen and patio

    By Blogger Unknown, at July 25, 2015  

  • Still I am developing a website for best essay writing service UK. My clients asked me to add some user friendly options in it. I have some doubts while creating its front end and your post shares some good solutions for me to make changes in its HTML codes.

    By Blogger Unknown, at March 05, 2016  

  • I love your post which explains things in a very elaborate and simple way. I think i have grasped most of what i needed to know about html, i highly appreciate your work. Keep up!
    condolences letter help

    By Blogger expertshelp, at March 22, 2016  

Post a Comment

<< Home


Hit Counter