5장 - 입력 양식 작성하기

5.1 폼 삽입하기

1. <form>: 폼을 만드는 태그

<form [속성="속성값"]여러 폼 요소></form>

• <form> 태그의 속성
  • method: 폼 데이터를 서버로 보낼 때 사용할 방식 (GET 또는 POST)을 지정한다.
  • name: 폼의 이름을 설정해 JavaScript 등에서 참조할 수 있게 한다.
  • action: 폼 데이터를 전송할 서버의 URL을 지정한다.
  • target: 서버 응답을 표시할 위치(현재 창, 새 창 등)를 설정한다.
  • autocomplete: 자동완성 기능을 나타낸다.

2. <fieldset>, <legend> 태그

<!-- 05\fieldset.html 실습 -->
<!-- Do it! form 태그 삽입하기 & 그룹으로 묶고 제목 붙이기 -->
  <form>
    <fieldset>
      <legend>상품 선택</legend>
    </fieldset>
    <fieldset>
      <legend>배송 정보</legend>
    </fieldset>
  </form>

실행 결과:

3. <label> 태그: 품 요소에 레이블을 붙인다

<!-- 05\label-1.html 실습 -->
<form>
    <!-- Do it! label 태그 안에 input 태그 넣기 -->
    <label>아이디(6자 이상) <input type="text"></label>
  </form>

<!-- 05\label-2.html 실습 -->
<form>
    <!-- Do it! label 요소와 input 요소 연결하기 -->
    <label for="user-id">아이디(6자 이상)</label>
    <input type="text" id="user-id">
  </form>

5.2 사용자 입력을 위한 input 태그

<input> 태그의 type 속성 한눈에 살펴보기

• text: 일반 텍스트 입력
• password: 비밀번호 입력 (문자 숨김)
• search: 검색어 입력 (검색 필드 스타일)
• url: URL 입력 (유효성 검사 가능)
• email: 이메일 주소 입력 (유효성 검사 가능)
• tel: 전화번호 입력
• checkbox: 체크박스 (다중 선택 가능)
• radio: 라디오 버튼 (단일 선택)
• number: 숫자 입력 (화살표로 증감)
• range: 슬라이더로 숫자 범위 선택
• date: 날짜 선택
• month: 연-월 선택
• week: 연-주 선택
• time: 시간 선택
• datetime-local: 날짜와 시간 동시 선택 (시간대 없음)
• submit: 폼 제출 버튼
• reset: 폼 초기화 버튼
• image: 이미지를 버튼처럼 사용하여 제출
• button: 일반 버튼 (JavaScript로 동작 정의 필요)
• file: 파일 업로드 필드
• hidden: 사용자에게 보이지 않는 숨은 데이터

1. type=”text”, type=”password”

<!-- 05\login.html 실습 -->	
	<form>
    <fieldset>
      <!-- Do it! 텍스트 필드와 비밀번호 필드가 있는 로그인 폼 만들기 -->
      <label>아이디: <input type="text" id="user-id" size="10"></label>
      <label>비밀번호: <input type="password" id="user_pw" size="10"></label>
      <input type="submit" value="로그인">
    </fieldset>
  </form>

2. type=”search”, type=”url, type=”email”, type=”tel”

<!--05\t-field.html -->
<legend>배송 정보</legend>
      <!-- Do it! 배송 정보 입력하는 폼 만들기 -->
      <ul>
        <li>
          <label for="user-name">이름</label>
          <input type="text" id="user-name">
        </li>
        <li>
          <label for="addr">배송 주소</label>
          <input type="text" id="addr">
        </li>
        <li>
          <label for="mail">이메일</label>
          <input type="email" id="mail">
        </li>
        <li>
          <label for="phone">연락처</label>
          <input type="tel" id="phone">
        </li>
      </ul>
    </fieldset>

3. type=”checkbox”, type=”radio”

<!-- 05\radio-check.html -->
	<fieldset>
      <legend>상품 선택</legend>
      <!-- Do it! 라디오 버튼과 체크 박스를 사용한 폼 만들기 -->
      <p><b>주문할 상품을 선택해 주세요</b></p>
      <ul>
        <li>
          <label><input type="checkbox" name="prod" value="s_3">선물용 3kg</label>
        </li>
        <li>
          <label><input type="checkbox" name="prod" value="s_5">선물용 5kg</label>
        </li>
        <li>
          <label><input type="checkbox" name="prod" value="f_3">가정용 3kg</label>
        </li>
        <li>
          <label><input type="checkbox" name="prod" value="f_5">가정용 5kg</label>
        </li>
      </ul>
      <p><b>포장 선택</b></p>
      <ul>
        <li><label><input type="radio" name="gift" value="yes">선물 포장</label></li>
        <li><label><input type="radio" name="gift" value="no">선물 포장 안 함</label></li>
      </ul>
	</fieldset>

실행 결과:

<!-- 회원 가입 실습 -->
<form>
        <fieldset>
          <legend>사용자 정보</legend>
          <ul>
            <li>
              <label for="uid">아이디</label>
              <input type="text" id="uid">
            </li>
            <li>
              <label for="umail">이메일</label>
              <input type="mail" id="umail">
            </li>
            <li>
              <label for="pwd1">비밀번호</label>
              <input type="password" id="pwd1">
            </li>
            <li>
              <label for="pwd2">비밀번호 확인</label>
              <input type="password" id="pwd2">
            </li>
          </ul>
        </fieldset>

        <fieldset>
          <legend>이벤트와 새로운 소식</legend>
          <input type="radio" name="mailing" id="mailing_y" value="mailing_yes">
          <label for="mailing_y">메일 수신</label>
          <input type="radio" name="mailing" id="mailing_n" value="mailing_no">
          <label for="mailing_n">메일 수신 안 함</label>
        </fieldset>

        <div>
          <input type="submit" value="가입하기">
          <input type="reset" value="취소">
        </div>
        
  </form>

