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> </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:

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:

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

Page Fading: Internet Explorer

Did this page fade when you came into it? If it didn't you are probably using a browser other than Internet Explorer (or HTML Tips is your home page, which is highly unlikely).

That fade was accomplished using this command in the head of the HTML code (crammed onto 1 line):

<meta http-equiv="Page-Enter" content="blendTrans(Duration=2.0)">

This "blends" the page in for 2.0 seconds when it is entered.

You can change the Page-Enter to Page-Exit, Site-Enter, or Site-Exit. Also, you can change the "blendTrans(Duration=2.0)" to:

"revealTrans(Duration=2.0,Transition=2)" for Circle In

"revealTrans(Duration=2.0,Transition=5)" for Wipe Down

or

"revealTrans(Duration=2.0,Transition=10)" for Checkerboard Across.

Change the Duration=2.0 to a different number for a longer or shorter transition (in seconds).

Change the Transition=2 to a different number for a different transition.

Make your site more interesting and beautiful using this tip!

NOTE FROM GEOFFREY: This tip only works in Internet Explorer. Also, it does not work when a site is your homepage (there is nothing to transition from).

Background Color

Replace the <body> tag with this:

<body bgcolor="#00FFFF">

It will make your web page have a light blue background color.

Change the #00FFFF to one of these to have a different background color:

#FFFF00=Yellow

#FF66FF=Purple

#FF6699=Pink

#FF6600=Orange

#FF0000=Red

#CCFF99=Green

#CC6600=Brown

#99CCFF=Blue

#6600FF=Dark Blue

#000000=Black

#FFFFFF=White

Here is an example of a web page using this html tip.

Internet Explorer: Background Sound

If you have internet explorer, then you can use this tip.

This tip should be used right after the <head>:

Insert this code onto ONE line:

<bgsound src="http://home.comcast.net/~nilsmolina/Hecho.wav" loop="-1">

And you will get background sound like this.

Change the url for a different sound location.

Change the loop number if you would like to specify the amount of loops the sound should play.

That is how to add background sound.

Prevent Browsers from Caching

Many browsers know that people don't always have 3 megabit connections to the internet (why are you staring at me), so they save websites onto their viewer's computer. Then, when the viewer visits the website again, the browser puts the outdated version of the web page it has saved in front of the viewer. This process is called caching. If your page is constantly updated, it is usually a bad idea to have browsers cache your website. Therefore you will need this html tip:

Put this code right after the <head>:

<META HTTP-EQUIV="Expires" CONTENT="Tue, 01 Jan 1980 1:00:00 GMT">

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

Do not worry about the queer date, but worry about putting the code onto the least lines as possible. Your page will now probably never be cached again!

This web page also never gets cached.

Put in a Tiled Background

Many people want backgrounds.

So here is an html tip for it.

Change your body tag (<body>) to...

<body background="https://home.comcast.net/

~nilsmolina/0rrgobve%5B1%5D.jpg">

(make sure the above code is on one line once inserted)

Your website will look something like this

To change the little background image, change the url (http://...).

That is how to put in a tiled background.

Justify Text

Look at the code for justifying text:

<p align="justify">bla bla bla bla blablabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

</p>

It creates this justified text:

bla bla bla bla bla bla blablabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

(Unjustified text:

bla bla bla bla bla bla bla bla bla bla bla blablabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

See the difference?)

That is how you justify text.

Learn how to align text here

Align Text/Images

To align text to the right insert this code:

<p align=right>aligning text with this tip</p>

It will create this:

aligning text with this tip

If you would like to align the text to the left or center instead, change the right to left or center.

More tips for formatting text

Learn how to justify text here

...to align images use the following html tip:

Here is a normal image:

html code=

<img src=http://www.google.com/images/logo.gif>

output=

Here is an image aligned to the right:

html code=

<img src=http://www.google.com/images/logo.gif align=right>

output=

To make an image centered, change the right to center.

You can also change the right to left.

Make sure you check out the various other html tips on images!

Javascript: Print This Page

This html tip will put the page on paper.

The code for a print this page link is:

<a href="#"

onkeypress="javascript:if (window.print !=

null)window.print();return false"

onclick="javascript:if (window.print !=

null)window.print();return false"

title="Print this Page - or select File and Then Print from your

browsers menu">Print

This Page</a>

If that code is copied and pasted onto one line, it will create a link like this:

Print This Page

Now you can have viewers print your pages!

Building a Web Page From Scratch

Delete all the html code you have for your web page if you want to start your page from scratch!
To start a web page from scratch with html insert this code:
<html>
<head>
</head>
<body>
</body>
</html>
After you have done this, you can look at the html tips provided at this web page and use them between the
<body>
and
</body>
tags.
I suggest looking at this tip first.
Remember that to make a link, you use this code:
<a href="http://htmltips.blogspot.com">Link</a>
The link will look like this:
Link
Also, you may want to look at the tips about images on this site.

Also, to make new lines, look at this tip.
NOTE: Some tips may need to go between the <head> and </head> . For example, all tips which use meta go in the head.