CSS를 사용하여 HTML 양식의 모양을 크게 향상시킬 수 있습니다.

<div>
  <form action="/action_page.php">
    <label for="okname">성명</label>
    <input type="text" id="okname" name="성명" placeholder="이름..">

    <label for="oktel">연락처</label>
    <input type="text" id="oktel" name="연락처" placeholder="010-..">

    <label for="country">국가</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
  
    <input type="submit" value="Submit">
  </form>
</div>

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

입력 필드 스타일 지정하기

width 속성을 사용하여 입력 필드의 너비를 결정합니다.

특정 입력 유형에만 스타일을 지정하려는 경우 속성 선택자를 사용할 수 있습니다.

• input[type=text] - 텍스트 필드만 선택합니다.
• input[type=password] - 비밀번호 필드만 선택합니다.
• input[type=number] - 숫자 입력 필드만 선택합니다.
• 기타...

입력 필드 여백

padding 속성을 사용하여 텍스트 필드 내에 공백을 추가합니다.

** 입력 필드가 많을 때 margin을 주어 필드밖의 공간을 추가할 수도 있습니다.

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

box-sizing 속성을 border-box로 설정했습니다.

이렇게 하면 패딩과 테두리가 요소의 전체 너비와 높이에 포함됩니다.

테두리가 있는 입력 필드

border 속성을 사용하여 테두리 크기와 색상을 변경하고 border-radius 속성을 사용하여 둥근 모서리를 추가하십시오.

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

아래쪽 테두리 만 원하는 경우 border-bottom 속성을 사용하십시오.

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

입력 필드 색 반영하기

background-color 속성을 사용하여 배경색을 입력에 추가하고 color 속성을 사용하여 텍스트 색상을 변경합니다.

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

Focused 입력 필드

기본적으로 일부 브라우저는 포커스를 클릭하면 입력 주위에 파란색 외곽선을 추가합니다.

outline : none을 추가하여 이 동작을 제거 할 수 있습니다. 입력에 연결합니다.

:focus 선택기를 사용하여 포커스가 올 때 입력 필드를 사용하여 무언가를 하십시오.

input[type=text]:focus {
  background-color: lightblue;
}

input[type=text]:focus {
  border: 3px solid #555;
}

아이콘 / 이미지가 있는 입력필드

입력 안에 아이콘이 있으면 background-image 속성을 사용하고 background-position 속성으로 배치합니다.

또한 아이콘의 공간을 확보하기 위해 큰 왼쪽 패딩을 추가합니다.

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
}

애니메이션 검색 입력 필드

이 예제에서는 CSS transition 속성을 사용하여 검색 입력이 포커스를 얻을 때 애니메이션의 너비를 애니메이션으로 표시합니다.

transition 속성에 대한 자세한 내용은 CSS 전환 장에서 나중에 배우게 됩니다.

input[type=text] {
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}

텍스트 영역(Textareas) 스타일 지정

resize 속성을 사용하여 텍스트 영역의 크기가 조절되지 않도록 하십시오 (오른쪽 하단의 "grabber"비활성화).

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

선택 메뉴 스타일

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

입력 버튼 스타일

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

** 전체 너비 버튼의 경우 width: 100% 사용

반응형 양식(Form) 

화면이 너비가 600 픽셀보다 작으면 두 열을 서로 겹치지 않게 쌓습니다.

<div class="container">
  <form action="/action_page.php">
  <div class="row">
    <div class="col-25">
      <label for="okname">성명</label>
    </div>
    <div class="col-75">
      <input type="text" id="okname" name="okname" placeholder="홍길..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="oktel">연락처</label>
    </div>
    <div class="col-75">
      <input type="text" id="oktel" name="oktel" placeholder="010-..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="country">국가</label>
    </div>
    <div class="col-75">
      <select id="country" name="country">
        <option value="australia">Australia</option>
        <option value="canada">Canada</option>
        <option value="usa">USA</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="subject">제목</label>
    </div>
    <div class="col-75">
      <textarea id="subject" name="subject" placeholder="반응형 양식.." style="height:200px"></textarea>
    </div>
  </div>
  <div class="row">
    <input type="submit" value="Submit">
  </div>
  </form>
</div>

* {
  box-sizing: border-box;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}