4. type=”number”, type=”range”

<li>
	<label><input type="checkbox" name="prod" value="s_3">선물용 3kg</label>
	<input type="number" min="0" max="5">
</li>

<li>
	<label><input type="checkbox" name="prod" value="s_5">선물용 5kg</label>
	<input type="number" min="0" max="5">
</li>

<form>
    <!-- Do it! 슬라이드 막대를 사용해 범위 조절하기 -->
    <input type="range" min="0" max="100" step="1" value="20">
 </form>

5. type=”date”, type=”month”, type=”week”

<h1>날짜 지정하기</h1>
<!-- Do it! 날짜 지정하기  -->
<input type="date">
<input type="month">
<input type="week">

6. type=”time”, type=”datetime-local”

<!-- 기본형 -->
<input type="time">
<input type="datetime-local">

7. type=”submit”, type=”reset”

<input type="submit | reset" value="버튼에 표시할 내용">

8. type=”image”

<input type="image" src="이미지 경로" alt="대체 텍스트">

9. type=”button”

<input type="button" value="버튼에 표시할 내용">

10. type=”file”

<input type=”file”>

11. type=”hidden”

<input type="hidden" name="이름" value="서버로 전송할 값">

5.3 input 태그의 주요 속성

• autofocus 속성: 페이지가 로드될 때 입력창에 자동으로 커서가 이동하게 한다. 사용자 편의를 위해 자주 사용된다.
• placeholder 속성: 입력창에 예시나 안내 문구를 표시해준다. 사용자가 입력하기 전에 힌트를 줄 수 있다.
• readonly 속성: 입력값을 읽을 수만 있고 수정은 할 수 없게 만든다. 주로 이미 입력된 값을 보여줄 때 쓴다.
• required 속성: 폼을 제출하기 전에 반드시 입력해야 하는 항목으로 만든다. 입력하지 않으면 제출이 되지 않는다.

5.4 품에서 사용하는 여러 가지 태그

1. <textarea> 태그: 여러 줄 입력
   • cols 속성: 텍스트 영역의 가로 너비
   • rows 속성: 텍스트 영역의 세로 길이

<!-- Do it! 여러 줄 텍스트를 입력하는 메모 항목 추가하기 -->
          <label for="memo">메모</label>
          <textarea id="memo" cols="40" rows="4"></textarea>

2. <select>, <option> 태그

   • <select> 태그의 속성:
     • size: 드롭다운 리스트에서 한 번에 보이는 항목의 개수를 정한다
     • multiple: 여러 개의 항목을 동시에 선택할 수 있게 한다
   • <option> 태그의 속성:
     • value: 선택한 옵션이 폼 전송 시 서버로 전달되는 실제 값을 정한다
     • selected: 기본으로 선택된 상태로 만든다. 페이지가 로드될 때 미리 선택되어 있게 한다

3. <button> 태그

   • 속성:
     • submit: 폼을 서버로 전송하는 역할을 한다
     • reset: 입력한 폼 내용을 초기 상태로 되돌린다
     • button: 기본 동작 없이 자바스크립트와 함께 원하는 기능을 만들 때 사용한다

실습: 회원 가입

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>회원 가입</title>
    <style>
      #container {
        width:600px;
        margin:10px auto;
      }
    </style>
  </head>
  <body> 
    <div id="container">
      <h1>회원 가입을 환영합니다</h1>
      <form>
        <fieldset>
          <legend>사용자 정보</legend>
          <ul>
            <li>
              <label for="uid">아이디</label>
              <input type="text" id="uid" autofocus placeholder="4자 ~ 10자 사이, 공백 없이" required>
            </li>
            <li>
              <label for="umail">이메일</label>
              <input type="mail" id="umail" required>
            </li>
            <li>
              <label for="pwd1">비밀번호</label>
              <input type="password" id="pwd1" placeholder="문자와 숫자, 특수 기호 포함" required>
            </li>
            <li>
              <label for="pwd2">비밀번호 확인</label>
              <input type="password" id="pwd2" required>
            </li>
            <li>
              <label for="path">가입경로</label>
              <select id="path">
                <option value="blog">블로그</option>
                <option value="search">검색</option>
                <option value="sns">SNS</option>
                <option value="etc">기타</option>
              </select>
            </li>
            <li>
              <label for="memo">메모</label>
              <textarea cols="40" rows="4" placeholder="남길 말씀이 있다면 여기애"></textarea>
            </li>
          </ul>
        </fieldset>

        <fieldset>
          <legend>이벤트와 새로운 소식</legend>
          <input type="radio" name="mailing" id="mailing_y" value="mailing_yes">
          <label for="mailing_y">메일 수신</label>
          <input type="radio" name="mailing" id="mailing_n" value="mailing_no" checked>
          <label for="mailing_n">메일 수신 안 함</label>
        </fieldset>

        <div>
          <input type="submit" value="가입하기">
          <input type="reset" value="취소">
        </div>
        
      </form>
    </div>           
  </body>
</html>

실행 결과: