SheerPower® 4GL
A Guide to the SheerPower Language
Previous Contents Index

9.4.2 Form Tags

9.4.2.1 FORM

<form>. . . </form>

The FORM tag defines an input form.

Example 9-15 <form >... </form > tag 

  form$ = '<form>' 
  form$ = form$ + 'Name <input type=text name=name ><br>' 
  form$ = form$ + 'Address <input type=text name=address ><br>' 
  form$ = form$ + 'City <input type=text name=city><br>' 
  form$ = form$ + 'State <input type=text name=state><br>' 
  form$ = form$ + 'Country <input type=text name=country><br>' 
  form$ = form$ + '</form>'
  input dialogbox form$: response$ 
  end

9.4.2.2 ANCHORS

<a>...</a>

The ANCHOR tags can be used to insert a clickable link inside a form. Clicking on the text link will open a web browser to the URL indicated inside the anchor tags.

Example 9-16 <a >... </a > tag 

  f$ = '<form><a href="http://www.cnn.com">News Link</a></form>' 
  input dialogbox f$: a$ 
  end

9.4.2.3 INPUT

<input>

The INPUT tag is used to specify a simple input element inside a form. There is no terminating INPUT tag.

Example 9-17 <input > tag 

  form$ = '<form>' 
  form$ = form$ + 'Name: <input type=text name=name><br>' 
  form$ = form$ + 'Telephone: <input type=text name=telephone><br>' 
  form$ = form$ + '</form>' 
  input dialogbox form$: response$ 
  end

INPUT Tag Attributes

Table 9-2 INPUT Tag Attributes
Attribute Function
type see list below for type attributes
name symbolic name for this input field
value can be used to specify the default contents of the field; also specifies the value of a checkbox or radio button when it is checked
checked specifies that this checkbox or radio button is checked by default; this is only appropriate for checkboxes and radio buttons
size the physical size of the input field in characters
maxlength the maximum number of characters that are accepted as input
message message text displayed when hovering over input field

The TYPE attributes are:

Example 9-18 <input > tag attributes 

  test$ = '<form>' 
  test$ = test$ + 'Male<input type=radio name=gender><br>' 
  test$ = test$ + 'Female<input type=radio name=gender checked><br>' 
  test$ = test$ + 'Place a check in this box:<input type=checkbox name=check><br>'  
  test$ = test$ + 'Name:<input type=text name=name size=10 value="Tester"><br>' 
  test$ = test$ + 'Country of residence:<input type=text name=country message="type here" size=30><br>' 
  test$ = test$ + 'Password:<input type=password name=password message="secret!" maxlength=5><br>'   
  test$ = test$ + '<input type=hidden name=test_form_only value=complete><p>' 
  test$ = test$ + '<input type=submit name=submit value="Send Info">' 
  test$ = test$ + '</form>' 
  input dialogbox test$: answer$ 
  end

9.4.2.4 Creating Custom SUBMIT Buttons

The default SUBMIT buttons are:

To create your own custom submit buttons insert the following HTML code inside your form code: 


  <input type=submit name=submit value="Send Info">

The same can be done to custom create your own Exit, Help and Back buttons.

You can place the submit buttons whereever you want on the form.

Example 9-19 Custom Submit Buttons 

  form$ = '<form>' 
  form$ = form$ + '<h2>Test Question</h2><p>' 
  form$ = form$ + '1. Solve the following equation: <b>1=sin(3x) - cos(6x)</b>' 
  form$ = form$ + '<p>Type in your final answer inside the space provided below.<p>' 
  form$ = form$ + '<input type=text name=solution value="type your solution here"><p>' 
  form$ = form$ + '<input type=submit name=submit value="Send my solution!">' 
  form$ = form$ + '<input type=submit name=exit value="Uh-Uh! Get me outta here!">' 
  form$ = form$ + '<input type=submit name=help value="Help...me....">' 
  form$ = form$ + '<input type=submit name=back value="Back up!">' 
  form$ = form$ + '</form>' 
  input dialogbox form$: ans$ 
  end

9.4.2.5 Image Submit Buttons

Images can be used for submit buttons in INPUT DIALOGBOX. The format is: 


  <input type=submit name=submit src="url_of_image.jpg">

Example 9-20 Image Submit Buttons 

  img_location$ = 'sheerpower:samples' 
  form$ = '<form>' 
  form$ = form$ + '<sheerpower color="white">' 
  form$ = form$ + '<h2>Test Question</h2><p>' 
  form$ = form$ + '1. Solve the following equation: <b>1=sin(3x) - cos(6x)</b>' 
  form$ = form$ + '<p>Type in your final answer inside the space provided below.<p>' 
  form$ = form$ + '<input type=text name=solution value="type your solution here">' 
  form$ = form$ + '<input type=submit name=submit src="'+ img_location$ + '\help_submit.jpg">' 
  form$ = form$ + '</form>' 
  input dialogbox form$: ans$ 
  end

9.4.2.6 SELECT

<select>...</select>

The SELECT tag creates a drop down menu inside a form. Inside SELECT, only a sequence of OPTION tags is allowed. Each sequence can be followed by an arbitrary amount of plain text.

Example 9-21 <select >... </select > tag 

  form_menu$ = '<form>' 
  form_menu$ = form_menu$ + 'City: <select name=city>' 
  form_menu$ = form_menu$ + '<option value="San Diego">San Diego, CA' 
  form_menu$ = form_menu$ + '<option value="Las Vegas">Las Vegas, NV' 
  form_menu$ = form_menu$ + '<option value="Minneapolis">Minneapolis, MN' 
  form_menu$ = form_menu$ + '</select>'
  form_menu$ = form_menu$ + '</form>' 
  input dialogbox form_menu$: choice$ 
  end

SELECT Tag Attributes

Table 9-3 SELECT Tag Attributes
Attribute Function
name the symbolic name for this SELECT element (must be present)
size the value of SIZE then determines how many items will be visible
multiple if present (no value), specifies that the SELECT should allow multiple selections (n of many behavior)

Example 9-22 <select > tag and attributes 

  form_menu$ = '<form>' 
  form_menu$ = form_menu$ + 'City: <select multiple size=2 name=city>' 
  form_menu$ = form_menu$ + '<option value="San Diego">San Diego' 
  form_menu$ = form_menu$ + '<option value="Las Vegas">Las Vegas' 
  form_menu$ = form_menu$ + '<option value="Minneapolis">Minneapolis' 
  form_menu$ = form_menu$ + '<option value="Pheonix">Pheonix' 
  form_menu$ = form_menu$ + '<option value="New York">New York' 
  form_menu$ = form_menu$ + '<option value="New Jersey">New Jersey'  
  form_menu$ = form_menu$ + '</select>'
  form_menu$ = form_menu$ + '</form>' 
  input dialogbox form_menu$: choice$ 
  end

9.4.2.7 TEXTAREA

<textarea>...</textarea>

The TEXTAREA tag is used to place a multiline text entry field with optional default contents in a fill-out form.

Previous Next Contents Index