FORM-Submit-knapp som är text ?

[s9d8as0vjk]

Är det någon här som har koll på hur man gör en Submitknapp som en vanlig textlänk ?

<input type="image" img src="knapp.gif" name="image"> skapar ju en bildknapp

och

<input type="submit" value="Knapp" name="submit"> skapar ju en sån ful textknapp med ram.

Hur tusan gör man en knapp som bara är text utan ram runt ?

 

[burner]

Finns många sätt att lösa det på, här är ett i alla fall.

<form method="POST" name="field" action="http://www.thegate.nu/tmp/klickontext.php">
<p><input type="text" name="data1" size="20"></p>
<p onClick="javascript:document.field.submit()">Posta</p>
</form>

Demo finns på http://www.thegate.nu/tmp/klickontext.html


Vill du posta flera fält så är det förstås inte svårare, kolla demo på
http://www.thegate.nu/tmp/klickontext2.html

 

[Nikita-b]

Lysande ! går det även att få själva knappen att bete sig som en vanlig länk ? Så man ser att den är klickbar alltså. Är inte så bra på Javascript ...

Mr B med Nitas inloggning

 

[burner]

2481746 Lysande ! går det även att få själva knappen att bete sig som en vanlig länk ? Så man ser att den är klickbar alltså. Är inte så bra på Javascript ...

Mr B med Nitas inloggning

Jo visst går det med hjälp av inline CSS enligt tex. style="text-decoration:underline"

 

[s9d8as0vjk]

Nu är iallafall "Submitknapparna" fixade med din hjälp. Kanon !

 

[jayjay]

En bättre lösning är ju att stylea om submit-knappen så den ser ut som text.

med:


border: none;
background: none;
text-decoration: underline;

för både elementet som det är, och för elementets :active rule.

ett komplett exempel:

<input type="submit" value="skicka!" id="submitknappen" />

och style för detta:

#submitknappen, #submitknappen:active {
border: none;
background: none;
text-decoration: underline;
}

Då blir det dessutom funktionabelt i browsers som har javascript deaktiverat.

 

[s9d8as0vjk]

Nu börjar det helt klart likna något. Dock så blir det fortfarande lite väl mycket mellanrum mellan de olika "submitknapparna".

Kolla in här:
http://www.fiskesnack.com/productsearch/index2.php

Välj kategori "--- Visa alla okategoriserade produkter ---" så får du fram hur knapprarna ser ut. Verkar bli typ 10 mellansteg mellan knapparna av någon anledning.

Har lagt in följande i CSS-filen
form {
display: inline;
}
#submitknappen {
border: none;
background: none;
FONT-SIZE: 10px;
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
COLOR: #EEEEEE;
}
#submitknappen:active {
border: none;
background: none;
text-decoration: underline;
FONT-SIZE: 10px;
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
COLOR: #EEEEEE;
}

 

[Macaper]

Lägg i margin över och under på submitknapp stylen så löser du det, den har standard avstånd före och efter som du måste styla om.

margin-top: 0px;
margin-bottom: 0px;

Sedan kan jag skarpt rekommendera att koda och kolla på din kod i firefox, då explorer och firefox tolkar kod annorlunda, där firefox tolkar 100% rätt och explorer tolkar lite annorlunda. Sedan kodar man en fix för explorer i en speciell css som bara läses av explorer.

Just margin och padding är 2 saker som kan tolkas annorlunda av ie och firefox.

 

[jayjay]

Sen vill du kanske ha:

cursor: pointer;

på knapparna också, för att få fram "länk" pekaren (hand för IE 5.5, går att kombinera så den funkar i alla browsers).

kan vara olika margins för :active och icke-active som gör att texten också flyttas i sidled när du trycker. Bästa är väl att sätta en fast margin på båda reglerna.

 

[HanneZ]

2488821 Lägg i margin över och under på submitknapp stylen så löser du det, den har standard avstånd före och efter som du måste styla om.

margin-top: 0px;
margin-bottom: 0px;

Sedan kan jag skarpt rekommendera att koda och kolla på din kod i firefox, då explorer och firefox tolkar kod annorlunda, där firefox tolkar 100% rätt och explorer tolkar lite annorlunda. Sedan kodar man en fix för explorer i en speciell css som bara läses av explorer.

Just margin och padding är 2 saker som kan tolkas annorlunda av ie och firefox.

Firefox korkar allt till det imellanåt också. Opera har bäst stöd för css!

 

[s9d8as0vjk]

Nopp, det där med margin funkar banne mig inte tyvärr ... vet inte om jag gjort något annat galet kanske ?

