CSS Walk 8 Form formating

 

html file for the formulary

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>CSS Course</title>

  </head>

  <body>

    <form>

      <label for="nombre">Nombre:</label>

      <input type="text" id="nombre" placeholder="introduzca su nombre" />

      <label for="email">email:</label>

      <input type="email" id="email" placeholder="introduzca su email" />

      <label for="mensaje">Mensaje:</label>

      <textarea id="mensaje" placeholder="introduzca su mensaje"></textarea>

      <input type="submit" value="enviar" />

    </form>

  </body>

</html>

 

browser output:

 

With CSS let´s adjust their width and put inside a box, 30% of the width.

form {

  width: 30%;

  border: 1px solid rgb(0, 153, 255);

}

Adjust the space of the elements with margin and padding

form {

  width: 30%;

  border: 1px solid rgb(0, 153, 255);

  margin: 20px;

}

form {

  width: 30%;

  border: 1px solid rgb(0, 153, 255);

  margin: 20px;

  padding: 20px;

}

 

To adjust the label and the input, change the width label to 100% and make it display: block;

 

form {

  width: 30%;

  border: 1px solid rgb(0, 153, 255);

  margin: 20px;

  padding: 20px;

}

label {

  font-size: 12px;

  display: block;

  width: 100%;

}

 

 

Adjust the input elements to fill the horizontal at 100% and make a padding.

form {

  width: 30%;

  border: 1px solid rgb(0, 153, 255);

  margin: 20px;

  padding: 20px;

}

label {

  font-size: 12px;

  display: block;

  width: 100%;

}

input,

textarea {

  margin-bottom: 10px;

  width: 100%;

  padding: 10px;

}

 

 

 The input elements with the padding outs the box so adjust with

 

input,

textarea {

  margin-bottom: 10px;

  width: 100%;

  padding: 10px;

  box-sizing: border-box;

}

 

Let´s make a little adjust to the input with

  border: 1px solid #aaa;

 

and set the border of color when focus on an input, adjust the textarea to only change the vertical size with min and max height.

form {

  width: 30%;

  border: 1px solid rgb(0, 153, 255);

  margin: 20px;

  padding: 20px;

}

label {

  font-size: 12px;

  display: block;

  width: 100%;

}

input,

textarea {

  margin-bottom: 10px;

  width: 100%;

  padding: 10px;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

  border: 2px solid #aaa;

}

input:focus,

textarea:focus {

  border: 2px solid rgb(12, 156, 204);

}

textarea {

  resize: vertical;

  max-height: 150px;

  min-height: 40px;

}

 

 

Adjust the input submit 

 

input[type="submit"] {

  margin-bottom: 0;

  background: rgb(12, 156, 204);

  border: none;

  color: white;

}

 

To change the color of the input submit when mouse is over it

 

input[type="submit"]:hover {

  background: rgb(69, 189, 230);

  cursor: pointer;

}

 

finally change the border-radius of the input and textarea.

 

eot