[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 05 입력 양식 작성하기(1)

DAY 6

🔖 오늘 읽은 범위 :

🔥01/12(월) 진도표 알림
👉🏻공부 내용: 05 입력 양식 작성하기(1)
👉🏻쪽수: 125~151쪽

---

😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**

폼 삽입

폼

• 입력 양식 = ‘폼’
• 폼의 동작 ⇒ 데이터베이스 기반 동작.
• 폼 형태는 HTML, 입력된 정보는 서버 프로그래밍을 이용하게 됨.

<form> 태그

<form 속성='속성값'>폼 요소</form>

• 폼 태그 속성
  • method : 입력한 내용을 서버에 어떻게 넘길 것인가? ⇒ ‘get’ or ‘post’
    • get : 데이터 전달 크기 256byte ~ 4Kbyte. 주소 표시줄에 내용이 노출 됨.
    • post : 크기 제한 없음. 입력 내용이 노출되지 않음.
  • name : 자바스크립트 폼 제어하는 경우, 지정되는 폼의 이름.
  • action : 내용을 처리 해 줄 서버 프로그램 지정.
  • target : action 에서 지정한 스크립트 파일이 다른 위치에서 열리게 함.
  • <form action="register.php"> <!-- 여러가지 폼 요소 배치 --> </form>
• 자동 완성 기능 = autocomplete 속성
  • 기본 값은 “on”
  • 개인 정보나 인증 번호 같은 일회성 정보가 저장될 우려가 있음 ⇒ autocomplete 속성 off 할 것.
  • <form action="" autocomplete="off"></form>

<fieldset>, <legend> = 폼 요소 그룹핑

<!-- 기본 형태 -->
<fieldset>
    <legend>Group Name</legend>
</fieldset>

<!-- 상품 선택과 배송 정보로 그룹핑 -->
  <fieldset>
    <legend>상품 선택</legend>
  </fieldset>
  <fieldset>
    <legend>배송 정보</legend>
  </fieldset>

<label> = 폼에 레이블 붙이기

• 레이블 Label = 입력란 가까이에 표시되는 텍스트
• <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용함.
• 폼 요소와 레이블 텍스트가 서로 연관되었다는 것을 웹 브라우저가 알 수 있음.
• 연결 방법
  • 2번 방식은 태그가 멀리 있어도 둘 사이를 연결하기 쉽다는 장점이 있음.
• <!-- 1. 폼 요소 앞 뒤로 라벨 태그를 붙여서 하는 방식--> <label>아이디(6글자 이상) <input type="text"></label> <!-- 2. id 속성으로 서로 연결하는 방식 --> <label for="user-id">아이디(6자이상)</label> <input type="text" id="user-id">

사용자 입력 input 태그

<input> 태그

• 사용자가 입력할 부분은 대부분 <input> 태그 사용. 아주 다양해서 어떻게 구별할지 봐야 함.

<input> 태그 type 속성

종류	설명
text	1줄 짜리 텍스트 입력; 텍스트 박스;
password	비밀번호 입력 필드
search	검색 입력 필드
url	URL 주소 입력 필드
email	이메일 주소 입력 필드
tel	전화번호 입력 필드
checkbox	2개 이상 선택 가능한 체크박스 넣기
radio	1개만 선택 가능한 라디오 버튼 넣기
number	수량 숫자 조절 가능한 스핀 박스 넣기
range	크기 숫자 조절 가능한 슬라이드 막대 넣기
date	사용자 지역 기준 날짜 연,월,일 넣기.
month	사용자 지역 기준 날짜 연,월 넣기.
week	사용자 지역 기준 날짜 연,주 넣기.
time	사용자 지역 기준 시간 시,분,초,분할 초 넣기.
datetime-local	사용자 지역 기준 날짜와 시간 연,월,일,시,분,초,분할초 넣기.
submit	전송 버튼
reset	리셋 버튼
image	submit 버튼을 대신할 이미지 넣기
button	일반 버튼
file	파일 첨부 버튼
hidden	사용자에게 보이지 않게 함. 서버로 넘겨주는 값이 있는 필드를 생성.

• 텍스트와 비밀번호 type=”text”, type=”password”

  종류	설명
  size	필드 길이 지정. 화면에 보이는 글자 수. 초과되면 화면에 보이지 않음.
  value	텍스트 필드가 화면에서 표시 될때 나타나는 텍스트.
  사용하지 않으면 그냥 빈 필드가 표시됨.
  maxlength	입력할 수 있는 최대 문자 수 지정.

    <label>아이디: <input type="text" id="user_id" size="10"></label>
    <label>비밀번호: <input type="password" id="user_pw" size="10"></label>
    <input type="submit" value="Login">

• url, email, tel, search
• <ul> <li> <label for="user-name">Name</label> <input type="text" id="user-name"> </li> <li> <label for="addr">Address</label> <input type="text" id="addr"> </li> <li> <label for="mail">Email</label> <input type="email" id="mail"> </li> <li> <label for="phone">Contact</label> <input type="tel" id="phone"> </li> </ul>
• checkbox, radio

  종류	설명
  value	서버에게 넘겨줄 값 지정. 영문이나 숫자. 필수 속성.
  checked	기본 선택 처리 여부. 속성값은 따로 없음.
  name	이름 속성. 같은 이름은 같은 그룹으로 묶임.

  💡체크박스 버튼과 라디오 버튼의 차이

  • 체크박스 버튼은 토글이 된다.
  • 라디오 버튼은 토글이 되지 않는다.
• <!-- checkbox --> <p><b>주문할 상품을 선택해주세요.</b></p> <ul> <li> <label><input type="checkbox" name="prod" value="s_3">Gift 3kg</label> </li> <li> <label><input type="checkbox" name="prod" value="s_5">Gift 5kg</label> </li> <li> <label><input type="checkbox" name="prod" value="f_3">Home 3kg</label> </li> <li> <label><input type="checkbox" name="prod" value="f_5">Home 5kg</label> </li> </ul> <!-- radio --> <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>
• number, range
  • number : 스핀 박스 사용한 숫자 입력.
  • range : 슬라이드 막대를 이용한 범위 입력.

    속성	설명
    min	최솟값. 0
    max	최댓값. 100
    step	숫자 간격. 기본값은 1.
    value	필드 표시 초깃값.

  • 슬라이드 막대 값을 함께 표시하려면? 자바스크립트 사용해서 화면에 표시해야 함.
• 날짜 입력 date, month, week
  • 달력으로 날짜 입력함.
  • 브라우저마다 입력 받는 형식이 다름.
• 시간 입력 time, datetime-local
  • time : 시간 지정
  • datetime-local : 날짜와 함께 시간 지정.
  • number, range 속성과 종류가 같고 비슷함.
  • <input type="date" min="2026-01-01" max="2026-12-31">
• 전송, 리셋 submit, reset
  • reset : 폼 입력 한 내용이 모두 삭제되고 처음 상태로 돌아감.
• <input type="submit" value="반품하기"> <input type="reset" value="취소하기">
• 이미지 버튼 image
  • submit 과 같은 기능.
  • <input type="image" src="images/login.png" alt="Login">
• 기본 버튼 = button
• <input type="button" value="열기" onclick="window.open('notice.html','_blank','width=300,height=400')">
• 파일 첨부 file
  
• <input type="file">
• 숨김 필드 hidden
  • 숨김 필드를 사용해 관련 정보를 서버에 넘긴다.
  • <input type="hidden" name="url" value="사이트를 통해서 로그인">

🤔 **오늘의 파트에 대한 소감 (매우 주관적주의)**

• 태그와 속성이 너무 많아서 ㅎㅎㅎ 이건 작업을 많이 해봐야겠다.

🔎 **추가로 알게 된 것 (책 내용 +알파로 궁금한 것, 이해가 가지 않는 것 등)**

•  

---

🤟소감 3줄 요약

• 아 눈이 너무 많이 내려…
• 춥다 추워…
• 양이 너무 많았다..