HTML Referensbok - Formulär

Markeras: <BUTTON></BUTTON> - båda obligatoriska

Får innehålla: inlineelement exklusive A, INPUT, SELECT, TEXTAREA, LABEL, BUTTON, IFRAME (T)

Får finnas i: inlineelement exklusive BUTTON, blockelement exklusive FORM, FIELDSET, ISINDEX (T)

Elementet BUTTON producerar en tryckknapp som fungerar på samma sätt som knappar som skapas med elementet INPUT vars TYPE-attributs värde är submit, reset, image eller button.

Skillnaden mellan dessa två knapptyper ligger i det faktum att BUTTON-elementet ger större renderingsmöjligheter. Till skillnad från INPUT som är ett tomt element är BUTTON en behållare som kan ha ett innehåll. Detta innehåll kan vara vanlig text, även formaterad sådan, eller en bild. Det gör att även RESET-knappen kan bytas mot en bild. Det är dock otillåtet att associera bilden med en imagemap.

Attribut

HTML 4.0 och HTML 4.0 Transitional	HTML 3.2
%attrs; NAME=Cdata VALUE=Cdata TYPE=button\|submit\|reset DISABLED=disabled TABINDEX=Number ACCESSKEY=%Character onfocus=%Script onblur=%Script	Elementet finns inte

%attrs;

Beskrivs i HTML 4.0 - Attribut

TYPE

Specificerar knapptyp. Tillåtna värden är:

submit - standardvärdet, skapar en SKICKA-knapp
reset - skapar en RADERA-knapp
button - skapar en TRYCK-knapp

Text som ska visas på knappen skrivs in som elementets innehåll.

<P> <BUTTON TYPE=submit NAME=submit VALUE=submit> <STRONG>Skicka</STRONG></BUTTON>

Med CSS kan du föreslå en viss stil, till exempel svart bakgrund och vit text:

<P><BUTTON TYPE=submit NAME=submit VALUE=submit STYLE="background: black; color: white"> <STRONG>Hello</STRONG></BUTTON>

Alla knappar kan bytas mot en bild.

<P><BUTTON TYPE=submit NAME=submit VALUE=submit> <IMG SRC="knapp1.gif" ALT="Skicka"> </BUTTON>

<P><BUTTON TYPE=reset NAME=reset VALUE=reset> <IMG SRC="knapp2.gif" ALT="Radera"> </BUTTON>

<P><BUTTON TYPE=button NAME=button VALUE=button> <IMG SRC="knapp3.gif" ALT="Tryckknapp"> </BUTTON>

NAME och VALUE

Attributvärden paras ihop när formuläret har skickats. På så sätt kan ett antal SUBMIT-knappar skapas. För att de olika knapparna ska kunna åtskiljas måste värdena vara unika för varje knapp.

Andra attribut

Se INPUT för information om attributen: DISABLED, TABINDEX, ACCESSKEY, onfocus, onblur,

Exempel

<P> <INPUT TYPE="button" VALUE="Öppna" onClick="openWindow()" STYLE="background: black; color: white; font: bold 150% Boulevard">

Till knappen kan du koppla detta skript. Skriptet indentifierar www-klienten och efter det att användaren ha klickat på Öppna-knappen öppnas dokumentet me.html i ett fönster som är 500 pixlar brett och 100 pixlar högt. Skriptet skriver att Mathias Axelsson matax@algonet.se


<HEAD>
<META http-equiv="Content-Script-Type"
 content="text/javascript">
<TITLE>Indentifiera www-klienten och 
öppna dokumentet me.html i rätt fönster</TITLE>
<SCRIPT TYPE="text/javascript">
<!-- 
// Identifiera www-klienter
var browser="";
if(navigator.appName=="Netscape" && 
 parseInt(navigator.appVersion)==2) { browser="n2"; }
if(navigator.appName=="Netscape" &&
 parseInt(navigator.appVersion)==3) { browser="n3"; }
if(navigator.appName=="Netscape" &&
 parseInt(navigator.appVersion)==4) { browser="n4"; }
if(navigator.appVersion.indexOf("MSIE 3.0") != -1) 
{ browser="ie3"; }
if(navigator.appVersion.indexOf("MSIE 4.0") != -1) 
{ browser="ie4"; }
// Placera fönster i Netscape 4
var w=0;
var h=0;
if ( browser=="n4" )
   {
   var screen_height=parent.screen.height;
   var screen_width=parent.screen.width;
   var main_height=parent.window.innerHeight;
   h=(screen_height-main_height);
   w=(screen_width/2)-275;
   }
// Aktivera fönster genom att klicka knappen Öppna 
 - öppnar fönster
function openWindow()   
   {
   var newWind=window.open("me.html","display",
 "width=500,height=100,screenX="+w+",screenY="+h);
   if (newWind.opener == null)
      {newWind.opener = window;}
   else
      { 
      if ( browser=="n3"  ||  browser=="n4"  ||  
 browser=="ie4" )
         newWind.focus();
      }   
   }
 -->
</SCRIPT>
</HEAD>

Nästa FIELDSET och LEGEND Controlgrupper

Upp | HTML-referensbok | Referensböcker

Formulär