htmlorder

by rootjang

HTML

<!DOCTYPE html>
<html lang="ko-KR">
<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>상품 주문서</title>
  <style>
    .container {
      width: 600px;
      margin: 0 auto;
    }
    ul {
      list-style-type: none;
    }
    label.title {
      font-weight: bold;
      width: 80px;
      float: left;
    }
    div.centered {
      text-align: center;
    }
    fieldset {
      margin: 15px 10px;
    }
    fieldset legend {
      font-weight: bold;
      font-size: 18px;
      color: red;
    }
    ul li {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>상품주문서</h1>
    <fieldset>
      <legend>개인정보</legend>
      <ul>
        <li>
          <label for="name" class="title">이름</label>
          <input type="text" id="name" placeholder="여백없이 입력" required>
        </li>
        <li>
          <label for="tel" class="title">전화번호</label>
          <input type="tel" id="tel" placeholder="연락가능한 번호를 입력하세요">
        </li>
      </ul>
    </fieldset>
    <fieldset>
      <legend>배송지정보</legend>
      <ul>
        <li>
          <label for="addr" class="title">주소</label>
          <input type="text" id="addr" size="40" required>
        </li>
        <li>
          <label for="tel2" class="title">전화번호</label>
          <input type="tel" id="tel2" required>
        </li>
        <li>
          <label for="memo" class="title">메모</label>
          <textarea cols="40" rows="3" id="memo"></textarea>
        </li>
      </ul>
    </fieldset>
    <fieldset>
      <legend>주문정보</legend>
      <ul>
        <li>
          <label><input type="checkbox">과테말라 안티구아 (100g) </label>
          <label><input type="number" value="0" min="0" max="10">개 </label>
        </li>
        <li>
          <label><input type="checkbox">인도네시아 만델링 (100g) </label>
          <label><input type="number" value="0" min="0" max="10"> 개</label>
       ...