Annons:
Etikett03-html
Läst 11092 ggr
IdaL
2009-10-18 14:07

Formulär av HTML

Bild 1. Klicka för att öppna i full storlek.

I denna artikeln kommer jag gå igenom om hur du gör dig ett formulär med HTML.

Varför formulär?

Formulär kan vara bra att använda i samband med hemsidor så som kontaktformulär, beställningsformulär, ja i princip allt kan du använda ditt formulär till.

Formulär

När du kodar ditt formulär är det viktigt att du sätter all formulär-data inom

-taggarna eftersom det anger att det är ett formulär.

- formuläret börjar
- formuläret slutar
"textarea" - medelandefält
"input" - textfält som använd som t.ex. namn, e-post osv.
"Submit" - Skickar innehållet i formuläret.

Här nedan ser du ett exempel där vi använder ovanstående koder för att bilda ett kontaktformulär.

Formulärkoder

action - anger hur formuläret ska skickas, det kan t.ex. kopplas samman med ett PHP-dokument.
size - anger storleken (bredden) på textfältet.
cols - anger bredden på textareans fält.
rows - anger höjden på textareans fält.

Vi har även namngett våra olika fält och detta kommer även anges när vi skickar vårt formulär. När vi sparar vårt formulär kommer det se ut på följande vis.

Formuläret färdigt

Skulle vi nu fylla i vårt formulär så har vi ju inte angett vart det ska skickas så det kommer inte till att fungera. Nu ska vi koppla samman formuläret med våran e-postadress, det gör vi enklast via "mailto"-funktionen.

_mailto:din@adress.se__">

Då kommer ditt meddelande skickas till den angivna e-posten. Vill du dock ha mejlet med mellanslag och radbrytningar lägger du in koden.

_mailto:din@adress.se__" **enctype="text/plain"**\>

vilket jag kan rekommendera om du ens skall kunna förstå innehållet av mejlet du får. Det enda problemet som kan uppstå när du använder dig utav "mailto" funktionen är att det kommer upp en ruta (Internet Explorer bl.a.)

Ruta som kan förrekomma

För att undvika denna rutan kan man använda sig utav PHP när man skickar formuläret men det kommer jag till att ta upp i en annan artikel.

Annons:
[Ebfotograf]
2009-10-20 22:49
#1

Jätte bra skrivet ida! :D Detta behöver jag verkligen lära mig :)

Cerrolyn
2009-10-20 23:15
#2

Bra skrivet.

**MVH Cerrolyn

Isak
2009-10-20 23:47
#3

Varför inte ta upp phpscriptet i denna artikel?

Vänliga hälsningar

Alexander Isaksson

IdaL
2009-10-20 23:50
#4

#3 Jag tänkte ta upp och samtidigt visa med tacksidor och annat, kände att det blev för mycket att läsa då.

DesK
2009-10-21 11:34
#5

Jag tycker det är jättebra att du gör flera korta artiklar Glad

Det blir säkert mycket lättare att hitta på sajten när det har blivit många artiklar och inlägg när du gör så här!

En grej, skriv ihop! Särskrivningar skadar allvarligt din hälsa, missbruka inte mellanslagstangenten.

IdaL
2009-10-21 17:58
#6

#5 Tack, tänkte man kunde länka det från denna artiklen sen så att man enklare kan koppla samman det sen.

Annons:
DesK
2009-10-21 18:12
#7

#6 Smart idé! Jag kommer nog också att göra så  Glad

En grej, skriv ihop! Särskrivningar skadar allvarligt din hälsa, missbruka inte mellanslagstangenten.

Metinia
2009-10-21 21:40
#8

Riktigt bra artikel! Det här har jag verkligen velat lära mig ganska länge nu, så super! Men jag undra, har ni någon exempelbild på hur det ser ut när man får ett mail som skickas ifrån ett formulär?

dijete
2009-10-22 23:30
#9

