tailieunhanh - Tự học HTML và CSS trong 1 giờ - part 37

Tham khảo tài liệu 'tự học html và css trong 1 giờ - part 37', 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ả | 336 lesson 10 Designing Forms Looking at the style sheet you should get some idea of how the form will be laid out. Each field will be in its own div and I ve added a margin to the bottom of each of them. Just as I did in the login form example earlier I ve added a left margin for the Submit button so that it lines up with the other fields. Most of the styling has to do with the labels. In this form I am using labels in two ways first to create a left column of labels for the form and second to add clickable labels to the radio buttons and check boxes. To distinguish between them I m using a class called field which I apply to the field-level labels. I ve also got a class called required that will be used with labels on required fields. Now that you ve seen the styles let s look at the body of the page. After some introductory text we open the form like this form action register method post enctype multipart form-data Because this form contains a file upload field we have to use the post method and the multipart form-data enctype in the form tag. The action attribute points to a CGI script that lives on my server. Next we start adding form inputs. Here s the name input div label class required field for name Name label input name name div All the inputs will follow this basic pattern. The input and its label are nested within a div . In this case the label has the classes field and required. The only attribute included in the input tag is the field name because the default values for the rest of the attributes are fine. Next is the gender field which uses two radio buttons div label class required field Gender label label input type radio name gender value male male label label input type radio name gender value female female label div As you can see the radio button group includes two controls both with the same name establishing the group . Because we didn t include line breaks between the two fields they appear side by side in the form. Here s an instance where