CSS-filen ser ut så här nu:
#submitknappen {
border: none;
background: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
cursor: pointer;
FONT-SIZE: 10px;
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
COLOR: #EEEEEE;
}
#submitknappen:active {
border: none;
background: none;
text-decoration: underline;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
cursor: pointer;
FONT-SIZE: 10px;
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
COLOR: #EEEEEE;
}


FORM-formuläret ser ut som så här:
<form method="post" name="myform<?echo $i+1;?>" action="index2.php">
<input type="hidden" name="shop" value="<?php echo $_POST[shop];?>">
<input type="hidden" name="category" value="<?php echo $_POST[category];?>">
<input type="hidden" name="pricelow" value="<?php echo $_POST[pricelow];?>">
<input type="hidden" name="pricehigh" value="<?php echo $_POST[pricehigh];?>">
<input type="hidden" name="sale" value="<?php echo $_POST[sale];?>">
<input type="hidden" name="sortorder1" value="<?php echo $_POST[sortorder1];?>">
<input type="hidden" name="sortorder2" value="<?php echo $_POST[sortorder2];?>">
<input type="hidden" name="sortorder3" value="<?php echo $_POST[sortorder3];?>">
<input type="hidden" name="searchcriteria" value="<?php echo $_POST[searchcriteria];?>">
<input type="hidden" name="visabilder" value="<?php echo $_POST[visabilder];?>">
<input type="hidden" name="offset" value="<?php echo $offset;?>">
<input type="hidden" name="page" value="<?echo $i+1;?>">
<input type="submit" value="[<?echo $i+1;?>]" name="submit" id="submitknappen">
</form>

Och jag får fortfarande en massa mellanrum mellan knapparna ... kan det vara nåt jag kodat fel i själva formuläret kanske ?

HTML-koden blir så här när man varit inne på PHP-sidan:
<form method="post" name="myform1" action="index2.php">
<input type="hidden" name="shop" value="">
<input type="hidden" name="category" value="Beten - Jerkbaits">
<input type="hidden" name="pricelow" value="1">
<input type="hidden" name="pricehigh" value="100000">
<input type="hidden" name="sale" value="">
<input type="hidden" name="sortorder1" value="tblPriceData.sProductTitle">
<input type="hidden" name="sortorder2" value="tblPriceData.dblCurrentprice ASC">
<input type="hidden" name="sortorder3" value="tblPriceData.sSale DESC">
<input type="hidden" name="searchcriteria" value="">
<input type="hidden" name="visabilder" value="ja">
<input type="hidden" name="offset" value="0">
<input type="hidden" name="page" value="1">
<input type="submit" value="[1]" name="submit" id="submitknappen">
</form>
<form method="post" name="myform2" action="index2.php">
<input type="hidden" name="shop" value="">
<input type="hidden" name="category" value="Beten - Jerkbaits">
<input type="hidden" name="pricelow" value="1">
<input type="hidden" name="pricehigh" value="100000">
<input type="hidden" name="sale" value="">
<input type="hidden" name="sortorder1" value="tblPriceData.sProductTitle">
<input type="hidden" name="sortorder2" value="tblPriceData.dblCurrentprice ASC">
<input type="hidden" name="sortorder3" value="tblPriceData.sSale DESC">
<input type="hidden" name="searchcriteria" value="">
<input type="hidden" name="visabilder" value="ja">
<input type="hidden" name="offset" value="100">
<input type="hidden" name="page" value="2">
<input type="submit" value="[2]" name="submit" id="submitknappen">
</form>
<form method="post" name="myform3" action="index2.php">
<input type="hidden" name="shop" value="">
<input type="hidden" name="category" value="Beten - Jerkbaits">
<input type="hidden" name="pricelow" value="1">
<input type="hidden" name="pricehigh" value="100000">
<input type="hidden" name="sale" value="">
<input type="hidden" name="sortorder1" value="tblPriceData.sProductTitle">
<input type="hidden" name="sortorder2" value="tblPriceData.dblCurrentprice ASC">
<input type="hidden" name="sortorder3" value="tblPriceData.sSale DESC">
<input type="hidden" name="searchcriteria" value="">
<input type="hidden" name="visabilder" value="ja">
<input type="hidden" name="offset" value="200">
<input type="hidden" name="page" value="3">
<input type="submit" value="[3]" name="submit" id="submitknappen">
</form>

 

[HanneZ]

2496278 ...

Denna koden:

