폼 꾸미기

<form class="form">
  <p>
    <label for="name">이름</label>
    <input id="name" name="name">
  </p>
  <p>
    <label for="memo">남길 말</label>
    <textarea id="memo" name="memo" rows="3"></textarea>
  </p>
  <p><button class="submit">보내기</button></p>
</form>

.form label {
  display: block;      /* 라벨을 칸 위로 올립니다 */
  margin-bottom: 4px;
  font-size: 0.9rem;
  color: #3b4252;
}

input, textarea {
  width: 100%;
  box-sizing: border-box;
  /* 폼 요소는 글꼴을 물려받지 않습니다. 직접 적어야 합니다. */
  font: inherit;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

input:focus, textarea:focus {
  outline: 2px solid #6e56cf;
  outline-offset: 1px;
  border-color: #6e56cf;
}

.submit {
  font: inherit;
  background: #6e56cf;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
}

<p>전자 메일 칸에 아무 글자나 넣어 보십시오</p>
<p>
  <label class="req" for="em">전자 메일</label>
  <input id="em" type="email" required>
</p>
<p>
  <label for="off">고칠 수 없는 칸</label>
  <input id="off" value="고정 값" disabled>
</p>

label { display: block; margin-bottom: 4px; }
input { font: inherit; padding: 8px; border: 1px solid #ccc; border-radius: 6px; }

/* 필수 표시를 마크업 없이 붙입니다(2.3) */
.req::after { content: " *"; color: #c92a2a; }

/* 값이 있는데 모양이 맞지 않을 때만 빨갛게 */
input:not(:placeholder-shown):invalid {
  border-color: #c92a2a;
  background: #fff5f5;
}

/* 고칠 수 없는 칸 */
input:disabled { background: #f1f3f5; color: #868e96; cursor: not-allowed; }

/* 한 줄로 확인 상자와 선택 단추의 색을 맞춥니다 */
input[type="checkbox"], input[type="radio"] {
  accent-color: #6e56cf;
}