Tutorial 13: Giving Form to Forms - HTML with Style | 22 | WebReference

Tutorial 13: Giving Form to Forms - HTML with Style | 22

index123456789101112131415161718192021exercises1

Tutorial 13: Giving Form to Forms

Checkboxes

A checkbox is used to offer the user a yes/no option for something. Checkboxes can either be checked or unchecked by default; this is set by using the CHECKED attribute. The user cannot change the value of a checkbox, but unchecked checkboxes do not form part of the data submitted when the form is submitted. You can have several checkboxes with the same NAME (though presumably you'll want them to have different VALUEs), in which case several pairs will be sent if more than one checkbox is checked. Checkboxes have a TYPE of checkbox.

<FORM ACTION="/cgi-bin/html/formdump.cgi" 
      METHOD="GET" ENCTYPE="application/x-www-form-urlencoded">
<P>E-mail address: <INPUT TYPE="text" NAME="email" SIZE="20">
<P><INPUT TYPE="checkbox" NAME="use" VALUE="subscribe" CHECKED>
Subscribe to our newsletter
<BR><INPUT TYPE="checkbox" NAME="use" VALUE="mailing">
Check this box if you do not want to 
receive e-mails about our products.
<BR><INPUT TYPE="submit" VALUE="Submit">
</FORM>

E-mail address:

Subscribe to our newsletter
Check this box if you do not want to receive e-mails about our products.

Radio buttons

Radio buttons are similar to checkboxes, with the exception that when several radio buttons share the same NAME, only one of them can be checked. When the form is submitted, only the value of the selected radio button is sent. Radio buttons can be used to allow the user to select one of a few choices. Radio buttons have a TYPE of radio.

<FORM ACTION="/cgi-bin/html/formdump.cgi" 
      METHOD="GET" ENCTYPE="application/x-www-form-urlencoded">
<P>E-mail address: <INPUT TYPE="text" NAME="email" SIZE="20">
<P>Please select which format 
you would like to receive our newsletter in:
<BR><INPUT TYPE="radio" NAME="format" VALUE="text" CHECKED> Text
<BR><INPUT TYPE="radio" NAME="format" VALUE="html"> HTML
<BR><INPUT TYPE="radio" NAME="format" VALUE="pdf"> Adobe Acrobat
<P><INPUT TYPE="submit" VALUE="Submit">
</FORM>

E-mail address:

Please select which format you would like to receive our newsletter in:
Text
HTML
Adobe Acrobat

File selectors

File selectors are used to allow the user to select a file to send along with the form. They have a TYPE of file. The ACCEPT attribute can be set to limit the kind of files the user can send. You can set the VALUE attribute to be the default file name, however this is not a very good idea since guessing what a file will be called in the user's operating system is not easy. This technique is also unsupported by Navigator and Internet Explorer 4.0 and 5.0.

<FORM METHOD="POST" ACTION="/cgi-bin/html/formdump.cgi" ENCTYPE="multipart/form-data">
<H2>Graphics Contest</H2>
<P>Name: <INPUT TYPE="text" NAME="name" SIZE="30">
<P>Please submit your entry in PNG or GIF format:
<INPUT TYPE="file" NAME="entry" ACCEPT="image/png, image/gif">
<P><INPUT TYPE="submit">
</FORM>

Graphics Contest

Name:

Please submit your entry in PNG or GIF format:

index123456789101112131415161718192021exercises1

Produced by Stephanos Piperoglou

URL: https://www.webreference.com/html/tutorial13/9.html

Created: May 28, 1998
Revised: February 25, 1999