03. HTML

Formulär av HTML

2009-10-18 14:07 #0 av: IdaL

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 <FORM>-taggarna eftersom det anger att det är ett formulär.

<FORM> - formuläret börjar
</FORM> - 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.

<form name="form" method="post" action="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.

<form name="form" method="post" action="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.

Anmäl
2009-10-20 22:49 #1 av: [Ebfotograf]

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

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2009-10-20 23:15 #2 av: Cerrolyn

Bra skrivet.

MVH Cerrolyn
Sajtägare på Tävlingshundar

Medarbetare på: Hoya, Retriever, Vallhundar
Min hemsida: Ceasars Vänner

Anmäl
2009-10-20 23:47 #3 av: Isak

Varför inte ta upp phpscriptet i denna artikel?

Anmäl
2009-10-20 23:50 #4 av: IdaL

#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å.

Anmäl
2009-10-21 11:34 #5 av: DesK

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!

Désirée

Anmäl
2009-10-21 17:58 #6 av: IdaL

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

Anmäl
2009-10-21 18:12 #7 av: DesK

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

Désirée

Anmäl
2009-10-21 21:40 #8 av: Metinia

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?

Anmäl
2009-10-22 23:30 #9 av: dijete

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

Anmäl
2009-10-22 23:38 #10 av: Metinia

#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?

Anmäl
2009-10-22 23:49 #11 av: dijete

#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.

Anmäl
2009-10-23 00:08 #12 av: IdaL

#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.

Anmäl
2009-10-29 20:45 #13 av: Katter3

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

Anmäl
2010-01-16 12:24 #14 av: Amantha

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

Anmäl
2010-01-16 12:26 #15 av: Futurity

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

Anmäl
2010-01-16 12:32 #16 av: Amantha

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

Vad/hur gör man då?

Anmäl
2010-01-16 14:27 #17 av: IdaL

#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.

Anmäl
2010-02-14 16:22 #18 av: [Ebfotograf]

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

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-04-29 22:18 #19 av: pennyz

Bra skrivet, till & med jag fattade ju ^^

Anmäl
2010-09-24 21:15 #20 av: Metinia

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).

Anmäl
2010-09-24 23:46 #21 av: [Beavis]

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å:            <FORM TEXTAREA COLS="50" ROWS="75" WRAP="virtual" METHOD="POST" ACTION="mailto:användare@hotmail.com? subject="dinhemsida" ENCTYPE="text/plain">

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.

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-09-25 00:13 #22 av: IdaL

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

Anmäl
2010-09-25 00:55 #23 av: [Beavis]

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

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-10-16 02:39 #24 av: [Beavis]

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?

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-10-16 14:02 #25 av: IdaL

#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?

Anmäl
2010-10-16 16:53 #26 av: [Beavis]

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:

<form
action="mailto:faa@faa.se"
method="POST"
enctype="text/plain"
name="konvent skane">
<table border="0" width="500" cellspacing="1" cellpadding="5" align="left" height="135">

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

En annan:

<FORM METHOD="POST" ACTION="mailto:hellchild666@hotmail.com?" subject="Testformular" ENCTYPE="text/plain">
<title>tableform</title>
<TABLE cellpadding="0" cellspacing="0" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" rightmargin="0" basefont="arial" width="100%" height="100%" border="0">

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

 

_______________________________

Medhjälpare på: rörelsehinder.ifokus.se , hemsidor.ifokus.se

 

Anmäl
2010-10-17 18:59 #27 av: johan-ahlback

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

Anmäl
2013-02-01 08:09 #28 av: velepa1986

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

Anmäl
2013-02-01 14:01 #29 av: IdaL

#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.

Anmäl
2013-02-01 15:59 #30 av: velepa1986

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

Anmäl
2013-02-01 21:41 #31 av: IdaL

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

Anmäl
2013-02-02 07:57 #32 av: velepa1986

#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

Anmäl
2013-02-02 09:03 #33 av: velepa1986

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

Anmäl
2013-02-02 11:43 #34 av: IdaL

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.

Anmäl
2013-02-02 13:13 #35 av: velepa1986

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

Anmäl
2013-02-02 13:48 #36 av: IdaL

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

Anmäl
2013-02-02 14:06 #37 av: velepa1986

#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.

Anmäl
2013-02-02 21:02 #38 av: IdaL

#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.



Anmäl
2013-02-03 08:57 #39 av: velepa1986

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

Anmäl

Det finns en till kommentar till den här diskussionen. Den är bara synlig för medlemmar på iFokus. För att läsa kommentaren, logga in eller registrera dig på iFokus.