[HTML] - 입력 양식 작성

* 폼 삽입

- 웹에서 만나는 폼

• 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼(form)
• 폼과 관련된 대부분의 작업들은 정보를 저장하거나 검색하거나 수정하는 일들
• 이런 작업은 모두 데이터베이스를 기반으로 한다.
• 아이디를 입력하는 텍스트 필드나 버튼 같은 폼의 형태를 만드는 것은 HTML 태그
• 폼에 입력한 사용자 정보를 처리하는 것은 ASP나 PHP 같은 서버 프로그래밍 이용

 

 

 

---

 

 

- 폼을 만드는 <form> 태그

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

 

• <form> 태그 속성

 

<예시>

- 입력한 폼 서버로 보내기

<form action="register.php">
	/* 여러 폼 요소 */
</form>

 

- 자동 완성 기능 끄기

<form action="" autocomplete="off">
	/* 여러 폼 요소 */
</form>

 

 

---

 

 

- 폼 요소를 그룹으로 묶는 <fieldset>, <legend> 태그

• <fieldset>

<fieldset [속성="속성값"]>  </fieldset>

 

• <legend> - <fieldset>으로 묶은 그룹 이름 지정

<fieldset>
	<legend> 그룹 이름 </legend>
</fieldset>

 

 

<예시>

 

 

---

 

 

- 폼 요소에 레이블을 붙이는 <label> 태그

• <input> 태그와 같은 폼 요소에 레이블을 붙일 때

*레이블 : 입력란 가까이에 아이디, 비밀번호처럼 붙여 놓은 텍스트

<label> 레이블명<input></label>

<label for="id명">레이블명<input id="id명"></label>

 

 

<예시>

 

 

---

 

 

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

- <input> 태그의 type 속성

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

 

 

 

---

 

 

- 텍스트와 비밀번호를 나타내는 type="text"와 type="password"

• type="text"
  • 한 줄짜리 텍스트 입력 필드
  • 아이디, 이름, 주소등
• type="password"
  • 비밀번호 입력란
  • 사용자가 입력하는 내용이 ‘ * ’나 ‘•’로 표시
• 기본형

<input type="text">
<input type="password">

• 텍스트 필드, 비밀번호 필드의 속성

종류	설명
size	텍스트와 비밀번호 필드의 길이 지정(화면에 몇 글자가 보이도록 할 것인지)
value	텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용(비밀번호 필드에서는 사용 안함)
maxlength	텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수 지정

 

<예시>

<form>
  <fieldset>
    <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>

 

 

---

 

 

- 다양한 용도에 맞게 입력하는 type="search", type="url", type="email", type="tel"

• type="search"
  • 검색 필드
  • 검색 창에 x표시가 되어 검색어 삭제 쉬움
• type="url"
  • 웹 주소 필드
  • http://로 시작하는 사이트 주소 입력
• type="email"
  • 메일 주소 입력 필드
  • 메일 주소 형식 자동 체크
• type="tel"
  • 전화번호 입력 필드
  • 사용자 입력을 체크하지는 않음

 

<예시>

<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>

 

 

 

---

 

 

- 체크 박스와 라디오 버튼을 나타내는 type="checkbox", type="radio"

• type="checkbox"
  • 여러 항목 중 둘 이상 선택
• type="radio"
  • 여러 항목 중 하나만 선택
• 기본형

<input type="checkbox">
<input type="radio">

• 체크 박스, 라디오 버튼에서 사용하는 속성

속성	설명
name	라디오 버튼, 체크박스 여러 개 있을 때 서버의 폼 프로그램에서 이를 구분하기 위해 이름 지정 라디오 버튼은 여러 개 중 하나만 선택하므로 관련 있는 그룹끼리는 name 속성 값 동일
value	선택한 라디오 버튼, 체크박스를 서버로 알려 줄 때 넘길 값 지정(영문 / 숫자)
checked	라디오 버튼의 항목들은 처음에 아무 것도 선택되지 않은 상태로 화면에 표시되는데 기본으로 선택에 놓을 항목이 있다면 checked 속성을 사용

 

 

<예시>

<fieldset>
  <legend>상품 선택</legend>
  <p><b>주문할 상품을 선택해 주세요</b</p>
  <label><input type="checkbox" value="s_3">선물용 3kg</label>
  <label><input type="checkbox" value="s_5">선물용 5kg</label>
  <label><input type="checkbox" value="f_3">가정용 3kg</label>
  <label><input type="checkbox" value="f_5">가정용 5kg</label>
  <p><b>포장 선택</b><p>
  <label><input type="radio" name="gift" value="yes">선물 포장</label>
  <label><input type="radio" name="gift" value="no">선물 포장 안함</label>
</fieldset>

 

---

 

 

- 숫자 입력 필드를 나타내는 type="number", type="range"

• type="number"
  • 숫자 입력 필드, 브라우저에 따라 스핀 박스로 표시됨
