My Study/서적 공부

[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "5장: 마무리 문제"

handbefore 2024. 7. 20. 17:41

[5장 입력양식 작성하기] 마무리 문제 01.

> 문제풀이

<!DOCTYPE html>
<html lang="ko">
  <head>
   <meta charset="UTF-8">
   <title>예약정보</title>
  </head>
  <body>
    <h1>예약 정보</h1>
    <form>
      <ul>
        <li>
          <label for="r-name">이 름</label>
          <input type="text" id="r-name">
        </li>
        <li>
          <label for="r-phone">전 화</label>
          <input type="tel" id="r=phone">
        </li>
        <li>
          <label for="r-email">메 일</label>
          <input type="email" id="r-email">
        </li>
        <li>
          <input type="submit" value="예약하기">
        </li>
      </ul>
    </form>
  </body>
</html>

 

> 결과

 

[5장 입력양식 작성하기] 마무리 문제 02.

> 문제풀이

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>연습문제 2</title>
  </head>
  <body>
    <h1>프런트엔드 개발자 지원서</h1>
    <p>HTML, CSS, 자바스크립트 기술을 이해하고 실무 경험이 있는 분을 찾습니다.</p>
    <h2>개인정보</h2>
    <form>
      <ul>
        <li>
          <label for="r-name">이름</label>
          <input type="text" id="r-name" placeholder="공백 없이 입력하세요.">
        </li>
        <li>
          <label for="number">연락처</label>
          <input type="tel" id="numer">
        </li>
      </ul>
    <h2>지원 분야</h2>
      <ul>
        <li>
          <label><input type="radio" name="apply">웹 퍼블리싱</label>
        </li>
        <li>
          <label><input type="radio" name="apply">웹 애플리케이션 개발</label>
        </li>
        <li>
          <label><input type="radio" name="apply">개발 환경 개선</label>
        </li>
      </ul>
    <h2>지원 동기</h2>
      <textarea cols="60" rows="5" placeholder="본사 지원 동기를 간략히 써 주세요"></textarea>
    <div id="buttons">
      <input type="submit" value="접수하기">
      <input type="reset" value="다시쓰기"
    </div>
    </form>
  </body>
</html>

> 결과

 

 

 

출처

 

https://easyspub.co.kr/20_Menu/BookView/PUB/421/PUB

 

easyspub.co.kr