Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P40

This example creates a button that runs a function called verifydata when it`s clicked. You provide the label that appears on the button with the value attribute of Verify Data. Unlike Submit buttons, regular buttons don`t submit the form when they`re clicked. Hidden Form Fields Hidden form fields are used when you want to embed data in a page that shouldn`t be seen or modified by the user. The name and value pair associated with a hidden form field will be submitted along with the rest of the contents of the form when the form is submitted. To create such a field, set the field`s type to hidden and be sure to include both the name and value attributes in your tag. Here`s an example: Hidden form fields are generally used when data identifying the user needs to be included in a form. For example, let`s say you`ve created a form that allows a user to edit the name and address associated with her bank account. Because the user can change her name and address, the data she submits can`t be used to look up her account after she submits the form, plus there might be multiple accounts associated with one name and address. You can include the account number as a hidden field on the form so that the program on the server knows which account to update when the form is submitted. The File Upload Control The file control enables a user to upload a file when he submits the form. As you can see in the following code, the type for the input element is set to file: Input

Please select a file for upload:

Figure 10.10 shows a file upload control. Output file:///G|/1/0672328860/ch10lev1sec3.html (8 von 9) [19.12.2006 13:49:17] Figure 10.10. The file upload control. If you want to use a file upload field on your form, you have to do a lot of behind-the-scenes work to get everything working. For one thing, the program specified in the action attribute of your form must be able to accept the file being uploaded. Second, you have to use the post method for the form. Third, you must set the enctype attribute of the

tag to multipart/form-data. I haven`t discussed the enctype attribute because this is the only case where you`ll have to use it. Ordinarily, the default behavior is fine, but you must change the enctype in this particular case. Let`s look at a simple form that supports file uploads:

After you`ve created a form for uploading a file, you need a program that can process the file submission. Creating such a program is beyond the scope of this book, but all popular web programming environments support file uploads. file:///G|/1/0672328860/ch10lev1sec3.html (9 von 9) [19.12.2006 13:49:17] Using Other Form Controls In addition to form controls you can create using the input element, there are three that are elements in and of themselves. Using the button Element A button you create using the button element is similar to the buttons you create with the input element, except that content included between the opening and closing button tags appears on the button. Note The button element (as opposed to the input element of type="button") is not supported by versions of Netscape prior to version 6. You can create three different types of buttons: Submit, Reset, and Custom. The tag is used to create buttons. As with other form fields, you can use the name attribute to specify the parameter sent to the server, and the value attribute to indicate which value is sent to the server. Unlike buttons created with the tag, the button`s label is specified by the content within the tag, as seen in this code: Input Submit button The button element is shown in a browser in Figure 10.11. Output Figure 10.11. The button element provides a more flexible way to create form buttons. file:///G|/1/0672328860/ch10lev1sec4.html (1 von 9) [19.12.2006 13:49:18] With the tag, white space counts. If you include white space between the opening or closing tags and the content inside the tag, it might make your button look a bit odd. The best bet is to just leave out that white space. Creating Large Text-Entry Fields with textarea The textarea element creates a large text entry field where people can enter as much information as they like. To create a textarea, use the tag. To set the size of the field, use the rows and cols attributes. These attributes specify the height and width of the text area in characters. A text area with cols set to 5 and rows set to 40 creates a field that`s 5 lines of text high and 40 characters wide. If you leave out the rows and cols attributes, the browser default will be used. This can vary, so you should make sure to include those attributes to maintain the form`s appearance across browsers. The closing textarea tag is required and any text you place inside the textarea tag is displayed inside the field as the default value: Input <p>Please comment on our customer service.<br /> <textarea name="question4" rows="10" cols="60">Enter your answer here

Figure 10.12 shows a textarea element in action. Output Figure 10.12. Use textarea to create large textentry areas. [View full size image] file:///G|/1/0672328860/ch10lev1sec4.html (2 von 9) [19.12.2006 13:49:18] Tip You can also change the size of a textarea with the height and width CSS properties. (You can also alter the font using the CSS font properties as well.) Creating Menus with select and option The select element creates a menu that can be configured to enable users to select one or more options from a pull-down menu or a scrollable menu that shows several options at once. The tag defines how the menu will be displayed and the name of the parameter associated with the field. The tag is used to add selections to the menu. The default appearance of select lists is to display a pull-down list that enables the user to select one of the options. Here`s an example of how one is created: Input

Please pick a travel destination:

Indiana Fuji Timbuktu Alaska

As you can see in the code, the field name is assigned using the name attribute of the tag. The field created using that code appears in Figure 10.13. Output file:///G|/1/0672328860/ch10lev1sec4.html (3 von 9) [19.12.2006 13:49:18] ... - --nqh-- nguon tai.lieu . vn

Tin học văn phòng Đồ họa - Thiết kế - Flash Quản trị Web Cơ sở dữ liệu Quản trị mạng Kỹ thuật lập trình Hệ điều hành Phần cứng An ninh - Bảo mật Chứng chỉ quốc tế Thủ thuật máy tính Điện - Điện tử Kinh tế học Hoá học Xã hội học Môi trường

© 2024 - tailieuMienPhi

Website chạy thử nghiệm. Thư viện tài liệu miễn phí mục đích hỗ trợ học tập nghiên cứu , được thu thập từ các nguồn trên mạng internet ... nếu tài liệu nào vi phạm bản quyền, vi phạm pháp luật sẽ được gỡ bỏ theo yêu cầu