• type="range"
  • 숫자 입력 플드, 슬라이드 막대를 이용해 숫자 입력
• 기본형

<input type="number">
<input type="range">

 

• 숫자 입력 필드에서 사용하는 속성

속성	설명
min	필드에 입력할 수 있는 최솟값 지정 / 기본 최솟값은 0
max	필드에 입력할 수 있는 최댓값 지정 / 기본 최댓값은 100
step	숫자 간격을 지정 / 기본값은 1
value	필드에 표시할 초깃값

 

 

<예시>

- 스핀 박스

<ul>
  <li>
    <label><input type="checkbox" value="s_3">선물용 3kg</label>
    <input type="number" min="0" max="5">개 (최대 5개)
  </li>
  <li>
  	<label><input type="checkbox" value="s_5">선물용 5kg</label>
    <input type="number" min="0" max="3" value="1">개 (최대 3개)
  </li>
</ul>

 

- 슬라이드 막대

<ul>
  <li>
  	<label><input type="checkbox" value="f_3">가정용 3kg</label>
    <input type="range" min="0" max="5">개 (최대 5개)
  </li>
  <li>
  	<label><input type="checkbox" value="f_5">가정용 5kg</label>
    <input type="range" min="0" max="3" value="1">개 (최대 3개)
  </li>
</ul>

 

 

 

---

 

 

- 날짜 입력을 나타내는 type="date", type="month", type="week"

• 달력 이용해 날짜 입력
• type="date"
  • 달력에서 날 짜 선택해서 입력 / 날짜 선택하면 필드에 "yyyy-mm-dd"형식 연도, 월, 일 표시
• type="month"
  • 달력에서 월을 선택해서 입력 / 월 선택하면 "yyyy-mm"형식으로 연도, 월까지 표시
• type="week"
  • 달력에서 주를 선택해서 입력 / 주 선택하면 1월 첫째 주 기준으로 몇 번째 주인지 표시
• 기본형

<input type="date | month | week">

 

 

<예시>

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

 

 

 

---

 

 

- 시간 입력을 나타내는 type="time", type="datetime", type="datetime - local"

• 시간 입력
• type="time"
  • 폼에서 시간 입력
  • 항목이 3개로 구성 (오전/오후, 시, 분)
• type="datetime" / type="datetime-local"
  • 사용자가 웹 문서 보고 있는 지역에 맞는 날짜와 시간을 함께 입력
• 기본형

<input type="time | datetime | datetime-local">

 

<예시>

- 2가지 형식 시간 입력

<h1>시간 지정하기</h1>
<input type="time">
<input type="datetime-local">

 

 

 

---

 

 

- 전송, 리셋 버튼을 나타내는 type="submit", type="reset"

• 폼 전송/리셋 버튼
• 전송(submit)버튼 : 사용자 입력 내용을 서버로 전송
• 리셋(reset) 버튼 : 사용자 입력 내용 전부 삭제
• value 속성 이용해 버튼 표시 내용 지정
• 기본형

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

 

<예시>

- 전송, 리셋 버튼 추가

<div>
  <input type="submit" value="주문하기">
  <input type="reset" value="취소하기">
</div>

 

---

 

- 이미지 버튼을 나타내는 type="image"

• submit 버튼 대신 이미지 삽입
• 기본형

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

 

<예시>

- 이미지 버튼 추가

<fieldset>
  <label>아이디: <input type="text" id="user_id" size="10"></label>
  <label>비밀번호: <input type="password" id="user_pw" size="10"></label>
  <input type="image" src="images/login.png" alt="로그인">
</fieldset>

 

 

---

 

 

- 기본 버튼을 나타내는 type="button"

• 기능 없이 버튼 형태만 삽입
• 주로 버튼 클릭해서 자바스크립트 실행할 때 사용
• value 속성을 이용해 버튼 표시 내용 지정
• 기본형

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

 

<예시>

<form>
  <input type="button" value="공지 창 열기" onclick="window.open('notice.html')">
</form>

 

 

 

---

 

 

- 파일을 첨부할 때 사용하는 type="file"

• 파일 첨부
• '파일 선택'이나 '찾아보기' 버튼으로 표시됨
• 기본형

<input type="file">

 

<예시>

- 파일 첨부 버튼 추가

 

 

 

---

 

 

 

- 히든 필드 만들 때 사용하는 type="hidden"

• 화면 상의 폼에는 보이지 않음
• 폼을 서버로 전송할 때 서버로 함께 전송되는 요소
• 기본형

<input type="hidden" name="이름" value="서버로 넘길 값">

 

 

<예시>

- 히든 필드를 사용해 서버로 정보 보내기

<input type="hidden" value="사이트를 통한 직접 로그인">
<label>아이디: <input type="text" id="user_id" size="10"></label>
<label>비밀번호: <input type="password" id="user_pw" size="10"></label>
<input type="submit" value="로그인">

 

 

 

