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:

Here is my comment...

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:

Here is my comment...

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!!!