Styling Forms

Form Group

form/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <main>
    <h2>Address</h2>
    <form action="">
      <div class="form-group cep">
        <label for="cep">CEP</label>
        <input type="text" id="cep">
      </div>
      <div class="form-group street">
        <label for="street">Rua</label>
        <input type="text" id="street">
      </div>
      <div class="form-group number">
        <label for="number">Número</label>
        <input type="text" id="number">
      </div>
      <div class="form-group neighborhood">
        <label for="neighborhood">Bairro</label>
        <input type="text" id="neighborhood">
      </div>
      <div class="form-group state">
        <label for="state">Estado</label>
        <input type="text" id="state">
      </div>
      <div class="form-group city">
        <label for="city">Cidade</label>
        <input type="text" id="city">
      </div>
      <!-- <input type="submit" value="Cadastrar"> -->
    </form>
  </main>
</body>
</html>


body {
  background-color: #80deea;
  font-family: sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

main {
  background-color: #fff;
  padding: 30px;
  width: 50%;
}

main form {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas: 
    "cep cep city state neighborhood"
    "street street street street number";
  grid-gap: 1rem;
}

main form .form-group {
  display: flex;
  flex-direction: column;
}

main form .cep {
  grid-area: cep;
}

main form .street {
  grid-area: street;
}

main form .number {
  grid-area: number;
}

main form .neighborhood {
  grid-area: neighborhood;
}

main form .state {
  grid-area: state;
}

main form .city {
  grid-area: city;
}

main form label {
  font-size: .9rem;
  font-weight: bold;
  margin-bottom: .3rem;
}

main form input {
  outline: none;
  height: 1.5rem;
}

Form Inline

inline-form/index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <main>
    <h2>Address</h2>
    <form action="">
      <div class="form-group cep">
        <label for="cep">CEP</label>
        <input type="text" id="cep" class="form-control">
      </div>
      <div class="form-group street">
        <label for="street">Rua</label>
        <input type="text" id="street" class="form-control">
      </div>
      <div class="form-group number">
        <label for="number">Número</label>
        <input type="text" id="number" class="form-control">
      </div>
      <div class="form-group neighborhood">
        <label for="neighborhood">Bairro</label>
        <input type="text" id="neighborhood" class="form-control">
      </div>
      <div class="form-group state">
        <label for="state">Estado</label>
        <input type="text" id="state" class="form-control">
      </div>
      <div class="form-group city">
        <label for="city">Cidade</label>
        <input type="text" id="city" class="form-control">
      </div>
      <!-- <input type="submit" value="Cadastrar"> -->
    </form>
  </main>
</body>

</html>

body {
  background-color: #80deea;
  font-family: sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

main {
  background-color: #fff;
  padding: 30px;
  width: 40%;
}

main form {
  display: flex;
  flex-direction: column;
}

main form .form-group {
  display: flex;
  align-items: center;
  margin: .4rem;
  text-align: right;
}

main form label {
  flex: none;
  width: 100px;
  padding-right: 20px;
}

main form label::after {
  content: ":";
}

main form .form-control {
  flex: 1 1 auto;
}

main form .cep {
  grid-area: cep;
}

main form .street {
  grid-area: street;
}

main form .number {
  grid-area: number;
}

main form .neighborhood {
  grid-area: neighborhood;
}

main form .state {
  grid-area: state;
}

main form .city {
  grid-area: city;
}

main form label {
  font-size: .9rem;
  font-weight: bold;
  margin-bottom: .3rem;
}

main form input {
  outline: none;
  height: 1.5rem;
}

Form Placeholder

placeholder-form/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <main>
    <form action="">
      <h2>Address</h2>
      <input type="text" id="cep" placeholder="CEP"> <!-- 58015-435 -->
      <input type="text" id="street" placeholder="Rua">
      <input type="text" id="number" placeholder="Número">
      <input type="text" id="neighborhood" placeholder="Bairro">
      <input type="text" id="state" placeholder="Estado">
      <input type="text" id="city" placeholder="Cidade">
      <!-- <input type="submit" value="Cadastrar"> -->
    </form>
  </main>
  <script src="js/main.js"></script>
</body>
</html>


body {
  background-color: #80deea;
  font-family: sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

main {
  background-color: #fff;
  padding: 30px;
  width: 40%;
}

main form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

main form input[type=text] {
  width: 50%;
}

main form input {
  margin: 10px 0;
  padding: 10px;
  outline: none;
}

References