---

 

 

* input 태그의 주요 속성

- 자동으로 입력 커서를 갖다 놓는 autofocus 속성

• 페이지를 불러오자마자 원하는 폼 요소에 마우스 커서 표시
• 기본형

<input type=텍스트-입력-필드 autofocus required>

 

 

<예시>

<label for="user-nmae">이름</label>
<input type="text" id="user-name" autofocus>

=> 이름 칸에 바로 입력할 수 있게 만듦

---

 

 

- 힌트를 표시해 주는 placeholder 속성

• 입력란에 표시하는 힌트로 필드를 클릭하면 사라짐
• ex) 검색어를 입력하세요 / 아이디를 입력하세요 / 비밀번호를 입력하세요

<예시>

<label for="phone">연락처</label>
<input type="tel" id="phone" placeholder="하이픈 빼고 입력해 주세요.(01012345678)">

 

 

---

 

 

- 읽기 전용 필드를 만들어 주는 readonly 속성

• 내용을 보기만하고 입력하지 못하게 함
• 기본형

<input type=텍스트-입력-필드 readonly>

 

<예시>

<label for="prod">주문 상품</label>
<input type="text" id="prod" value="상품용 3KG" readonly>

 

 

 

 

---

 

 

 

- 필수 입력 필드를 지정하는 required 속성

• 필수 필드 체크
• 필수 필드는 브라우저에서 직접 체크하는 것이므로 오류 메시지 내용은 브라우저들마다 다르게 나타남
• 기본형

<input type=텍스트-입력-필드 required>

 

 

<예시>

<label for="addr">배송 주소</label>
<input type="text" id="addr" required>

 

 

 

---

 

 

* 폼에서 사용하는 여러 가지 태그

- 여러 줄을 입력하는 텍스트 영역 <textarea> 태그

• 여러 줄의 텍스트 입력
• 게시판 글 입력 양식, 사용자 약관 등
• 기본형

<textarea>내용</textarea>

 

• <textarea> 태그의 속성

종류	설명
cols	텍스트 영역의 가로 너비를 문자 단위로 지정
rows	텍스트 영역의 세로 길이를 줄 단위로 지정(줄 개수 많아지면 스크롤 막대 생김)

 

 

<예시>

<label for="memo">메모</label>
<textarea id="memo" cols="40" rows="4"></textarea>

 

 

 

---

 

 

 

- 드롭다운 목록을 만들어 주는 <select>, <option> 태그

• 여러 옵션 중에서 선택 - 드롭다운 목록
• 공간을 최소한으로 사용하면서 여러 옵션 표시 가능
• 기본형

<select>
  <option value="값1">내용1</option>
  <option value="값2">내용2</option>
  ...
</select>

• <select> 태그 속성

종류	설명
size	화면에 표시할 드롭다운 항목의 개수 지정
mutiple	드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용

 

• <option> 태그 속성

종류	설명
value	해당 항목을 선택할 때 서버로 넘겨줄 값을 지정
selected	드롭다운 메뉴를 삽입할 때 기본적으로 선택해서 보여줄 항목 지정

 

 

<예시>

- 드롭다운

<label for="prod1">상품 선택</label>
    <select id="prod1">
      <option value="special_3" selected>선물용 3kg</option>
      <option value="special_5">선물용 5kg</option>
      <option value="family_3">가정용 3kg</option>
      <option value="family_5">가정용 5kg</option>
    </select>
    <hr>

 

---

 

 

 

 

- 데이터 목록을 만들어 주는 <datalist>, <option> 태그

• 데이터 목록에 제시한 값 중에서 선택하면 그 값이 자동으로 텍스트 필드에 입력됨
• 데이터 목록에 id를 이용해 이름을 붙이고 <input>태그의 list 속성에 데이터 목록 id를 지정
• 기본형

<input type="text" list="데이터 목록 id">
<datalist id="데이터 목록 id">
  <option value="서버로 넘길 값1">선택 옵션1</option>
  <option value="서버로 넘길 값2">선택 옵션2</option>
</datalist>

 

<예시>

- 데이터 목록 만들기

...
<label for="prod2">포장 여부 </label>
    <input type="text" id="prod2" list="pack">
    <datalist id="pack">
      <option value="package">선물 포장</option>
      <option value="no_package">포장 안 함</option>
    </datalist>   
...

 

 

 

 

---

 

 

 

- 버튼을 만들어 주는 <button> 태그

• 다양한 형태의 버튼 삽입
• 화면 낭독기에서 버튼임을 정확히 전달할 수 있음
• css를 이용해 원하는 형태로 꾸밀 수 있음
• 기본형

<button type="submit">내용</button>
<button type="reset">내용</button>
<button type="button">내용</button>

 

 

<예시>

<button type="submit">주문하기</button>
<button type="reset">취소하기</button>