Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum. Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden. Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!

We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.

Team Webprofis

HTML form met opmaak in CSS

bewerkt za 25 okt 2014 in XHTML, XML Posts: 1
Beste lezer,

Ik heb een eenvoudig formuliertje gemaakt in HTML, waarvan de inhoud door PHP wordt afgehandeld. Dat gaat allemaal goed.

Nu heb ik een paar eerste stappen gezet om de lay-out van mijn formulier wat op te knappen met CSS, maar dat gaat dus niet goed.

Mijn HTML-formulier ziet er als volgt uit:


<html>
<head>
<title>
oefenbestand formulier

<link href = "invulformulier.css" type = "text/css" rel = "stylesheet" />
</title>
</head>
<body>

<form action = "http://localhost/H4A projectbeheer en planning/php/formulier uitlezen.php" method = "post">
<div>
<input type = "hidden" name = "onderwerp" value = "melding onderhoud">
<input type = "hidden" name = "redirect" value = "../html/homepage.html">

<label for = "naam_afzender">naam:</label>
<input id = "naam_afzender" type = "text" name = "naam_afzender"> <br />

<label for = "mail_afzender">e-mail:</label>
<input id = "mail_afzender" type = "text" name = "mail_afzender"> <br />

<label for = "tekst_body">Uw reactie:</label>
<textarea id = "tekst_body" cols = "30" rows = "4" name = "tekst_body"></textarea> <br />

<input type = "submit" value = "verzenden">
</div>
</form>

</body>
</html>

Het CSS-bestandje ziet er als volgt uit (staat in dezelfde map als mijn HTML-formulier):


form
{
border-width: 1px;
border-style: dashed;
border-color: #cccccc;

padding: 15px;
width: 350px;

font-family: Arial, Helvetica, sans-serif;
font-size: small;
}

label
{
float: left;
width: 75px;
text-align: right;

margin-right: 15px;
}

input
{
background-color: #f5f5f5;

font-size: x-small;

border-width: 1px;
border-style: solid;
border-color: #cccccc;

margin-bottom: 10px;
}

textarea
{
width: 250px;
height: 100px;
background-color: #f5f5f5;

border-width: 1px;
border-style: solid;
border-color: #cccccc;

font-family: Arial, Helvetica, sans-serif;
font-size: small;

margin-bottom: 10px;
}

Ik heb voor een andere pagina (geen formulier) ook een css-bestandje gemaakt en dat ging prima, dus het is mij nu niet helemaal duidelijk wat hier dan fout gaat. Vast iets heel simpels, maar na verschillende dingen geprobeerd te hebben weet ik het nu even niet.

Kan iemand mij vertellen wat ik fout doe?

Bij voorbaat dank,

Koen.

UPDATE

Zojuist mijn blunder ontdekt. Mijn had niet tussen de tags mogen staan. Wat kan een mens zich zo blind staren op zo'n kleinigheid.

Excuses voor de onnodige vraag!

Reacties

  • PMPosts: 732
    tip:

    Geef je form een id of class, en plaats de ellementen in de style in de juiste id of class.
    bv. en in je style .contact-form input{ ..... }

    Als je ooit een ander form erbij zet ergens en je wilt deze gecentreerd of dergelijke met andere borders/backgrounds dan scheelt dat een hoop zoek en edit werk ;)
    If it's not fun, you're not doing it right!
Login of Registreer om te reageren.