thiết kế form theo tableless style

thiết kế form theo tableless style 2007-07-08 08:37:27

HTML tạo form không sử dụng table:

[CSS]
label{
float: left;
width: 120px;
font-weight: bold;
}

input, textarea{
width: 180px;
margin-bottom: 5px;
}

textarea{
width: 250px;
height: 150px;
}

.boxes{
width: 1em;
}

#submitbutton{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}

br{
clear: left;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
[/CSS]

<form>

<label for="user">Name</label>
<input type="text" name="user" value="" /><br />

<label for="emailaddress">Email Address:</label>
<input type="text" name="emailaddress" value="" /><br />

<label for="comments">Comments:</label>
<textarea name="comments"></textarea><br />

<label for="terms">Agree to Terms?</label>
<input type="checkbox" name="terms" class="boxes" /><br />

<input type="submit" name="submitbutton" id="submitbutton" value="Submit" />

</form>

Tra loi 5 comment(s) TG 2007-07-08 08:37:27

noname 2007-07-10 10:12:19

TG giải thích thêm cho rõ ràng. Ví dụ cái
br{
clear: left;
}
có ý nghĩa gì
và
.boxes{
width: 1em;
}
là sao, mình không hiểu "em" là đơn vị nào,
Với lại cái tabless form này chỉ chạy đúng trên FF

Tra loi