#8 Det ser i princip ut som ett vanligt mail.

Metinia
2009-10-22 23:38
#10

#9: Men ser man kategorierna på de fälten som de har fyllt i? Eller får man helt enkelt hålla koll på det själv?

dijete
2009-10-22 23:49
#11

#10 Namnet kommer ses som avsändare, även e-mailet, Ämnet kommer vara ämnet och meddelandet kommer vara meddelandet som ett vanligt mail. Men om du har egna alternativ som te.x beställningsformulär då kan du lägga till så att det syns.

IdaL
2009-10-23 00:08
Bild 1. Klicka för att öppna i full storlek.
#12

#10 Såhär ser det ut när jag tar emot ett mejl från formuläret ovan. Inringade fält är respektive fält på formuläret.

Katter3
2009-10-29 20:45
#13

Jättebra! Ser fram emot nästa "del"! Glad

Mvh Johanna
www.fotografjohanna.se

Annons:
Amantha
2010-01-16 12:24
#14

Det här "mailto" funkar det för alla? Har hört talas om folk som det inte har funkat för.

Futurity
2010-01-16 12:26
#15

Mig funkar det inte för. Det kommer upp att man ska skicka det via en e-post hanterare.

 
 
 
 

Amantha
2010-01-16 12:32
#16

#15 Ja, där har vi ett exempel.

Vad/hur gör man då?

IdaL
2010-01-16 14:27
#17

#16 Antingen kan man skapa en egen "mottagardata" som skickar vidare informationen till din mejl via PHP eller kan man använda sig av en gratis mottagare som olzzon.com t.ex.

[Ebfotograf]
2010-02-14 16:22
#18

Jag har skapat ett sånt här formulär, och det funkar väldigt bra!

pennyz
2010-04-29 22:18
#19

Bra skrivet, till & med jag fattade ju ^^

Metinia
2010-09-24 21:15
#20

Hur gör man så att forumlärets ifyll-fält börjar i en rak linje? T.ex. så som du har i ditt kontaktformulär på din hemsida, Ida (IdaL).

Annons:
[Beavis]
2010-09-24 23:46
#21

En annan metod för "ämne" i Ämnesraden jag lärde mig för längesedan var att göra på detta vis, det fungerar också:           

Det jag har märkt är också att dessa e-mail formulär inte fungerar i alla vebbläsare tyvärr. Denna metod är rätt gammal och Idas fungerar kanske bättre? jag skall testa själv.

Som jag mindes det. De fungerar bara i Firefox för mig inte i IE….

Tidigare när jag använt dessa har inte alltid texten kommit med i formuläret utan enbart ett tomt brev.

IdaL
2010-09-25 00:13
#22

#20 Jag har bara tagit bort "
" i koderna vid "namn:" och använt mig av mellanslag istället.

[Beavis]
2010-09-25 00:55
#23

Dessutom glömde jag säga att jag använder: ENCTYPE="text/plain" i efter adressen. det gör datan mer lättläst.

[Beavis]
2010-10-16 02:39
#24

Jag har nu testat detta formulär genom att i princip klippa och klistra in koden.

Det fungerar som jag nämnde tidigare inte alls i IE utan bara i Firefox och möjligen i någon annan webbläsare? konstigt tycker jag själv. Däremot får jag inte subject funktionen att fungera. Är det någon som kan detta bättre än mig som kan se vad jag gjort fel? måste man använda JS eller liknande?

IdaL
2010-10-16 14:02
#25

#24 Jag har själv detta formuläret på min hemsida, dock har jag det kopplat till en mejl-tjänst (majami) som tar emot datan och skickar den till min mejl och sen skickar vidare besökarna till en tacksida.

För mig fungerar det utmärkt i såväl IE som FF och även de andra webbläsarna. Vad är det du inte får att fungera?

[Beavis]
2010-10-16 16:53
#26

