Submodule 9.2: The CSS of forms

The fieldset

The below CSS rules are define the appearance of the fieldset. Using CSS we can change both the display of the automatically created box and the appearance of the text contained in this field.

The CSS rules:

#fieldset {
  color: #6E3F19;
  font-size:1.2 em;
  font-weight: bold;
  background: #F5F5DC;
} 
/*....*/
<fieldset id="fieldset">
  /*your code goes here*/
</fieldset>

will create a page displayed as:

The input[type=submit]

The below CSS rules define the appearance of the submit button. By default, a button has a grey background and square shape. However, using CSS rules we can create a button as we want it.

The CSS rules:

input[type=submit] {
  width: 16%;
  background-color: #6E3F19;
  color: #F5F5DC;
  padding: 14px 5px 14px 5px; 
  border-style : 2px dashed; 
  border-color: rgb(162, 101, 52);
  border-radius:18px;
 }

will create a page displayed as:

The required attribute

You may have noticed that usually, the required fields of a form have an asterisk after the title. 

In order to create that we create a div and give it a class ( in this case the class is "required"). This div includes all the other elements. 

In the CSS, we call the class required and then depending on the element that includes the title we write the appropriate expression. 

Notice that here we use the expression element:after. :after belongs to CSS Pseudo Elements. One use of these elements is to insert content before or after an element.

The CSS rules:

.required label:after { content:"*"; }
.required p:after { content:"*"; }
/*...*/
<div class="required">
  /*The label and input elements*/
<div>

will create a page displayed as:

Exercise

For more information: https://www.w3schools.com/css/css_form.asp

Exercise

1. Open your editor, create a new file and save it as exersice09.2.html in the folder "Exercises".
2. Copy the following code and paste it into the new file. This code includes everything that we have explained in this module.
3. Save the file. Is everything ok? You can experiment either with the CSS or the HTML (e.g add a new form element).
   

View code: