webForumDet fria alternativet
Logga in / Bli medlem

<button> eller <input type="button">?

HTML & CSS

7 svar · 430 visningar · startad av Jesper T

Medlem sedan nov. 20017 144 inlägg
Trådstart#1

Vilken syntax är igentligen rätt?

Medlem sedan juni 20004 308 inlägg
#2

Båda. Det beror på vilken html-version du vill validera mot. Men jag lägger över det i html-forumet. :)

Medlem sedan sep. 20026 425 inlägg
#3

Och vill du köra XHTML, vilket faktiskt rekommenderas, skriver du så här:

<input type="button" Value="Klicka" [b]/>[/b]
Medlem sedan maj 200010 687 inlägg
#4

Nja, kör man med XHTML så är det väl <button> som är det mest korrekta...

Medlem sedan juli 20013 378 inlägg
#5

Hmm...
Båda är alltså lika "korrekta" men de fungerar lite olika och kan därför användas till lite olika saker...

<input type="button" name="knappen" value="Klicka" ... ... ... />

är deklarerad som EMPTY (dvs allt innehåll i knappen definieras via dess attributvärden ... medan

<button name="knappen" value="Klicka" ><div>Härvare innehåll i en divtagg</div></button>

alltså får innehålla det mesta utom en länk eller en annan formulär-relaterad tagg...
Se även http://www.w3.org/TR/html4/interact/forms.html#h-17.5 ...

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.

Och går man till DTD:n (för xhtml 1.0 Strict i detta fall ;) ) så ser man också att bägge är helt kosher:

<!ENTITY % InputType
  "(text | password | checkbox |
    radio | submit | reset |
    file | hidden | image | button)"
   >

<!-- the name attribute is required for all but submit & reset -->

<!ELEMENT input EMPTY>     <!-- form control -->
<!ATTLIST input
  %attrs;
  %focus;
  type        %InputType;    "text"
  name        CDATA          #IMPLIED
  value       CDATA          #IMPLIED
  checked     (checked)      #IMPLIED
  disabled    (disabled)     #IMPLIED
  readonly    (readonly)     #IMPLIED
  size        CDATA          #IMPLIED
  maxlength   %Number;       #IMPLIED
  src         %URI;          #IMPLIED
  alt         CDATA          #IMPLIED
  usemap      %URI;          #IMPLIED
  onselect    %Script;       #IMPLIED
  onchange    %Script;       #IMPLIED
  accept      %ContentTypes; #IMPLIED
  >

-- och --

<!ENTITY % button.content
   "(#PCDATA | p | %heading; | div | %lists; | %blocktext; |
    table | %special; | %fontstyle; | %phrase; | %misc;)*">

[ ... ]
<!--
 Content is %Flow; excluding a, form and form controls
--> 
<!ELEMENT button %button.content;>  <!-- push button -->
<!ATTLIST button
  %attrs;
  %focus;
  name        CDATA          #IMPLIED
  value       CDATA          #IMPLIED
  type        (button|submit|reset) "submit"
  disabled    (disabled)     #IMPLIED
  >

---
Hur det sedan står till med kompatibiliteten (dvs hur olika webbläsare klarar av de två alternativen) är (som alltid) en *helt* annan historia ;)
Men en antydan finns bl.a. på
http://blooberry.com/indexdot/html/tagpages/b/button.htm
och
http://blooberry.com/indexdot/html/tagpages/i/inputbutton.htm
- där ser man att <input type="button" /> är mer "bakåtkompatibel" - medan <button>....</button> stöds av IE4+ och NN6+/Moz/O5+ (dvs de vanligaste "moderna" webbläsarna ;) )

Medlem sedan apr. 200329 inlägg
#6

Ni som skriver xhtml, glöm inte att alla stopptaggar måste finnas med.

Medlem sedan juli 20013 378 inlägg
#7

Jupp

<input ... ... />

och

<button> .... </button>

gäller i XHTML
Kör man HTML är det

<input ... ...>

och

<button> ... </button>

:e ;)

Medlem sedan sep. 20026 425 inlägg
#8

Erik Juhlin skrev:

Nja, kör man med XHTML så är det väl <button> som är det mest korrekta...

Njae, <input type="button" value="something" /> är lika korrekt - det valideras enligt W3C! Bevis? Klicka här. :)
Sidan som validerades var den här.

257 ms totalt · 4 externa anrop · v20260731065814-full.51f67c91
123 ms — deklarationer (db)
0 ms — hämta statistik (cache)
128 ms — hämta tråd, inlägg och bilagor (db)
126 ms — ändringar (db)