Jag har inte mitt form kopplat till någon cgi för det tillåter inte glocalnet där mina sidor ligger för tillfället. Så det blir ju e-postformulär till slut. Det som inte fungerar för mig är att användfer man IE och mitt form så syns inte uppgifterna i meddelandet utan när jag trycker på "skicka" kommer jag till ett tomt e-post meddelande. med adressen som enda fungerande del.

Använder man däremot mozilla kommer infon med. Men ämnesraden är tom eller i bästa fall står det "mozilla form" i det.

Du ser ovan hur min mailform fod ser ut i tidigare inlägg.

Äh jag provar att visa igen:

Det är den delen som bordfe vara intressant på den ena. den modellerade jag efter din för att testa.

En annan:

tableform

Jag har tagit med tabelldelen för att visa att jag brukar göra det mesta i tabell (jag tycker det är lättare)

johan-ahlback
2010-10-17 18:59
#27

html mail ska skeppas ut har jag hört. Använd wufoo eller liknande.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Annons:
velepa1986
2013-02-01 08:09
#28

Någon som sitter på en kod som funkar? Jag får verkligen inte till de sen formfixer slutade funka..

Sandra

Besök gärna
http://vitaunika.com/

IdaL
2013-02-01 14:01
#29

#28 Om du letar efter en ny form-fixer så är majami.se ett bra alternativ. Där finns både möjlighet till att ange egna tacksidor och felsidor samt att du kan koda formuläret hur du vill.

velepa1986
2013-02-01 15:59
#30

#29 Tack! Måste man registrera sig för att få tillgång till de?

Sandra

Besök gärna
http://vitaunika.com/

IdaL
2013-02-01 21:41
#31

#30 Ja tyvärr krävs registrering, men det är det helt klart värt!

velepa1986
2013-02-02 07:57
#32

#31 Absolut, skaffade konto men kommer fortfarande inte åt formuläret. Kontaktade supporten, men får väl inte svar först tidigast måndag.. Glad

Sandra

Besök gärna
http://vitaunika.com/

velepa1986
2013-02-02 09:03
#33

Jag hittade hur man gjorde, men jag får inte mailen. Någon som vet vad jag gör fel? Har fyllt i mailadressen rätt.. Obestämd

Sandra

Besök gärna
http://vitaunika.com/

IdaL
2013-02-02 11:43
#34

Har du kopplat formuläret till e-posten? Glad du måste skriva in ID-nummret i formuläret för att det ska funka.

Annons:
velepa1986
2013-02-02 13:13
#35

#34 Jo absolut, jag har skrivit i id numret, och mailen och hemsideadressen på http://majami.se/

Sandra

Besök gärna
http://vitaunika.com/

IdaL
2013-02-02 13:48
#36

#35 Har du någon länk till sidan med formuläret? Så kan jag kolla på koderna.

velepa1986
2013-02-02 14:06
#37

#35 Jättesnällt att du är villig att kika Glad
http://www.vitaunika.se/p/bestalla-orderformular.html En länk så du kommer direkt till formuläret.

Sandra

Besök gärna
http://vitaunika.com/

IdaL
2013-02-02 21:02
#38

#37 Testa att ändra de andra fälten till andra namn, nu pekar flera fält på samma sak. alltså nämn om de olika fälten så dom heter olika i koderna "..name="namn".." vet inte om du förstår hur jag menar, det går inte att klistra in koden här så kan inte visa.

velepa1986
2013-02-03 08:57
#39

#38 Jag förstår och ändrade men de verkar ändå inte fungera. Obestämd

Sandra

Besök gärna
http://vitaunika.com/

MichaelE
2013-02-03 14:39
#40

För er som kan köra php på era webbsidor så finns denna artikel hos Webprogrammering iFokus. Denna går igenom hur man skriver kod för att kunna skicka mejl direkt från hemsidan och som dessutom klarar av åäö.

Upp till toppen
Annons: