input

input type text를 포함한 다른 타입의 input들도 다룹니다. input type의 자세한 설명은 이 링크를 참고하세요.

                              
<div id="wrap">
  <div class="textBox">
      <label for="input01">라벨</label>
      <input type="text" id="input01">
  </div>

  <div class="textBox">
      <label for="input02">라벨</label>
      <input type="date" id="input02">
  </div>

  <div class="textBox">
      <label for="input03">라벨</label>
      <input type="url" id="input03">
  </div>

  <div class="textBox">
      <label for="input04">라벨</label>
      <input type="time" id="input04">
  </div>

  <div class="textBox">
      <label for="input05">라벨</label>
      <input type="week" id="input05">
  </div>

  <div class="textBox">
      <label for="input06">라벨</label>
      <input type="tel" id="input06">
  </div>

  <div class="textBox">
      <label for="input07">라벨</label>
      <input type="email" id="input07">
  </div>

  <div class="textBox">
      <label for="input08">라벨</label>
      <input type="password" id="input08">
  </div>

  <div class="textBox">
      <label for="input09">라벨</label>
      <input type="datetime-local" id="input09">
  </div>

  <div class="textBox">
      <label for="input10">라벨</label>
      <input type="month" id="input10">
  </div>

  <div class="textBox">
      <label for="input11">라벨</label>
      <input type="number" id="input11">
  </div>

  <div class="textBox">
      <label for="input12">라벨</label>
      <input type="search" id="input12">
  </div>

  <div class="textBox">
      <label>라벨</label>
      <input type="hidden">
  </div>

  <div class="textBox">
      <label for="input14">라벨</label>
      <input type="image" id="input14" alt="image">
  </div>

  <div class="textBox">
      <label for="input15">라벨</label>
      <input type="color" id="input15">
  </div>

  <div class="textBox">
      <label for="input16">라벨</label>
      <input type="button" value="value" id="input16">
  </div>
</div>
                              
                            
                              
input{display:inline-block; height: 30px; border: 1px solid #ddd; padding-left: 5px; box-sizing: border-box; 
font-family: 'Noto Sans'; vertical-align:sub; border-radius: 4px; background-color: #fff;}
.textBox+.textBox{margin-top: 50px;}
                              
                            
                              
input {
    display:inline-block;
  height: 30px;
  border: 1px solid #ddd;
  padding-left: 5px;
  box-sizing: border-box;
  font-family: 'Noto Sans';
    vertical-align:sub;
  border-radius: 4px;
  background-color: #fff;
}

.textBox + .textBox{
  margin-top: 50px;
}

Result

type : text

type : date

type : url

type : time

type : week

type : tel

type : email

type : password

type : datetime-local

type : month

type : number

type : search

type : hidden

type : image

type : color

type : button

아래 주소를 복사하여 다른 곳에 붙여넣으세요.