ugrás a tartalomhoz

Input vs. Button

yaanno · 2008. Május. 22. (Cs), 14.36
Formok submit gombjainak kialakítása képekkel
 ■
1

Js plasztika

vbence · 2008. Május. 22. (Cs), 15.11
Ha mindenképpen hiperkorrekt megoldást keresünk (és JS-t is használjagtunk a nem esszenciális részekhez), még1 ötlet: minden <input class="stylebutton ..." value="{val}"> elemet kicserélünk <a class="stylebutton ..." onclick="{js value és sumbit}">{val}</a> -ra.
2

Álmoskönyvek szerint

zila · 2008. Május. 22. (Cs), 17.42
Csakhogy az álmoskönyvek szerint amit form button-nak használsz az legyen is az a html-ben is.
3

Forrás

vbence · 2008. Május. 22. (Cs), 19.24
Úgy gondoltam, a forrásban az első (azaz <input type="submit" class="stylebutton ...">) lenne. Ezután, ha van rendes JS, akkor DOM manipulációval szépen átlakítani. Az átalakítás után már egy weblakalmazásról van szó, nem egy egyszerű formról, ahol nem lehet JS-sel való submit kivetni való...
4

Háát..

zila · 2008. Május. 23. (P), 10.07
Lehet úgy is, de nem látom értelmét JS-ből linkké alakítani egy buttont, amit enélkül is szépen meg lehet formázni, szemantikus marad a kód, nem kell a DOM-ot piszkálni, js nélkül is működik a form, működik az enter gombra történő submit... Szóval nem látom mit nyernénk a linkké alakítással?
5

a helyett button vagy span

gex · 2008. Május. 23. (P), 12.58
a cikkben is hivatkozott rediscovering the button element c. cikkben (blogmark is volt) látható, hogy nagyon szépen lehet formázni a button elemet is (mondjuk az ikonokat én háttérképként alkalmaztam volna nem img elemként).
persze nem tudom, hogy minden böngészőben tényleg ennyire szép-e (most megnéztem win alatt ie6/ff/opera/safari böngészőkben és igen), de ha mindenképpen le akarjuk cserélni, akkor miért nem span elemet használunk? ez valami beidegződés, hogy mindig linket használunk? :) a különbség csak annyi, hogy css-ből meg kell változtatni az egérmutatót a span fölött, cserébe nem kell szívni azzal, hogy megakadályozzuk a link onclick eseményének lefutását. vagy van más, amit kihagytam a számításból?
6

hover

vbence · 2008. Május. 23. (P), 13.20
Egyrészt azért A, mert az IE6 csak így támogatja a hovert (a csávó egy jqueryt berántott csak a hover emuláció miatt :) Másrészt meg ha submit, akkor nem kell foglalkozzunk az alapértelmezett viselkedés törlésével (legalábbis most így tűnik logikusnak).
7

és tényleg a hover

gex · 2008. Május. 23. (P), 13.25
nahát, a hover tényleg nem jutott eszembe :), mondjuk ha már ja app, akkor nem csak emiatt lesz berántva az a jquery. ;)
a másikat nem értem, hogy ha az a elem submit, akkor miért nem kell foglalkozni az alapértelmezett viselkedéssel? főleg, ha ajax submit?

szerk: egyébként a submit elemre nem feltétlenül kell hover. az submit típusú inputtal vagy buttonnal sem tudsz mit kezdeni ie6 alatt.
8

amire gondoltam:

vbence · 2008. Május. 23. (P), 13.39
Úgy értettem, ha onclickben nyomunk egy form.submit()-ot, akkor úgysem fog lefutni, bárhova is mutasson a link. (És hozzátettem, hogy csak 80%ban vagyok biztos)...
9

én fordítva tippelem

gex · 2008. Május. 23. (P), 14.20
én 80%-ban inkább abban vagyok biztos, hogy működni fog úgy is a link. :) délután le is tesztelem.
10

igen is meg nem is...

vbence · 2008. Május. 23. (P), 15.32
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu">
<head>
	<title>link vs submit test</title>
</head>
<body>
	<form id="aform" method="get" action="http://www.google.com/search">
		<input type="text" name="q"/>
		<br/>
		Internal: <a href="#" onclick="document.getElementById('aform').submit();">Submit</a>
		<br/>
		External: <a href="http://www.live.com/" onclick="document.getElementById('aform').submit();">Submit</a>
	</from>
</body>
</html>
Valódi URL-re mutató link valóban übereli a folymaatban lévő submitot, viszont ha a link egy belső hivatkozás (itt egyszerűen csak egy #) akkor már nem kell aggódni. Nem mintha egy "return false;" odaírása akkora pluszmunka lenne az onclick végére..

Teszteve: Safari, FF, Opera