I need more help on styling a form.

**Andwise** · May 9, 2010 18:45

I am trying to alter this form so that the labels/text is on the top of the inputs/textarea. I have been trying to get it to work but cannot figure it out.

Any and all help is appreciated.

Thanks,
AC

**Force Flow** · May 9, 2010 20:19

Do you have the code for the form you're working with?

**Paul O'B** · May 10, 2010 03:57

If you set the label element to display:block then the input will automatically drop down under it.

e.g.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
form {
    margin:0;
}
.details label {
    display:block;
    padding:2px;
}
.details input {
    display:block;
    margin:0 0 10px;
}
</style>
</head>
<body>
<form class="details" name="form1" method="post" action="">
    <fieldset>
    <legend>Personal Details</legend>
    <div>
        <label for="name">Enter Name :</label>
        <input type="text" name="name" id="name">
    </div>
    <div>
        <label for="address">Enter Address :</label>
        <input type="text" name="address" id="address">
    </div>
    </fieldset>
</form>
</body>
</html>

**Trapped** · May 10, 2010 04:24

Just as Paul said, applying display:block to the input/submit (or even better to input/text) it will push everything on its side(s) to a next row.

User Tag List

Thread: I need more help on styling a form.

Thread Tools

Display

I need more help on styling a form.

Bookmarks

Bookmarks

Posting Permissions