In the following, I assume that you will create an additional HTML file. In any case, I save this under the name kontakt.html. The kontakt.html is on the same level as the index.html that you are already familiar with.
In this first part, the basic settings are made to the form. Things like round corners, color gradients etc. will follow in the next tutorial.
The form is created within contact.html. The form is defined within the div area with the content class. Then think about which fields you want to create. I have decided to request the following information:
- Name
- e-mail address
- Comment
Of course, you have to decide for yourself what information you want to collect. In principle, however, I recommend that you only ask for the data you actually need. Most website visitors shy away from extensive forms. So keep it short.
The basic structure of my form looks like this:
<div class="content"> <formclass="form" action="#" method="post"> <fieldset> <legend>Contact us</legend> <ol> <li> <label for="name">Name:</label> <input type="text" name="name "id="name" value="" /> </li> <li> <label for="email">Email address:</label> <input type="text" name="email" id="email "value="" /> </li> <li> <label for="comment">Comment:</label> <textarea cols="32" rows="7 "name="content" id="content"></textarea> </li> <li class="button"> <liinput type="submit" name="submit "id="submit" value="Submit" /> </li> </ol> </fieldset> </form> </div>
The form does not contain any special features. A fieldset definition has been applied around the form fields. How form fields can be created and what the label elements are all about has already been sufficiently described. At this point, we will therefore concentrate fully on the design of the form.
If you call up the result in the browser, you will initially see a form that is not particularly appealing.
Of course, this needs to be improved.
First of all, basic information about the form is provided.
form { padding: 3px 0 0; margin: 10px auto; width: 550px; }
The outer and inner spacing is defined here. In addition, a width of 550 pixels is set for the form.
We continue with the fieldset design.
fieldset { padding: 10px 20px 25px; }
The spacing is also defined here.
The form fields themselves are created within an ordered ol list.
ol { list-style-type: none; margin: 0; padding: 0; }
To ensure that this list is no longer visually recognizable as a list, list-style-type: none; is used. In addition, the margins and inner spacing are each set to 0.
In the next step, the list entries are defined. These float to the left and have an inner spacing of 10 pixels.
li { float: left; padding: 10px; }
There is a special feature with regard to the button below the form. This should be aligned to the right.
li.button { float: none; clear: both; text-align: right; }The form heading
Let us now turn our attention to the legend element. The form heading is defined above it.
The definition for the heading looks like this:
fieldset legend { font-weight: bold; font-size: 22px; margin: 20px 0 0 10px; }The labels
You have already encountered the label element in this series. This label can be used to create a logical reference between the field label and the actual form field. Incidentally, there is a special feature here with regard to the CSS definition.
label { display:block; cursor: pointer; font-weight: bold; line-height: 24px; }
I equip the label element with a cursor specification, among other things. This signals to visitors that the field labels are clickable. If they then actually click on a field description, the cursor is automatically placed in the corresponding field.
Designing the form fields
The next step is to design the actual form fields. First of all, general specifications are made for input and textarea.
input, textarea { color: #3399FF border: 1px solid #3399FF; font: 13px Helvetica, Arial, sans-serif; padding: 8px 10px; width: 190px; }
These are exclusively design matters. Special attention should be paid to the frames. As soon as you place the cursor in a field, the frame color changes. Incidentally, this is not just an aesthetic aspect. In fact, it also helps visitors to fill in the form. They can always see immediately which field the cursor is currently in.
Here are some details about the multi-line text input field.
textarea { width: 430px; overflow: auto; }
The width of this field is set to 430 pixels. The instruction overflow: auto in connection with multi-line input fields may appear somewhat strange at first glance. This line is due to older versions of Internet Explorer. This browser actually displayed scroll bars in multi-line input fields even when this was not actually necessary. This beauty problem can be avoided with overflow: auto.
Designing the send button
At the moment, the Send button is still quite unadorned. This will now change. The result will look like this:
Various properties are assigned to the button.
- Background color
- Appearance of the font
- border
- Spacing
The corresponding CSS syntax is as follows:
input[type="submit"] { background-color: #3399FF; color: #fff; cursor: pointer; font: bold 1em/1.2 Georgia, "Times New Roman ", serif; border: 1px solid #000; padding: 5px 10px; width: auto; }
The specification input[type="submit"] is perhaps also worth mentioning here. This selector is used to access input elements that have the attribute-value combination type="submit".
