Keskustelu: Nettisivujen teko: Formin lähetys linkillä

Miten saisin korvattua formin lähetä-nappulan linkillä? Nappula ei oikein sovi sivun ulkoasuun, mutta <input type="submit"> valitettavasti on nappula.

Joko javaskriptillä (form.submit(), muista laittaa noscriptiin tavallinen submitnappula meille javaskriptittömille) tai laitat tuollaisen nappulan ja CSS:llä tyylittelet sen linkin näköiseksi.

mikset muuttaisi sen nappulan ulkonäköä?
Esim. näin: <input type="submit" style="border: 0px; background: transparent;">

Kiitokset molemmille. Tämä on peräti toinen kerta, kun teen sivuja, ja, kuinka ollakkaan, kirjautuminen ja keskustelu toimivat, mutta ulkoasu on ongelma :P
Niin ja Javaskriptiin en koske.

Javascriptillä ite oon käyttäny... ihan kätevästi se menee... Linkki vaan tälläseen muotoon formin sisälle :

<a href="javascript()forminNimi.submit;">linki</a>

eli tohon forminNimi kohalle sitte sen formin nimi loogisesti eli jos <form name="seppo"> niin toi olis :

javascript()seppo.submit;

Ja niin edelleen... itte en nää noin pienissä jutuissa mitään vikaa vaikka laittaiskin sivuille...

jos ei halua käyttää javascriptiä niin ainoa keino mitä mieleen tulee on:

<form method="post" action="joku.php">
<input type="text" size="20" maxlenght="10">
<input type="image" name="imageField" src="teksti.jpg" width="42" height="19">
</form>

teksti.jpg on sitten kuva jossa on teksti. Luonnollisesti ei näytä niin hyvältä kuin normaaliteksti ja ei voi laittaa siihen mitään värivaihtoja.

No mielestäni tuo a:hover -värijuttu on vain muodollisuus vaikkakin jos sivulla on vaikka tummansinistä ja oranssia (ei ihan välttämättä mitkään herkkuvärit), niin sinisellä taustalla hover voisi olla oranssi ja päinvastoin, mutta ilmankin varmaan elää.

Joten tuohon input-imageen ehkä saakin värinvaihdon JavaScriptillä, joka kuitenkaan ei haittaa kuin noin 70 tavun verran koodin painossa, mikäli ei ole JS:ää.

Eli...
<input type="image" name="imageField" src="teksti.jpg" width="42" height="19" onMouseOver="this.src='tekstihover.jpg';" onMouseOff="this.src='teksti.jpg';">

Olisi ratkaisu värinvaihtoon, ehkä, kun en jaksanut testata. JavaScript on aika huono myös minunkin mielestäni, mutta jos PHP:llä ajatteli ns. Rollover-kuvia tehdä, joutuisi koko sivun lataamaan uudestaan, ja milläs sitten edes testataan, josko tuo hiiri menisi kuvan päälle?

v0q kirjoitti:

itte en nää noin pienissä jutuissa mitään vikaa vaikka laittaiskin sivuille...

Silloin pitää tehdä myös noscript, ja se taas vähän häiritsee, varsinkin kun kyseessä on PHP:llä toteutettu kokonaisuus, suunnilleen samalla tavalla rakennettu kuin Ohjelmointiputka.

Ei tarvi JavaScriptiä rollover-kuvien luontiin. CSS:llä onnistuu paljon vaivattomammin tekemällä samaan kuvaan molemmat vaiheet, laittamalla taustakuvaksi ja vaihtamalla kuvan sijaintia hoverissa. Mutta kuten Blaze jo mainitsi ylhäällä, CSS:llä onnistuu myös tuon buttonin muokkaaminen tekstin näköiseksi.

Mutta minäpä en mitään värinvaihtoa tarvitse, tai jos tarvitsen, niin teen sen universaalisti CSS:llä. Päädyin ratkaisuna nappulaan, joka on läpinäkyvä mutta jossa on kuitenkin reuna. Se sopii sivulle täydellisesti.

Metabolix: Jos haluat nappiisi hieman efektiä, niin laita kaikki muut borderit paksuus: 1px ja sitten ala ja oikea border: 2px.