Nu ska vi lära oss att skapa en webbsida som innehåller ett formulär. Det kan användas t ex till
intresseförfrågan. Eller till att boka upp sig på ett nyhetsbrev eller liknande.
Formulära grundstruktur
För att få ett formulär på en webbsida genom att placera <FORM> och slutmärket </FORM>
Man kan lägga till:
<FORM ACTION="mailto:min@epostadress.se" METHOD="POST" ENCTYPE="text/plain">
<INPUT TYPE="checkbox" NAME="Bytt adress!" VALUE="JA!"> Jag har bytt adress!
<TABLE BORDER="1" WIDTH="360">
<TR>
<TD WIDTH="80">Namn:</TD>
<TD WIDTH="280"><INPUT TYPE="text" SIZE="30" NAME="Namn"></TD>
</TR>
<TR>
<TD WIDTH="80">E-post:</TD>
<TD WIDTH="280"><INPUT TYPE="text" SIZE="30" NAME="Epost"></TD>
</TR>
<TR>
<TD WIDTH="70" valign="top">Synpunkter:</TD>
<TD WIDTH="280"><TEXTAREA NAME="Synpunkter" ROWS="3" COLS="27" WRAP="soft">
</TEXTAREA>
</TD>
</TR>
<TR>
<TD WIDTH="360" COLSPAN="2" ALIGN="center">
<INPUT TYPE="submit" VALUE="skicka">
<INPUT TYPE="reset" VALUE="Börja om"><BR>
</TD>
</TR>
</TABLE>
</FORM>
CHECKED= Betyder att den rutan ska vara förvald.
Då ser det ut så här:
Vilken är ditt favoritämne?
Engelska
Svenska
Matte
Sen finns det Password attribut:
<INPUT TYPE="password" SIZE="20" NAME="hemligt">
Så här ser det ut: (Skriv någonting så blir det stjärnor)
Sen finns det:
<INPUT TYPE="text" SIZE="12" MAXLENGTH="11" NAME="personnummer" VALUE="nnnnnn-nnnn">
Då ser det ut så här:
Kryssrutor
Ett exempel på kryssrutor:
<P>Vilket eller vilka ämnen är du bra i?</P>
<INPUT TYPE="checkbox" NAME="Engelska" VALUE="Ja">Engelska
<INPUT TYPE="checkbox" NAME="Svenska" VALUE="Ja">Svenska
<INPUT TYPE="checkbox" NAME="Matte" VALUE="Ja" CHECKED>Matte
Det blir så här:
Vilket eller vilka ämnen är du bra i?
Engelska
Svenska
Matte
Sen finns det Listrutor:
<P>Vilket ämne tycker du om?
<SELECT NAME="intressen">
<OPTION>Matte
<OPTION>Svenska
<OPTION>Engelska
<OPTION>Arabiska
<OPTION>Webbdesign
</SELECT></P>
Så här der det ut:
Vilket ämne tycker du om?
Skapa en knapp:
<INPUT TYPE="submit" VALUE="skicka">
Blir så här:
Vill du få knappen att göra något så skriver man så här:
<BUTTON NAME="klick" VALUE="inf01" TYPE="button" ONKLICK='info()'>Återställ
</BUTTON>
Så här blir det: