More INPUT Form Tags Illustrated

Input Form Types:  The TYPE  attribute sets the type of  field for INPUTs. There are a number of types you may wish to use, including:

As with the introduction with the text field, form code is displayed, followed by the form produced by the code. Also note, as with previous form examples, the CGI script at: http://webdevfoundations.net/scripts/formdemo.asp may not be operational.  Sorry, if this is the case.

blueline.gif (1205 bytes)

password-- same as text but you can not see the actual text entered. Instead, asterisks replace letters.

<FORM ACTION="http://webdevfoundations.net/scripts/formdemo.asp" METHOD="POST">

  <INPUT TYPE="password" NAME="text" SIZE=10>
  <INPUT  TYPE = "submit"  value="try me">
  <INPUT  TYPE = "reset"  value="reset">

</form>

blueline.gif (1205 bytes)

checkbox--checkboxes are a single on/off type of input.  With checkboxes,  one or more boxes may be checked at the same time.

<FORM ACTION="http://webdevfoundations.net/scripts/formdemo.asp" METHOD="POST">

  <input TYPE="checkbox" NAME="first" VALUE="263"> CSC 263 &nbsp;&nbsp; &nbsp;

  <input TYPE="checkbox" NAME="second" VALUE="112"> ENG 112 &nbsp;&nbsp; &nbsp;

  <input TYPE="checkbox" NAME="third" VALUE="PHY 245"> PHY 245 &nbsp;&nbsp;

   <input type="submit" value="Select Favorites">
</form>

CSC 263      ENG 112      PHY 245   

blueline.gif (1205 bytes)

radio--radio buttons act exactly like check boxes except if you give several the same name, they act as a "one-of-X" selector. This example shows all three with the name "myradio", since only one of these buttons can be selected when data is returned after posting, the field myradio will be assigned the data in the value field of the button selected.

<FORM ACTION="http://webdevfoundations.net/scripts/formdemo.asp" METHOD="POST">
 
  <INPUT TYPE="radio"  NAME="myradio" VALUE="one" CHECKED>
  <INPUT TYPE="radio" NAME="myradio" VALUE="two" >
  <INPUT TYPE="radio" NAME="myradio" VALUE="three">
  
  <INPUT TYPE = "submit" value="Select One">
</form>

one    two    three  
 

Note the CHECKED Attribute: illustrated here, the first of these three fields is checked.   This attribute is used with radio buttons or checkboxes to give initial values.

blueline.gif (1205 bytes)

submit and reset create buttons which allow you to submit the form data or  reset all fields to the default values.   The string assigned to VALUE will be displayed in the button.

<FORM ACTION="http://webdevfoundations.net/scripts/formdemo.asp" METHOD="POST">
<INPUT  TYPE="text"   NAME="text" SIZE=20 VALUE="Enter Name">
 
<INPUT  TYPE = "submit"  value="Send">
<INPUT  TYPE = "reset"     value="Reset">
</form>

blueline.gif (1205 bytes)

 

        

Last updated on 02/04/2009   by L.M. Hicks