<!-- web-practice/portfolio/contact.html의 연락 폼 -->
<form class="contact-form" novalidate>
  <div class="field">
    <label for="name">이름</label>
    <input type="text" id="name" name="name" autocomplete="name" required />
  </div>
 
  <div class="field">
    <label for="email">이메일</label>
    <input
      type="email"
      id="email"
      name="email"
      inputmode="email"
      autocomplete="email"
      required />
    <p class="help">답장을 받을 주소를 적어 주세요.</p>
  </div>
 
  <div class="field">
    <label for="phone">전화번호(선택)</label>
    <input
      type="tel"
      id="phone"
      name="phone"
      inputmode="tel"
      autocomplete="tel"
      pattern="[0-9\-]{9,13}"
      placeholder="010-1234-5678" />
  </div>
 
  <div class="field">
    <label for="portfolio-url">참고 링크(선택)</label>
    <input
      type="url"
      id="portfolio-url"
      name="portfolioUrl"
      inputmode="url"
      autocomplete="url"
      placeholder="https://example.com" />
  </div>
 
  <div class="field">
    <label for="topic">문의 유형</label>
    <select id="topic" name="topic" autocomplete="off">
      <option value="collab">협업 제안</option>
      <option value="hire">채용 제안</option>
      <option value="etc">기타</option>
    </select>
  </div>
 
  <div class="field">
    <label for="message">메시지</label>
    <textarea
      id="message"
      name="message"
      minlength="10"
      enterkeyhint="send"
      required></textarea>
    <p class="help">프로젝트 내용이나 일정을 간단히 적어 주세요.</p>
  </div>
 
  <div class="field field-checkbox">
    <input type="checkbox" id="agree" name="agree" required />
    <label for="agree">개인정보 수집·이용에 동의합니다</label>
  </div>
 
  <button type="submit">보내기</button>
</form>