<form style="display:inline;" method="post" name="myform1" action="index2.php">
<input type="hidden" name="shop" value="">
<input type="hidden" name="category" value="Beten - Jerkbaits">
<input type="hidden" name="pricelow" value="1">
<input type="hidden" name="pricehigh" value="100000">
<input type="hidden" name="sale" value="">
<input type="hidden" name="sortorder1" value="tblPriceData.sProductTitle">
<input type="hidden" name="sortorder2" value="tblPriceData.dblCurrentprice ASC">
<input type="hidden" name="sortorder3" value="tblPriceData.sSale DESC">
<input type="hidden" name="searchcriteria" value="">
<input type="hidden" name="visabilder" value="ja">
<input type="hidden" name="offset" value="0">
<input type="hidden" name="page" value="1">
<input type="submit" value="[1]" name="submit" id="submitknappen">
</form><br>
<form style="display:inline;" method="post" name="myform2" action="index2.php">
<input type="hidden" name="shop" value="">
<input type="hidden" name="category" value="Beten - Jerkbaits">
<input type="hidden" name="pricelow" value="1">
<input type="hidden" name="pricehigh" value="100000">
<input type="hidden" name="sale" value="">
<input type="hidden" name="sortorder1" value="tblPriceData.sProductTitle">
<input type="hidden" name="sortorder2" value="tblPriceData.dblCurrentprice ASC">
<input type="hidden" name="sortorder3" value="tblPriceData.sSale DESC">
<input type="hidden" name="searchcriteria" value="">
<input type="hidden" name="visabilder" value="ja">
<input type="hidden" name="offset" value="100">
<input type="hidden" name="page" value="2">
<input type="submit" value="[2]" name="submit" id="submitknappen">
</form>
<br>
<form style="display:inline;" method="post" name="myform3" action="index2.php">
<input type="hidden" name="shop" value="">
<input type="hidden" name="category" value="Beten - Jerkbaits">
<input type="hidden" name="pricelow" value="1">
<input type="hidden" name="pricehigh" value="100000">
<input type="hidden" name="sale" value="">
<input type="hidden" name="sortorder1" value="tblPriceData.sProductTitle">
<input type="hidden" name="sortorder2" value="tblPriceData.dblCurrentprice ASC">
<input type="hidden" name="sortorder3" value="tblPriceData.sSale DESC">
<input type="hidden" name="searchcriteria" value="">
<input type="hidden" name="visabilder" value="ja">
<input type="hidden" name="offset" value="200">
<input type="hidden" name="page" value="3">
<input type="submit" value="[3]" name="submit" id="submitknappen">
</form>

ger det här utseendet hos mig, firefox & explorer

Nu har jag inte använt någon annan css förutom det som står i style-egenskapen.

 

[s9d8as0vjk]

Ok, men knapparna ska vara bredvid varandra, utan ram runt [1] och utan mellanrum mellan knapparna.

 

[HanneZ]

2496486 Ok, men knapparna ska vara bredvid varandra, utan ram runt [1] och utan mellanrum mellan knapparna.

Ok, jag kanske missade lite

Har du provat att sätta width?

 

[s9d8as0vjk]

Hmm, nopp ... hur menar du ? I CSS ? Hur gör man ?

 

[HanneZ]

2496612 Hmm, nopp ... hur menar du ? I CSS ? Hur gör man ?

width:10px;

osså prova dig fram till ett lämpligt tal.

 

[s9d8as0vjk]

Nopp, det funkade inte heller tyvärr. Det blev snarare mer mellanrum mellan knapparna.

Dock så verkar jag vara problemet på spåret och det verkar som varje INPUT-rad genererar ett mellanrum. Ju fler inputrader jag har desto större mellanrum. Några tips hur man åtgärdar det ?

INPUT-raderna ser ju ut så här och samtliga är "hidden"

I PHP:
<input type="hidden" name="visabilder" value="<?php echo $_POST[visabilder];?>">

Som HTML:
<input type="hidden" name="visabilder" value="ja">

EDIT ! Det löste sig när jag tog bort radbrytningarna mellan varje INPUT-rad ... skumt !

 

[HanneZ]

2499419 Nopp, det funkade inte heller tyvärr. Det blev snarare mer mellanrum mellan knapparna.

Dock så verkar jag vara problemet på spåret och det verkar som varje INPUT-rad genererar ett mellanrum. Ju fler inputrader jag har desto större mellanrum. Några tips hur man åtgärdar det ?

INPUT-raderna ser ju ut så här och samtliga är "hidden"

I PHP:
<input type="hidden" name="visabilder" value="<?php echo $_POST[visabilder];?>">

Som HTML:
<input type="hidden" name="visabilder" value="ja">

EDIT ! Det löste sig när jag tog bort radbrytningarna mellan varje INPUT-rad ... skumt !

Hehe det där har jag varit med om förr. Det beror lite på vilken webserver m.m. man kör.