PDA

View Full Version : Styling forms...


stag
02-11-2007, 04:42 PM
Howdie,

Is is possible to style forms in relation to text filed areas and the submit button? Would placing an image field be able to send results like the submit function?

Cheers

davidj
02-11-2007, 05:56 PM
you can use an image field as a submit button or if you want to validate your form befor submitting it use any image and then use javascrpt to validate and then submit the form

you can style any element of a form using CSS

stag
02-13-2007, 07:41 AM
Im not sure how to go about styling the form, or at least my method didnt work. Could you show me quickly how to create a rule for a form?

Cheers

davidj
02-13-2007, 07:58 AM
html page....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
<link href="forms.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p>
<input name="textfield" type="text" class="field1" />
</p>
<p>
<input name="textfield2" type="text" class="field2" />
</p>
<p>
<input name="textfield4" type="text" class="field3" />
</p>
<p>
<select name="select" class="field4">
<option>test</option>
<option>test</option>
<option>test</option>
<option>test</option>
<option>test</option>
</select>
</p>
<p>
<textarea name="textfield3" class="field5"></textarea>
</p>
<p>
<input name="Submit" type="submit" class="field6" value="Submit" />
</p>
</form>
</body>
</html>


forms.css

.field1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
background-color: #0066CC;
height: 18px;
width: 120px;
}
.field2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
background-color: #00CC99;
height: 18px;
width: 200px;
}
.field3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF0000;
height: 20px;
width: 200px;
border: 1px solid #FF0000;
}
.field4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF6600;
height: 20px;
width: 200px;
border: 2px ridge #CC3366;
}
.field5 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #336699;
height: 70px;
width: 300px;
border: 2px dotted #FF9900;
}
.field6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CCCCCC;
height: 25px;
width: 70px;
border: 2px dotted #339966;
background-color: #6666CC;
font-weight: bold;
}