web-crash-course


Forms / 폼

<!-- prettier-ignore -->
<form action="/subscribe.php" method="POST">
  <fieldset>
    <legend>Subscribe / 구독</legend>
    <label for="name">Name / 이름</label>
    <input
      type="text"
      id="name"
      name="name"
      placeholder="Enter your name / 이름을 입력하세요"
      maxlength="20"
      required
    />
    <label for="email">Email / 이메일</label>
    <input
      type="email"
      id="email"
      name="email"
      placeholder="Enter your email / 이메일을 입력하세요"
      required
    />
    <label for="password">
      Password / 비밀번호
      <input
        type="password"
        id="password"
        name="password"
        size="10"
        placeholder="Enter your password / 비밀번호를 입력하세요"
        required
      />
    </label>
    <label for="phone">Phone / 전화번호</label>
    <input
      type="tel"
      id="phone"
      name="phone"
      placeholder="Enter your phone number / 전화번호를 입력하세요"
      required
    />
    <label for="message">Message / 메시지</label>
    <textarea
      id="message"
      name="message"
      placeholder="Enter your message / 메시지를 입력하세요"
      required
    ></textarea>
    <input type="submit" value="Submit / 제출" />
  </fieldset>

  <fieldset>
    <input type="radio" name="genre" value="rock" checked="checked" />
    <input type="radio" name="genre" value="pop" />
    <input type="radio" name="genre" value="country" />
    <input type="checkbox" name="genre" value="hip-hop" />
    <input type="checkbox" name="genre" value="jazz" />
    <input type="checkbox" name="genre" value="classical" />
  </fieldset>

  <fieldset>
    <select name="devices" size="3" multiple="multiple">
      <optgroup label="Desktop">
        <option value="desktop" selected>Desktop</option>
        <option value="laptop">Laptop</option>
      </optgroup>
      <optgroup label="Mobile">
        <option value="smartphone">Smartphone</option>
        <option value="tablet">Tablet</option>
      </optgroup>
    </select>
  </fieldset>

  <fieldset>
    <input type="file" name="file" />
    <input type="image" src="images/submit.png" />
    <input type="submit" value="Upload" />
    <input type="reset" value="Reset" />
    <input type="hidden" name="hidden" value="hidden" />
    <input type="date" name="date" />
    <input type="email" name="email" />
    <input type="url" name="url" />
    <input type="search" name="search" placeholder="Search" />
    <input type="color" name="color" />
    <button>
      <img src="images/submit.png" alt="Submit" />
    </button>
  </fieldset>
</form>