Adjusting the input field and button

Step by step

To adjust the input field and button, proceed as follows:

1. View the elements in the Web developer tools. The word Email is reproduced using an HTML label. The text field and the button have the input type.

   Copy

   1
   2
   3
   <label for="email" class="login">E-mail</label>
   <input class="login" type="text" name="email" id="email" size="20" value="">
   <input type="submit" class="submit_login" value="Send">

   Note: Use the classes to allocate styles if not all texts in front of input fields are to be handled the same way, and the button and the text field are to have different styles.

2. Set the text to bold and define spacing between the text and the input field on the right.

   The text Email and the input field belong to the login class. If the text in the input field is not to be displayed in bold, the text must be addressed as follows:

   Copy

   1
   2
   3
   4
   5
   label.login {
       font-weight: bold;
       margin-right: 10px;
       }
   

3. Next define a border colour for the text field:

   Copy

   1
   2
   3
   4
   input.login{
       border: 1px solid #696a6a;
       }
   

   The border width is 1 px. Solid specifies that the border is displayed as a sold line. This is followed by the colour value.

4. If necessary, the corners of the text field can be displayed rounded:

   Copy

   1
   2
   3
   4
   5
   input.login{
       border: 1px solid #696a6a;
       border-radius: 4px;
       }
   

   The pixel value specifies the degree of rounding.

5. Now define spacing between the text field and the button on the right:

   Copy

   1
   2
   3
   4
   5
   6
   input.login{
       border: 1px solid #696a6a;
       border-radius: 4px;
       margin-right: 10px
       }
   

6. Now give the button an individual appearance. To do this, define a background colour, remove the border, change the text colour and allocate padding and a width for the button.

   Copy

   1
   2
   3
   4
   5
   6
   7
   8
   .submit_login{
       background-color: #78bdda;
       border: none;
       color: white;
       padding: 5px 20px;
       width: 150px;
   }
   

7. To give the user haptic feedback when they touch the button with the mouse pointer, add the following entry:

   Copy

   1
   2
   3
   4
   5
   6
   7
   8
   9
   .submit_login{
       background-color: #78bdda;
       border: none;
       color: white;
       padding: 5px 20px;
       width: 150px;
       cursor: pointer;
   }
   

8. Click (Save).
9. Click to view the result.

• You have adjusted the input field and button.