Hidden fields are not displayed by the browser, there are a number of uses for them. When dealing with forms you will usually find yourself using some sort of database mechanism: MySQL, SQL Server, or maybe justa plain text file. In any case use hidden forms to pass along information to your database that may have already been received from the user. In this rare case, a hidden form field may come in handy.

A hidden HTML field is used to pass along variables w/ values from one form to another page without forcing the user to re-enter the information. Use the type attribute to specify a hidden field.

HTML Code:

<input type="hidden" />

Hidden Fields:

There is no display of your hidden field in the box because the browser is told to hide them from view. Our field above is incomplete and pretty much useless as it is. Adding a name and a value attribute will change this.

HTML - Name and Value the Fields

Naming your fields can be accomplished in two different ways discussed previously. Use the id or name attribute to specify a name for your hidden field.

HTML Code:

<input type="hidden" id="age" name="age" value="23" />
<input type="hidden" id="DOB" name="DOB" value="01/01/70" />
<input type="hidden" id="admin" name="admin" value="1" />

Above we have demonstrated 3 possible hidden fields that you may want to pass along some form at some point, especially if you have any kind of user base where returning users must log in. The admin field could be used to check some sort of user level entry of a returning user; 1 being administrator and 0 being non-administrator access.
Use hidden fields when you have variables you want to pass from one form to another without forcing the user to re-type information over and over again.

Reset buttons exist to reset the fields of your form. These are handy for very large forms and the user is having difficulty or simply needs to start filling in the form from scratch.

HTML Code:

<input type="reset" value="Reset" />
<input type="reset" value="Start Over" />

Reset Button:

HTML Reset in Action

To actually make submit and reset buttons function with your other input fields. They need to be placed within a form tag. HTML Forms has some great examples of how to use the form tag properly.

HTML Code:

<form action="myphp.php" method="post">
<input type="text" size="12" maxlength="12" />
<input type="text" size="24" maxlength="24" />
<input type="reset" value="Reset" />
</form>

Reset Forms:

Fill out some information in the field boxes and press reset to experience a reset form!

Submission buttons are a type of <input /> tag. Set the type attribute to submit. This creates a special type of button in your forms that will perfom the form's set action. We learned about the action attribute in our HTML Forms lesson.

HTML Code:

<input type="submit" value="Submit" /><br />
<input type="submit" value="Send" /><br />
<input type="submit" value="Submit Form" /><br />

Submit Buttons:

Notice that in the above example we also changed what was written on our button using the value attribute. This can be changed to any value you wish.

Form Submission - Action

For a submission button to accomplish anything it must be placed inside of a form tag with an action and a method. The action is always set to a server side scripting file such as a PHP, PERL, or ASP file. Another choice may be to set the action to mailto followed by an email address, and the form will be emailed to the specified address.
Mailto has been depreciated, however for the purpose of this example and to get a feel for form submission, it will work great in our example.

HTML Code:

<form method="post" action="mailto:youremail@youremail.com" >
First:<input type="text" name="First" size="12 maxlength="12" />
Last:<input type="text" name="Last" size="24" maxlength="24" />
<input type="submit" value="Send Email" />
</form>

Form Action:

First:
Last:

Fill out the above form and as your mail program opens, you can change the email address to your email and then send yourself the results of your form.

Drop down lists are the basic selection forms. You have probably seen them already on the internet, maybe filling out a personal profile and selecting the state in which you live. Drop down lists have several options a user can select.

HTML Code:

<select>
<option>California -- CA</option>
<option>Colorado -- CO</option>
<option>Connecticut -- CN</option>
</select>

Drop Down List:

By default the first coded <option> will be displayed or selected as the default. We can change this using the selected attribute.

HTML Code:

<select>
<option>California -- CA</option>
<option>Colorado -- CO</option>
<option selected="yes">Conneticut -- CN</option>
</select>

Drop Down List:

HTML - Selection Forms

We use the size attribute to break out from the single displayed drop down list.

HTML Code:

<select size="3">
<option>California -- CA</option>
<option>Colorado -- CO</option>
<option>Connecticut -- CN</option>
</select>

Selection Forms:

