sir pats sirpats online on-line dennis patino patiņo patiŅo dennis cesar patino dennis cesar patiņo dennis cesar patiŅo dennispatino cesar flash mx visual basic asp active server pages sql structured query language tutorials 820 skylab mobile maiq millares michael millares lights and sounds rentals bubble fog machine follow spot skyrose effects intelligent lights party woofer dlsz de la salle santiago zobel university manila philippines las pinas piņas PIŅAS maiq millares raymond nebres gary dy
>>> search  
1 online       
DEFINING A FORM

To create or define a form, use <form></form>.

<form></form> ATTRIBUTES

  • action - the address of the script to process this form input.
  • method - how the form will be sent to the server. Normally set to POST, rather than GET.
  • name - the name of the form object. The form name is important when its data is accessed by a script.

Example:

<html>
<body>
<form name="guestbook" method="post"
      action="mailto:sirpats@sirpats.com">
.
.
.
</form>
</body>
</html>

The code above will create a form that will create an email containing the form data to be sent to sirpats@sirpats.com.  If you have internet connection and your email program is correctly configured, the email containing the data will be sent.

Another way of processing form data is by sending it to a script (ex., ASP, CGI, etc.) saved in a server or by using Javascript.  For the moment, do not concern yourself with the ACTION and METHOD attribute.

FORM INPUT: The <input> Tag

The <input> tag is used to insert an input element.
(input element - part of the form that accepts input)

<input> ATTRIBUTES

  • type - the type of this input element. (type="button" sets this input element to be used as a button.)

    Possible values are button, reset, submit, checkbox, radio, hidden, password, text, or image.
  • name - the name of this item (input element), which will be passed to a script.
  • value - for a text or hidden item, the default value; for a checkbox or radio button, the value to be submitted with the form; for button, reset or submit, the label for the button itself.
  • src - the source file for an image.
  • checked - for check boxes and radio buttons, indicates that this item is checked.
  • size - the width, in characters, of a text input region.
  • maxlength - the maximum number of characters that can be entered into a text region.
  • align - for images in forms, determines how the text and image will align.
THE <INPUT> TAG: Creating Text Boxes

The <input> tag is used to create a text box (or text input field).

Example:

<form name="guestbook">
What is your name? <input type="text" name="guestname" size="30" maxlength="30" value="enter your name "><br>
What is your e-mail address? <input type="text" name="guestemail" size="30" maxlength="50" value="enter your email ">
</form>

the code above results to:

What is your name?
What is your e-mail address?

 

The name of the text box is guestname.
The size or width of the text box is 30.
The maximum length of the input it can accept is 30.
The default value is enter your name.

Try it!
Edit the HTML code below.  Click View Web Page to view the result.

 

THE <INPUT> TAG: Creating Buttons

Use the <input> tag is used to create a button.

Example:

<form name="guestbook" method="post" action="mailto:sirpats@sirpats.com">
What is your name? <input type="text" name="guestname" size="30" maxlength="30" value="enter your name "><br>
What is your e-mail address? <input type="text" name="guestemail" size="30" maxlength="50" value="enter your email "><br>
<input type="submit" name="submit" value="Click here to Submit">
<input type="reset" name="clear" value="Click here to Reset">
</form>

the code above results to:

What is your name?
What is your e-mail address?

 

Clicking the SUBMIT button will send the form data via e-mail to sirpats@sirpats.com.
Clicking the RESET button will reset the values of the textboxes back to their original values.

Try it!
Edit the HTML code below.  Click View Web Page to view the result.

THE <INPUT> TAG: Creating Check Boxes

Use the <input> tag is used to create check boxes.

Example:

<form>
<input type="checkbox" name="ilikeit" CHECKED> I really liked your website<br>
<input type="checkbox" name="best"> One of the best site I've seen<br>
<input type="checkbox" name="itsucks"> Your site rocks!
</form>

the code above results to:

I really liked your website
One of the best site I've seen
Your site rocks!

Try it!
Edit the HTML code below.  Click View Web Page to view the result.

THE <INPUT> TAG: Creating Radio Buttons

Use the <input> tag is used to create check boxes.

Example:

<form>
What is the meaning of HTML?<br>
<input type="radio" name="ans" checked> Hypertext Language<br>
<input type="radio" name="ans"> Hypertext Markup Language<br>
<input type="radio" name="ans"> Hotmail
</form>

the code above results to:

What is the meaning of HTML?
Hypertext Language
Hypertext Markup Language
Hotmail

Note that all radio buttons have the same name. This is to limit the user to select only one.
Use different names to allow multiple selections.

Try it!
Edit the HTML code below.  Click View Web Page to view the result.

MULTILINE TEXT INPUT: The <textarea></textarea> Tag

The <textarea></textarea> is used to insert a multiline text entry form element.

<textarea></textarea> ATTRIBUTES

  • name - the name to be passed to the script.
  • rows - the number of rows this text area displays.
  • cols - the number of columns (characters) this text area displays.

Example:

<form>
What do you think of my site?<br>
<textarea name="opinion" rows="5" cols="50"></textarea>
</form>

What do you think of my site?

 
SCROLLING MENU: The <select></select> Tag

The <select></select> is used to insert a scrolling menu.

<select></select> ATTRIBUTES

  • name - the name that is passed to the script.
  • size - the number of elements to display. (size=2 creates a scrolling list displaying two items at a time. If no size is indicated, the scrolling menu becomes a pop-up menu)
  • multiple - allows multiple selections from the list.

Example:

<form>
What is the meaning of HTML?<br>
<select size=1 name="answer">
<option value="a" selected>Hypertext Language
<option value="b">Hypertext Markup Language
<option value="c">Hotmail
</select>
</form>

The code above results to:

What is the meaning of HTML?

 

The <option> is used to insert an item in the scrolling menu.

<option> ATTRIBUTES

  • selected - including this attribute will make this item the selected item by default.
  • value - the value to submit if this item is selected when the form is submitted.

Try it!
Edit the HTML code below.  Click View Web Page to view the result.


You might want to see Using JavaScript with Forms.

 

Seatwork

Fill in the blanks.
Supply the missing word(s) to complete the sentence.

  1. Use ______________ and ______________ to create a form.
  2. Use ______________ to create textboxes, radio buttons, and checkboxes.
  3. Use ______________ and ______________ to create a scrolling menu.
  4. The ______________ is placed before each item in a scrolling menu.
  5. Use ______________ and ______________ to create a text area.
  6. Use the ______________ property in naming forms and input elements.
  7. The ______________ of each radio button in a set should be the same.
  8. Use the ______________ and ______________ properties to set the size of a text area.
  9. Use the ______________ property to set the length of a text box.
  10. Use the ______________ property to set the maximum number of characters a textbox can accept.