Without applying cascading style sheets, the form elements will be displayed in accordance with the browser used and operating system default settings. but using CSS. Allows you to create forms corresponding to the design of your site.

Decision
Form element style, like any other HTML element, can be set using CSS.

Fig. 6.1. Default form view in Firefoxi browser

Pictured by fig. 6.1 The form is decorated in accordance with the default settings used by the Firefox browser under Windows XP. Its species will change when viewing in various browsers under different platforms. Below is a typical form:

"http://www.w3.org/1999/XHTML"lang \u003d "en-us"\u003e

What is your name?

Choose your favorite color: blue red green yellow

Floor?
Male
Female

Comment:

The appearance of this form can be changed by writing styles for elements:

form (Border: 1px dotted #aaaaaa; padding: 0 .5em;) Form Div (Margin-Bottom: 1em;) Input (Color: # 00008B; Background-Color: # Add8e6; Border: 1px Solid # 00008B;) SELECT ( width: 100px; Color: # 00008B; background-color: # add8e6; border: 1px solid # 00008B;) Textarea (Width: 200px; Height: 40px; Color: # 00008B; Background-color: # Add8e6; Border: 1px Solid # 00008B;)

Now the form looks like in Fig. 6.2.

Discussion
As you probably guessed, setpoints of styles for HTML elements fORM, INPUT, TEXTAREA and SELECT They will be applied to each of their instance located on the page with which the style table file is associated. To change the form of field fields, we can use many different properties. Using CSS you can manage almost all aspects of the field :

input (Color: # 00008B; background-color: # add8e6; border: 1px solid # 00008B; font: 0 .9em Arial, Helvetica, Sans-Serif; Padding: 0 .2em; width: 200px;)

Council
Forms and background color. Part of the visitors of your site can discern the colors badly, and a part may use a voice browser. Therefore, the colors should never perform important functions - for example, the instructions like "yellow fields are required to fill" should be under the complete prohibition.

Consider the properties value in more detail:

Laboratory work number 4

Cascading Style Tables (CSS)

purpose of work

Meet the concept of cascading tables styles CSS., as well as obtaining practical skills of their use.

Theoretical information.

Internet Explorer. offers you your style, called default. This style involves a white pure background, black font color, all references are underlined and blue, etc., what if you do not like all this? You already know how to change various attributes directly. Even if the same objects are the same, you already know how to apply classes. But there is another possibility. To specify the entire style of the document, the so-called hierarchical style tables are used (Cascade Style Sheets - CSS), which are a set of properties of different objects. Something they resemble classes, but if the class is created inside the document and can be applied, and maybe not, then CSS, if it is connected, the installations in it affect all objects in the document.

Introduction to CSS.

CSS is very similar to classes, only with the difference that the style is described in them for the already known object. For a visual example, inspect your room now (office, hall ...) in which you are. Surely, you will see many different items (table, chair, window, computer). Each of these object objects have characteristics, and you need to make a list of these items and their characteristics. Maybe you will have something as follows:

table:
Brown color
Material - wooden
a computer:
White color
Material - Plastics
Purpose - for work

Of course, you can go to another way, but only CSS is compiled exactly where, instead of objects, objects protrude, and their characteristics are a little different. For example, here is an excerpt of such a document:

body.
{
background-color: rgb (255,255,153);
Color: RGB (51,51,153);
}
h3.
{
Color: RGB (255,0,0);
Font-Family: Arial, Helvetica;
}

Here is asked what the style of the body and H3 element will be. Those options that are not specified by default.

Creating CSS does not require special effort and can be performed in a simple notebook, although for these purposes and exist special programsfacilitating work and clearly showing how future document will look like using this style. Look for such programs on your disk or from acquaintances.

2.2.Creating a Style Table in the Document

There are two ways to connect CSS. The first is to set it in the Style element at the beginning of the document, as a class. This is done like this (example 1):

This document

uses style tables

In this example, on the screen you will see two lines consisting of two objects: H3 and H3. Look, in which the default style of Internet Explorer has turned. But we did not make any instructions in the object itself about its style. Thus, no matter how much you have endowed objects H3 and H3, their style will always be as you specified in the stylist table.

2. 3. Style Table in separate file

If you like the style you created and you want to use it in all your documents. Or your document consists of a set HTML pages And all of them must have the same style, you do not need to enter the strings of the style table every time at the beginning of the document.

The second way to connect CSS to the Web page is creating CSS. In a separate file, and the page itself refers to this file. Then, you can write in the page only one line and still style it will be as defined in the stylist table in external file. I think it is not necessary to talk about the benefits of such a way.

So, at first you create a table, following the above rules. Then, you add to the element To enable the string style sheet similar to the following:

Link means that current page The element, REL and TYPE are connected to describe the element as a stylized table, but the HREF contains the address to which the file is with your CSS.

Dynamic change CSS.

You can dynamically change the name of the plug-in with a stylist table, accordingly, changing the style itself. Here is a function, in the JScript language, which, when calling it, if any style is already applied, removes it and connects a new one.

fUNCTION CHANGE_STYLE ()

(if (document.stylesheets.href! \u003d NULL)
document.stylesheets.href \u003d "newstyle.css";
}

If the style table is defined inside the HTML page, you can add new definitions using the AddRule function (Object, Style). Where Object is an object, and style, respectively, stylistic installations. Here is an example in which after clicking the button, a stylized table is changed (Example 2):

This document uses style sheets

This is paragraph. Click on the button to change its style

Click me

After reviewing the page with such a code, you will see how the style changes occurs by adding the installation to the style sheet.

Classes

Class is another way to install how the text should look on the page. Essentially, you define a set of styles, such as color, font thickness, its size, and so on, but do not assign it a specific tag. The class looks like this:

This example creates three classes: Regular, Superbig, Copyright. Below is shown how to apply these classes in the TEXT navigation layer.

You can also specifically bind the class tag. For example:

P.
{
Font-Size: 16pt;
Font-Weight: Bold;
}

P.small
(Font-Size: 9pt;
margin-left: 5em;
margin-right: 5em;
}
Below is shown how to apply the class