HTML - Selecting Multiples

We can further add to our selection forms by adding the multiple attribute. This allows the user to select more than one entry from your selection forms. Obviously this attribute does not work with the single drop down lists.

HTML Code:

<select multiple="yes" size="3">
<option>California -- CA</option>
<option>Colorado -- CO</option>
<option>Connecticut -- CN</option>
</select>

Multiple Selections:

Now the user may select any or all states that apply to them.

Use an upload form to allow users to upload pictures, movies, or even their own webpages. An upload form is another type of input form, simply set the type attribute to file.

HTML Code:

<input type="file" />

Upload Form:

Max File Size

To limit the size of the file being uploaded and saving you precious webserver space. We make use of a hidden input field and set a few specific attributes.

HTML Code:

<input type="hidden" name="MAX_FILE_SIZE" value="500" />
< input type="file" />

Max File Size:

The value specified is the maximum allowable KB to be uploaded via this form. A value of 100 will allow a file up to 100kb.

Textareas retrieve "blog" type information from the user. Paragraphs, essays, or memos can by cut and pasted into textareas and submitted. Textareas have an opening and a closing tag, any words placed between them will appear inside your text area.

HTML Code:

<textarea>Text Area!</textarea>

Default Textarea:

Text Area!

HTML - Text area Cols and Rows

Adjusting the size of the appearance of the text area requires two attributes, cols and rows. Use a numeric value for each attribute and the larger the value the larger the field will appear.

HTML Code:

<textarea cols="20" rows="10">Text Area!</textarea>
<textarea cols="40" rows="2">Text Area!</textarea>
<textarea cols="45" rows="5">Text Area!</textarea>

Bigger Text Areas:

Text Area!
Text Area!
Text Area!

A text area could take up an entire page if required.

HTML - Textarea Wrap

The wrap attribute refers to how the text reacts when it reaches the end of each row in the text field. Wrapping can be one of three settings:

• soft
• hard
• off

Soft forces the words to wrap once inside the text area but when the form is submitted, the words will no longer appear as such (Line breaks will not be added).
Hard wraps the words inside the text box and places line breaks at the end of each line so that when the form is submitted it appears exactly as it does in the text box.
Off sets a textarea to ignore all wrapping and places the text into one ongoing line.

HTML Code:

<textarea cols="20" rows="5" wrap="hard">
As you can see many times word wrapping is often the desired 
look for your textareas. Since it makes everything nice and 
easy to read.
</textarea>

Text Area Wrapping:

As you can see many times word wrapping is often the desired look for your text areas. Since it makes everything nice and easy to read.

HTML Code:

<textarea cols="20" rows="5" wrap="off">
As you can see many times word wrapping is often the desired 
look for your textareas. Since it makes everything nice and 
easy to read.
</textarea>

No Wrapping:

As you can see many times word wrapping is often the desired look for your text areas. Since it makes everything nice and easy to read.

HTML - Textarea Readonly

Settting a yes or no value for the readonly attribute determines whether or not a viewer can manipulate the text inside the text field.

HTML Code:

<textarea cols="20" rows="5" wrap="hard" readonly="yes">
As you can see many times word wrapping is often the desired 
look for your text areas. Since it makes everything nice and 
easy to read.
</textarea>

Read Only Textareas:

As you can see many times word wrapping is often the desired look for your text areas. Since it makes everything nice and easy to read.

Now you may not change the text inside the text area. However, you can still highlight or Ctrl-C and copy the texts.

HTML - Disabled

As the readonly attribute disables text manipulation, we can take things one step further by setting the disabled attribute. This grays out the textarea altogether and inhibits any change in the text as well as text highlighting.

HTML Code:

<textarea cols="20" rows="5" wrap="hard" disabled="yes">
As you can see many times word wrapping is often the desired 
look for your text areas. Since it makes everything nice and 
easy to read.
</textarea>

Disabled Textareas:

As you can see many times word wrapping is often the desired look for your text areas. Since it makes everything nice and easy to read.

Radios are types of input forms that allow a user to pick an either/or type of selection. In order to achieve this, we must properly name each radio button selection accordingly. These types of forms must be named.

