Styling Forms

The attribute selectors can be useful for styling forms without class or ID:

HTML file: Displayed by browser:
<style>
input[type="text"] {
   width: 150px;
   display: block;
   margin-bottom: 10px;
   background-color: yellow;
}
input[type="button"] {
   width: 120px;
   margin-left: 35px;
   display: block;
}
</style>
<body>
<form name="input" action="" method="get">
  Firstname:<input type="text" name="Name" value="Peter" size="20">
  Lastname:<input type="text" name="Name" value="Griffin" size="20">
  <input type="button" value="Example Button">
</form>
</body>
Firstname: Lastname:

Back button Table of Contents Next button