Gå til innhold

Skjema med html og css

Inc

Av Inc
i Programmering og webutvikling

Anbefalte innlegg

Inc

Inc

Skrevet
Skrevet (endret)

Koden som er så simpel som dette får tusen feil i validatoren fordi alt står i html og ikke i med css. Men jeg får ikke det til å funke skikkelig med css. Hvordan ser denne ut i css?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<form action="MAILTO:meg@månen.uni" method="post" enctype="text/plain">

<h3>Tilbakemeldingskjema</h3>
navn:<br>
<input type="text" name="name"
value="Ditt navn" size="20">
<br>
epost:<br>
<input type="text" name="mail"
value="Din epost" size="20">
<br>
<form action="">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car: 
<input type="checkbox" name="vehicle" value="Car" />
<br/>
<br>
<input type="submit" value="Send">
<input type="reset" value="Reset">

</form>
</body>
</html>

Endret av regga
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Ståle

Ståle

Skrevet
Skrevet

CSS styler bare skjemaet ditt. Du har ikke mye styling i den koden der egentlig uansett.

 

Det som er mest feil, er at du har glemt a avslutte <input> taggene, noe XHTML krever.

 

Og sa ma du ha feks en paragraf rundt alt inni <form>en.

 

<br> skal vaere <br /> i XHTML.

Lenke til kommentar
Inc

Inc

Skrevet
  • Forfatter
Skrevet (endret)

Har ikke laget noen stilark til denne. All koden her er jo bare klippet og limt fra w3skolen.

Får rett litt på de taggen du sa og se om det hjelper litt:)

Bare synes det var så merkelig med så mye feil fra en side som lærer bort koder...

edit: kan jo være fordi det skulle være en ren html og ikke xhtml strict om det har noe å si.

Endret av regga
Lenke til kommentar
Inc

Inc

Skrevet
  • Forfatter
Skrevet (endret)

Får fremdeles opp feil. Blant annet disse:

-<form> er ikke lov inni <p>

-<br> er ikke lov inni <form>

-<input> er ikke lov inni <form>

-<form> er ikke lov inni <form>

 

<p><form action="MAILTO:meg@månen.uni" method="post" enctype="text/plain">

<h3>Tilbakemeldingskjema</h3>
navn:<br/>
<input type="text" name="name"
value="Ditt navn" size="20"></input>
<br/>
epost:<br/>
<input type="text" name="mail"
value="Din epost" size="20"></input>
<br/>
<form action="">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" /></input>
<br/>
I have a car: 
<input type="checkbox" name="vehicle" value="Car" /></input>
<br/>
<br/>
<input type="submit" value="Send"></input>
<input type="reset" value="Reset"></input>

</form></p>

 

får ikke lov til noe jo :(

Endret av regga
Lenke til kommentar
j--

j--

Skrevet
Skrevet 

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Whoppi</title>
</head>
<body>
<h1>Tilbakemeldingskjema</h1>
<form action="MAILTO:meg@månen.uni" method="post" enctype="text/plain">
<fieldset>
<label for="navn">Navn</label>
<input type="text" id="navn" name="name" value="Ditt navn" size="20" />
<br/>
<label for="mail">Epost</label>
<input type="text" id="mail" name="mail" value="Din epost" size="20" />
<br/>
<label for="vehicle_bike">I have a bike</label>
<input type="checkbox" id="vehicle_bike" name="vehicle" value="Bike" />
<br/>
<label for="vehicle_car">I have a car</label>
<input type="checkbox" id="vehicle_car" name="vehicle" value="Car" />
<br/>
<input type="submit" value="Send"></input>
</fieldset>
</form>
</body>
</html>

 

Denne skal være grei. En annen ting er hva du faktisk skal med xhtml.. ;)

Lenke til kommentar
Inc

Inc

Skrevet
  • Forfatter
Skrevet (endret)

Denne som jeg endret litt på fikk ingen feil. Hvorofr er den så mye bedre?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<form method="post" action="http://www.powertech.no/cgi-bin/[email protected]">
<h2><input type="hidden" name="subject" value="Kontakt"></input></h2>
<h2><input type="hidden" name="returnurl" value="fullfort.php"></input></h2>
<table border="0">
<tr>
<td>Navn:</td>
<td>
<h2><input name="Name" type="text" size="35"></input></h2>
</td>
</tr>
<tr>
<td>
E-post:
</td>
<td>
<h2><input name="E-mail" type="text" size="35"></input></h2>
</td>
</tr>
<tr>
<td>
Emne:
</td>
<td>
<h2><input name="Emne" type="text" size="35"></input></h2>
</td>
</tr>
<tr>
<td valign="top">
Melding:
</td>
<td>
<textarea name="Melding" cols="30" rows="20" name="Melding"></textarea>
</td>
</tr>
<tr>
<td> </td>
<td align="left">
<h2><input type="submit" value=" Send "></input></h2>
<h2><input type="reset" value=" Tøm skjemaet "></input></h2>
</td>
</tr>
</table>
</form>
</body>
</html>

 

Takker for en clvn

Endret av regga
Lenke til kommentar
PHPdude

PHPdude

Skrevet
Skrevet (endret)