HTML Code:

Italian: <input type="radio" name="food" />
Greek: <input type="radio" name="food" />
Chinese: <input type="radio" name="food" />

Radios:

Italian:
Greek:
Chinese:

By naming these three radios "food" they are identified as being related by the browser and we achieve this either or effect (only being able to make one selection).
We can further expand this idea and name two different sets of radios.

HTML Code:

Italian: <input type="radio" name="food" />
Greek: <input type="radio" name="food" />
Chinese: <input type="radio" name="food" />

Male: <input type="radio" name="gender" />
Female: <input type="radio" name="gender" />

Multiple Radios:

Italian:
Greek:
Chinese:

Male:
Female:

Here we have two sets of radio selections contained within the same form.

HTML - Radio Checked

By using the checked attribute, we can tell our form to automatically "check" a default radio.

HTML Code:

Italian: <input type="radio" name="food" checked="yes" />
Greek: <input type="radio" name="food" />
Chinese: <input type="radio" name="food" />

Default Italian:

Italian:
Greek:
Chinese:

HTML Code:

Italian: <input type="radio" name="food"  />
Greek: <input type="radio" name="food" checked="yes" />
Chinese: <input type="radio" name="food" />

Default Greek:

Italian:
Greek:
Chinese:

HTML Code:

Italian: <input type="radio" name="food"  />
Greek: <input type="radio" name="food" />
Chinese: <input type="radio" name="food" checked="yes" />

Default Chinese:

Italian:
Greek:
Chinese:

Checkboxes are another type of <input /> form. We set the type attribute to check and we also must set a name and value attribute for them to be at all helpful.

HTML Code:

<p>Please select every sport that you play.</p>
Soccer: <input type="checkbox" name="sports" value="soccer"  /><br />
Football: <input type="checkbox" name="sports" value="football"  /><br />
Baseball: <input type="checkbox" name="sports" value="baseball"  /><br />
Basketball: <input type="checkbox" name="sports" value="basketball"  />

Checkboxes:

Please select every sport that you play.
Soccer:
Football:
Baseball:
Basketball:

Checkboxes are used for instances where a user may wish to select multiple options, a sort of check all that apply question.

HTML Checkboxes Selected

It is possible to precheck the input boxes for your viewers using the checked attribute. Simply set the checked attribute to yes or no.

HTML Code:

<p>Please select every sport that you play.</p>
Soccer: <input type="checkbox" checked="yes"
 name="sports" value="soccer" />
<br />
Football: <input type="checkbox" 
name="sports" value="football" />
<br />
Baseball: <input type="checkbox" 
name="sports" value="baseball" />
<br />
Basketball: <input type="checkbox" checked="yes" 
name="sports" value="basketball" />

Checked Checkboxes:

Please select every sport that you play.
Soccer:
Football:
Baseball:
Basketball:

Password fields are a special type of <input /> tag. All that we need to do is change the type attribute from text to password.

HTML Code:

<input type="password" size="5" maxlength="5" />
<input type="password" size="15" maxlength="15" />
<input type="password" size="25" maxlength="25" />

Password Fields:

The only difference between these fields and the normal text fields is that when you type into them, the browser hides the characters being typed; replacing them with dots, stars, or boxes.
Also, beaware that these fields are not encrypted and therefore are unsafe. Encryption occurs through the use of a scripting language.

Text fields are small rectangles that allow a user to simply input some text and submit that information to the web server.

This information is usually then processed through a server side scripting language such as PHP, PERL, or ASP.

HTML - Text Field Size

We can control the size of the text area by specifying the size attribute. The example below provides 3 different sizes for your text fields. The default size is around 20 characters long.

HTML Code:

<input type="text" size="5" />
<input type="text" size="15" />
<input type="text" size="25" />

Text Fields:

Changing the size attribute changes the size of the display of the text field on our site.

HTML - Text Field Maxlength

Without specifying a maxlength attribute, the viewer is able to type as many characters as they wish into the text field (even if you specify a size). To limit the number of characters a user can type into your fields, always specify a maxlength, generally this should match the size of your field.

HTML Code:

