TAILIEUCHUNG - Tự học HTML và CSS trong 1 giờ - part 35

Tham khảo tài liệu 'tự học html và css trong 1 giờ - part 35', công nghệ thông tin, đồ họa - thiết kế - flash phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả | 316 lesson 10 Designing Forms margin-bottom 5px label display block float left width 150px text-align right font-weight bold margin-right 10px margin-left 160px style head body h1 Please Log In h1 form action form-processing-script method post div label for username Username label input type text name username div div label for password Password label input type password name password div div input type submit class submit value Log In div form body html At one time it was rare to see forms that were laid out without the use of tables but tables are no longer necessary thanks to CSS. Let s look at the style sheet for the form. First I added 5 pixels of margin to the bottom of the div elements to space out the form elements a bit. Then I used CSS to align the form fields vertically and right-align the labels. You can only apply widths to block-level elements so I set the display property on the labels to block. Then I used float left and a width of 150 pixels to get the form fields to move to the right of the labels. Setting the text-align property to Download from Using the form Tag 317 right for the labels moves them to the right side of the 150-pixel box I put them in. Then I just added a 10-pixel margin to create some space between the labels and the form fields and bolded the label text. To get the Submit button which has no label to line up with the other form fields I added a 160-pixel right margin. That s 150 pixels for the label and 10 pixels for the margin I added to the labels. That took a little work but I think the final page shown in Figure looks good. FIGURE A simple form. To complete the exercise let s test the form to see whether the form produces the data we expect. Here s what the data that s sent to the server looks like username someone password somepassword It s pretty measly but you can see that the names assigned to each field are tied to the values entered in those fields. You can then use a program to

• Đồ họa - Thiết kế - Flash
• tự học html và css
• html
• css
• tài liệu html và css
• thiết kế web với html và css