Jeg ville ha skrevet det sånn:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form action="MAILTO:meg@månen.uni" method="post" enctype="text/plain">
<h3>Tilbakemeldingskjema</h3>
<fieldset><legend>Kontaktinfo</legend>
	<label>Navn: <input type="text" name="name" value="Ditt navn" /></label>
	<label>Epost: <input type="text" name="mail" value="Din epost" /></label>
</fieldset>
<fieldset><legend>Kjøretøy</legend>
	<label><input type="checkbox" name="vehicle" value="Bike" /> Bike</label>
	<label><input type="checkbox" name="vehicle" value="Car" /> Car</label>
</fieldset>
<fieldset>
	<input type="submit" value="Send" />
	<input type="reset" value="Reset" />
</fieldset>
</form>
</body>
</html>

Så er det bare å legge til noen enkle CSS-regler for å pynte litt.

Feilene du hadde var at stort sett at du ikke hadde lukket taggene, i XHTML kan du ikke la tagger bli stående åpne.

<input type="text" name="mail" value="Din epost" size="20">

Dette er ikke lov siden <input> aldri blir lukket, derimot kan du gjøre det sånn

<input type="text" name="mail" value="Din epost" size="20" />

Måten du gjorde det i den siste posten din er også lov, men unødvendig tungvindt og dårlig XML:

<input type="text" name="mail" value="Din epost" size="20"></input>

Endret av PHPdude
Lenke til kommentar
Stian Jacobsen

Stian Jacobsen

Skrevet
Skrevet

Som flere nevner, så er det lurt å bruke <fieldset>.. Dette er fordi XHTML er ganske strikt på korrekt markup (Hense the name "strict") og plassering av block elementer i inline elementer..

Du har ikke lov til å legge et "block element" i en "inline element"..

 

http://www.cs.sfu.ca/CC/165/sbrown1/wdgxhtml10/block.html

http://www.cs.sfu.ca/CC/165/sbrown1/wdgxhtml10/inline.html

 

Her er en korrekt markup

<form>

<fieldset>

<label></label><input>

</fieldset>

</form>

 

-- Utfyllende --

 

<form method="post" action="http://www.google.no">
 <fieldset>
<legend>Søk på google</legend>
<label for="term">Søk etter:</label><input type="text" name="q" id="term" size="25" />
 </fieldset>
</form>

Denne koden er validert..

 

Lite tips, om du er usikker, så sjekk med validatoren først

http://validator.w3.org/#validate_by_input

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Markup test</title>
 </head>
<body>
<!-- INPUT CODE HERE -->

<!-- END CODE INPUT -->
</body>
</html>

Lenke til kommentar
j--

j--

Skrevet
Skrevet
Supert. Takk for utfyllende svar :)

 

Men noe løsning på denne?

Den "check" boksen, kan det gjøres slik at kun en kan hakes av for?

<label for="vehicle_bike">I have a bike</label>
<input type="radio" id="vehicle_bike" name="vehicle" value="Bike" />
<br/>
<label for="vehicle_car">I have a car</label>
<input type="radio" id="vehicle_car" name="vehicle" value="Car" />

Dette du tenker på?

Lenke til kommentar
Inc

Inc

Skrevet
  • Forfatter
Skrevet
Supert. Takk for utfyllende svar :)

 

Men noe løsning på denne?

Den "check" boksen, kan det gjøres slik at kun en kan hakes av for?

<label for="vehicle_bike">I have a bike</label>
<input type="radio" id="vehicle_bike" name="vehicle" value="Bike" />
<br/>
<label for="vehicle_car">I have a car</label>
<input type="radio" id="vehicle_car" name="vehicle" value="Car" />

Dette du tenker på?

Ja, nettopp :=) men det funker ikke med checkbox, bare med radio?

Lenke til kommentar
Stian Jacobsen

Stian Jacobsen

Skrevet
Skrevet
Supert. Takk for utfyllende svar :)

 

Men noe løsning på denne?

Den "check" boksen, kan det gjøres slik at kun en kan hakes av for?

<label for="vehicle_bike">I have a bike</label>
<input type="radio" id="vehicle_bike" name="vehicle" value="Bike" />
<br/>
<label for="vehicle_car">I have a car</label>
<input type="radio" id="vehicle_car" name="vehicle" value="Car" />

Dette du tenker på?

Ja, nettopp :=) men det funker ikke med checkbox, bare med radio?

Du kan bruke javascript til dette, google it

Lenke til kommentar
Vindstille

Vindstille

Skrevet
Skrevet (endret)
Ja, nettopp :=) men det funker ikke med checkbox, bare med radio?

Det er det som er poenget. Checkbokser er for enable-disable eller velge flere ting. Radioknapper er "velg én av disse bokser". Grunnen til at de har forskjellig design er nettopp at man enkelt skal kunne skille mellom dem.

 

clvn: En liten rettings. XML-deklarasjonen bør ikke brukes når man sender XHTML med text/html (som alle gjør for å få det til å funke i IE). Grunnen er at det sender IE inn i Quirks-mode og kun sider som faktisk er XHTML/XML bør bruke denne. (Det er det ikke når det blir sendt som text/html. Da blir det behandlet om som det skulle vært vanlig html)

Endret av JonT
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...