<input type="text" size="5" maxlength="5" />
<input type="text" size="15" maxlength="15" />
<input type="text" size="25" maxlength="25" />

Maxlength Attribute:

HTML - Text Field Value

Using the value attribute, we could pre-populate our text fields with some information. Later on as you develop your skills with a scripting language such as PHP, this will become more useful as you will be able to pre-populate text fields for returning users through the use of session variables.

HTML Code:

<input type="text" size="5" maxlength="5" value="55555" />
<input type="text" size="15" maxlength="15" value="Corndog" />
<input type="text" size="25" maxlength="25" value="Tizag Tutorials!" />

Input fields come in several flavors including checkboxes, text fields, radios, and form submission buttons. The <input /> tag does not require a closing tag and is thus an "all in one" tag.

HTML - The Type Attribute

To specify one type of input tag from another we set the type attribute to one of the following values.

• "text"
• "password"
• "checkbox"
• "radio"
• "submit"
• "reset"

HTML - Text Fields and Password Fields

You have seen many of these types of input forms throughout the internet.

HTML Code:

<input type="text" />
<input type="password" />

Text Fields and Passwords:

HTML - Checkboxes

Checkboxes allow the user to select multiple choices for a single question. A type of "check all that apply" question is best answered using a checkbox.

HTML Code:

<input type="checkbox" />
<input type="checkbox" /><input type="checkbox" />

Checkboxes:

HTML - Radios

Radios are best used in "multiple choice" type quizzes and questionaires. Where the user is only permitted to select one answer to a question.

HTML Code:

<input type="radio" />
<input type="radio" /><input type="radio" />

Radios:

HTML - Submit Buttons

Setting an input type to "submit" specifies a very unique button. When pressed, the button activates the action of the form whatever that may be. Most often times this is some sort of server side scripting file or a javascript function.
Since we are creatting a submission button. We need to introduce a new attribute, the value attribute. Anyword(s) specified as the value will be displayed on our button. Often it is best to stick with "Submit" or "Continue". Boring, yet effective.

HTML Code:

<input type="submit" value="Submit" />
<input type="submit" value="Continue Please!" />

Submit Buttons:

HTML - Reset Buttons

The final type of input is the reset button. Setting the type to reset will place a button within your form to reset each field when clicked. Users enjoy having a "start over" button such as the reset button in case they begin filling out the wrong information in a major way.

HTML Code:

<input type="reset" value="Reset Fields" />
<input type="reset" value="Start Over" />

Reset Buttons:

HTML - User Input

Input from the user is critical to the development of your websites and applications. Without the use of a scipting language such as PHP or Javascript, you will find HTML Input to be very limiting. Our PHP Form Example offers a step by step guide to mastering HTML/PHP forms. Feel free to copy any code you may find useful in that example.
The following lessons take a deeper look at each individual type of input field including those not mentioned: textareas, selection forms, and upload forms.

To place text onto your site that appears to be crossed out, we use the <del> tag.

HTML Code:

<p>This text is <del>scratched</del> out!</p>

Strikethrough:

This text is scratched out!

HTML - Check Off Tasks

Here's an example of a web developer checking off tasks as they are performed.

HTML Code:

<ol>
<li>Clean my room</li>
<li><del>Cook Dinner</del></li>
<li><del>Wash Dishes</del></li>
</ol>

To Do List:

1. Clean my room
2. Cook Dinner
3. Wash Dishes

Use the subscript tags to place subscripted text onto your websites.

HTML Code:

<p>This text is <sub>subscripted!</sub></p>

Subscripted:

This text is _subscripted!

HTML - Chemical Compounds

This tag allows for the creation of chemical compounds.

HTML Code:

<p>H<sub>2</sub>0 - Water
<p>O<sub>2</sub> - Oxygen
<p>CO<sub>2</sub> - Carbon Dioxide

Chemical Compounds:

H₂O - Water
O₂ - Oxygen
CO₂ - Carbon Dioxide

Superscripted text can be placed onto your website using the <sup> tag. You may id these tags for use with Cascading Style Sheets.

HTML Code:

<p>This text is <sup>superscripted!</sup></p>

Superscript:

This text is ^{superscripted!}

HTML - Exponents

We may use the superscripting technique to express exponential expressions.

HTML Code:

2<sup>3</sup> = 8
14<sup>x</sup>

Exponents:

2³ = 8
14^x

HTML - Footnotes

You may have come across several texts where a referencing, superscripting directs your attention to the bottom of the page. These footnotes can also be created with the superscript tag.

HTML Code:

<p>"It was a lover's tryst<sup>1</sup>."
<hr />
1. Secret meeting between lovers

Footnotes:

"It was a lover's tryst¹."

---

1. Secret meeting between lovers

A web browser interprets your html document as being one long line. Sure, you may have tabs and line breaks in notepad aligning your content so it is easier to read for you the web master your browser ignores those tabs and line breaks.

We showed you one way to get around this by using the ltbr /> tag. Tabs and spacing are quite different, and absolutely annoying at times. One simple solution might be to use the <pre> tag, standing for previously formatted text.
Use the <pre> tag for any special circumstances where you wish to have the text appear exactly as it is typed. Spaces, tabs, and line breaks that exist in your actual code will be preserved with the pre tag.

HTML Code:

<pre>
Roses are Red,
     Violets are blue,
I may sound crazy,
     But I love you!
</pre>

Preformatted Text:

Roses are Red,
     Violets are blue,
I may sound crazy,
     But I love you!

The code tag allows you to specify some of your text as computer code. This simply changes the font face, size, and letter spacing to give the text the feel of being computer code.

You may have noticed that nearly all of our examples thus far use the computer code tag when displaying each HTML Code example.

HTML Code:

This text has been formatted to be computer <code>code</code>!

Computer Code:

This text has been formatted to be computer code!

Use this tag to separate any computer code you wish to display on your website. It is not always necessary, but the tag exists if you so desire.

HTML - Code Links

Another use may be to separate links on your page and give them a unique look. This tag provides a very quick way to accomplish this.

HTML Code:

<p>Feel free to search <a href="http://www.google.com" target="_blank">
<code>Google</code>
</a> for 
anything you wish to find on the internet.</p>

Code Links:

Feel free to search Google for anything you wish to find on the internet.

The italics tags should be used to highlight a key word or phrase. These tags are not intended to to stylize or shape your font face. Rather, use them to emphasize text or words.

HTML Code:

Italic <i>tag</i>!
<em>Emphasized</em> Text!
Create a <blockquote>blockquote</blockquote>!
Format your <address>addresses</address>!

HTML Italics:

Italic tag!
Emphasized Text!
Create a blockquote!
Format your addresses!

Each of the above tags is generally interpretted by the browser in a similar way. The two commonly used tags to place italics onto a website are <em> and <i>. They are short and sweet.

HTML Code:

<b>HTML</b>
<i>Hyper Text Markup Language</i>

or

<b>HTML</b>
<em>Hyper Text Markup Language</em>

HTML Dictionary:

HTML
Hyper Text Markup Language

or

HTML
Hyper Text Markup Language

As you can see, the output is the same regardless of what tag we used to emphasize our definitions.

HTML Bold and Italics

Both the <b> and the <i> tags can be placed within other elements to format your texts. They can also be used together to bold and italisize words or phrases. Nothing fancy here, just be sure you open and close the tags in the same order.

HTML Code:

<p>Phillip M. Rogerson <b><i>MD</i></b></p>

Display:

Phillip M. Rogerson MD

This is brilliant when placing text links directly inside your paragraphs as a reference to the user.

HTML Code:

<p>Include several external 
links throughout your texts as references to your viewers, 
we will discuss 
<a href="" target="_blank" title="Tizag Links">
<b><i>HTML Links</i></b>
</a>
 in a later lesson.</p>

Format Links:

Include several external links throughout your texts as references to your viewers, we will discuss HTML Links in a later lesson.

As you can see, the code becomes quite complex as you begin to place more and more tags on the board. Be assured that once you learn Cascading Style Sheets the code will become simpler.

Creating bold text can be accomplished through the use of the <b> bold tag.

HTML Code:

<b>This text is entirely BOLD!</b>

Bold:

This text is entirely BOLD!

Place the bold tag inside other elements to highlight important words and give feeling to your text.

HTML Code:

<p><b>Don't</b> touch that!</p>

More Bold:

Don't touch that!

You may also use it to separate words from their meaning in a dictionary fashion.

HTML Code:

<p><b>Cardio:</b> Latin word meaning of the heart.</p>

Dictionary:

Cardio: Latin word meaning of the heart.

The idea here is to use the bold tag in quick formatting situations. It is not a good idea to bold entire paragraphs or other elements simply because you want the text to be larger or fatter. Use Cascading Style Sheets for font styles and sizes.

The <div> tag is nothing more than a container for other tags. Much like the body tag, Div elements are block elements and work behind the scenes grouping other tags together. Use only the following attributes with your div element, anything else should be reserved for CSS. (CSS Tutorial)

• id
• width
• height
• title
• style

For the purpose of this example, we have included the style attribute in order to color our div tag in order to bring a stronger visualization for our viewers.

HTML Code:

<body>
<div style="background: green">
<h5 >SEARCH LINKS</h5>
<a target="_blank" href="http://www.google.com">Google</a>
</div>
</body>

HTML Div Element:

SEARCH LINKS

Google

Above is a great visual about how a div plays the role of a container for other HTML elements, applying a background color/image is the only real way to visualize your div tags.

HTML - Div Layouts

When HTML first began, web creators only had two choices. A table layout, or frames. The div element provides a 3rd alternative, since a div can contain any/every other type of html element within its beginning and ending tag.

HTML Code:

<div id="menu" align="right" >
<a href="">HOME</a> | 
<a href="">CONTACT</a> | 
<a href="">ABOUT</a>
</div>

<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>This paragraph would be your content
 paragraph with all of your readable material.</p>
</div>

HTML Div Layout:

HOME | CONTACT | ABOUT

Content Articles

This paragraph would be your content paragraph with all of your readable material.

Advanced web developers find div elements to be far easier to work with than tables, adding more content or more links to our previous example might demonstrates why a div is simpler to work with.
Let's add a "LINKS" page to our menu, and another article of content below the existing content.

HTML Code:

<div id="menu" align="right" >
<a href="">HOME</a> | 
<a href="">CONTACT</a> | 
<a href="">ABOUT</a> |
<a href="">LINKS</a>
</div>

<div id="content" align="left" >
<h5>Content Articles</h5>
<p>This paragraph would be your content
 paragraph with all of your readable material.</p>
<h5 >Content Article Number Two</h5>
<p>Here's another content article right here.</p>
</div>

HTML Div Layout II:

HOME | CONTACT | ABOUT | LINKS

Content Articles

This paragraph would be your content paragraph with all of your readable material.

Content Article Number Two

Here's another content article right here.

As we mentioned, the body tag serves as the element containing all the content for the website. Tables, Lists, Forms, Paragraphs, everything must be placed within the body element to be displayed on your site.

HTML - Body Margins

Unique Attributes

leftmargin

Sets a lefthand margin for your body element.

topmargin

Sets a margin along the top of your body element.

---

A unique set of margin attributes are available to the body tag. These attributes work much like those of a word processing program, allowing you set a pixel value margin for the left, right, top, or bottom of your website. Setting these attributes means that all the content you place within your body tags will honor the preset margin.

HTML Code:

<body topmargin="50">
<body leftmargin="50">

Margin Examples:

Top Margin
Left Margin

HTML - Base Text

The text attribute sets the text color of all text contained within the body tags. Think of it as a means to set the color of your text 'unless otherwise noted'. Basically you set a base color scheme and then you may use other means to modify the text color as needed in your site.

HTML Code:

<body text="red" >
or
<body text="rgb(255,0,0)" >

HTML - Base Links

Along the same lines, we may also specify base colors for visted or unvisted links. This method has deprecated, we recommend using Cascading Style Sheets instead.

HTML Code:

<body link="white" vlink="black" >

or
<body link="rgb(255,255,255)" vlink="rgb(0,0,0)" >

Setting a baselink is a great way to ensure your viewers will not receive that annoying error message that occurs with broken links.