HTML, CSS, JavaScript - 5. 입력 양식 작성하기. (HTML)

하쮸·2024년 9월 26일

HTML(Hypertext Markup Language)

HTML_CSS_JavaScript

목록 보기

5/7

1. 입력 양식 작성하기.

입력 양식이란 특정 항목에 사용자가 뭔가를 입력할 수 있게 만든 것.
- 폼(form)이라고도 함.
- Ex) 로그인 창, 검색 창.
- HTML에서 지원하는 다양한 태그와 속성.

1-1. 폼 삽입하기.

사용자의 의견이나 정보를 얻으려고 폼을 사용하는 경우가 많음.

1-1-1. 웹에서 만나는 폼.

웹에서 폼(form)을 자주 만남.
- ID, PW를 입력하거나 로그인 버튼, 회원 가입 등 사용자가 웹 사이트로 정보를 보낼 수 있는 요소는 모두 폼이라고 할 수 있음.
폼과 관련한 작업은 정보를 저장하거나 검색, 수정하는 것이 대부분인데 모두 데이터베이스를 기반으로 작동함.
- 텍스트 박스나 버튼 같은 폼 형태는 HTML 태그로 만들지만 폼에 입력한 사용자 정보는 ASP, PHP, JSP 같은 서버 프로그래밍을 이용해 처리함.

1-1-2. 폼을 만드는 `<form>` 태그

폼을 만드는 가장 기본적인 태그로 <form>과 </form>태그 사이에 여러가지 폼 요소를 넣음.

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

<form> 태그는 몇 가지 속성을 사용해서 입력받은 자료를 어떤 방식으로 서버로 넘길 것인지, 서버에서 어떤 프로그램을 이용해 처리할 것인지를 지정함.

<form>태그의 속성

종류	설명
method	- 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정함. - method에서 사용할 수 있는 속성값은 get과 post. - get : 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 있음. - post : 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않음.
name	- 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정함.
action	- `<form>`태그 안의 내용을 처리해 줄 서버 프로그램을 지정함.
target	- action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함.

Ex) 폼에 내용을 입력하고 서버에 전송했을 때 서버에 있는 register.php를 실행한다면 아래와 같이 작성.

입력한 폼을 서버로 보내기

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

자동 완성 기능을 나타내는 autocomplete 속성.
- 폼에서 내용을 입력할 때 예전에 입력한 내용을 자동으로 표시해 주는 것을 자동 완성 기능이라 함.
- 자동 완성 기능은 autocomplete 속성을 사용하며 기본 속성값은 on임.
  - 매우 중요한 개인 정보나 인증 번호와 같은 일회성 정보는 사용하지 않는 게 좋음.
  - <form> 태그의 autocomplete 속성을 off로 지정하면 자동 완성 기능을 끌 수 있음.

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

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

하나의 폼 안에서 여러 구역을 나누어 표시할 때 <fieldset> 태그를 사용함.
- Ex) 쇼핑몰 사이트에서 주문서를 작성할 때 개인정보와 배송 정보를 나누어 표시.

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

<legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙일 수 있음.

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

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>레드향 주문하기</title>
</head>
<body>
  <h1>레드향 주문하기</h1>
  <form action="">
    <fieldset>
      <legend>상품 선택</legend>
    </fieldset>
    
    <fieldset>
      <legend>배송 정보</legend>
    </fieldset>      
  </form>
</body>
</html>

출력 결과

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

<label> 태그는 <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용.
- 레이블(label)이란 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트를 의미.
<label>태그는 2가지 방법으로 사용.
1. 태그 안에 폼 요소를 넣는 것.
2. <label> 태그와 폼 요소를 따로 사용하고 <label> 태그의 for 속성과 폼 요소의 id 속성을 이용해 서로 연결하는 것.

/* 
<!-- 1번째 방법 -->
<label>레이블명<input></label>

<!-- 2번째 방법 -->
<label for="id명">레이블명<input id="id명"></label>

2번째 방법은 <label> 태그를 사용한 레이블과 사용자 정보를 입력받는 <input> 태그가 떨어져 있더라도 둘 사이를 쉽게 연결할 수 있다는 장점이 있음.

<body>
  <form>
    <!-- <label>아이디(6자 이상)<input type="text"></label> -->
  
    <label for="user-id">아이디(6자 이상)</label>
    <input type="text" id="user-id">
  </form>
</body>

출력 결과

2-1. 사용자 입력을 위한 input 태그.

아이디나 검색어를 입력하는 검색 상자나 로그인 버튼처럼 사용자가 입력한 부분은 주로 <input> 태그를 이용해 넣음.

2-1-1. 웹 폼의 다양한 곳에서 사용하는 `<input>` 태그.

웹 사이트에서 흔히 볼 수 있는 회원가입이나 로그인 화면은 폼을 사용해 작성한 것.
검색 사이트에서 사용하는 검색 창 역시 폼을 이용한 것.
<input> 태그는 다양한 폼에서 사용자가 입력한 정보를 받을 때 사용.

2-1-2. `<input>` 태그의 type 속성 한눈에 살펴보기.

<input> 태그에서 입력 형태를 지정할 때 type 속성을 사용함.

<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	- 사용자에게 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 만듦.

2-1-3. 텍스트와 비밀번호를 나타내는 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>

출력 결과

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

HTML5에서는 용도에 맞게 입력할 수 있는 텍스트 필드를 다양하게 제공함.
- 해당 필드들은 텍스트 필드를 기본으로 함.
- 입력값이 지정한 형식에 맞지 않는다면 웹 브라우저에서 오류 메세지를 보여줌.
type="search"를 사용하면 웹 브라우저 화면으로 볼 때는 텍스트 필드와 똑같지만 웹 브라우저에서는 검색을 위한 텍스트 필드로 인식.
- 필드에 검색어를 입력하면 오른쪽에 X가 표시되어 입력한 검색어를 쉽게 지울 수 있음.
type="url"은 웹 주소를 입력하는 필드.
type="email"은 이메일 주소를 입력하는 필드.
type="tel"은 전화번호를 나타내는 필드.
- 모바일 페이지에서 이 값을 이용하면 바로 전화를 걸 수 있음.

<ul id="shipping">
    <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>

출력 결과

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

체크 박스와 라디오 버튼은 여러 항목 중에서 원하는 항목을 선택할 때 사용하는 폼 요소.
- 항목을 1개만 선택하려면 라디오 버튼.
  - 1개만 선택할 수 있으므로 이미 선택한 항목이 있을 경우 다른 항목을 선택하면 기존 항목은 취소됨.
- 2개 이상 선택하려면 체크 박스 사용.

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

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

종류	설명
value	- 선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값을 지정함. - 영문이거나 숫자여야 하고 필수 속성임.
checked	- 여러 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용. - 속성값은 따로 없음.

<fieldset>
      <legend>상품 선택</legend>
      <p><b>주문할 상품을 선택해 주세요.</b></p>
      <ul>
        <li>
          <label><input type="checkbox" value="s_3">선물용 3kg</label>
          <input type="number">개
        </li>
        <li>
          <label><input type="checkbox" value="s_5">선물용 5kg</label>
          <input type="number">개
        </li>
        <li>
          <label><input type="checkbox" value="f_3">가정용 3kg</label>
          <input type="number">개
        </li>
        <li>
          <label><input type="checkbox" value="f_5">가정용 5kg</label>
          <input type="number">개
        </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>

출력 결과

라디오 버튼과 name 속성.
- name 송성은 PHP와 같은 웹 프로그래밍에서 폼 요소를 제어할 때 자주 사용.
- 라디오 버튼에서 하나의 버튼만 선택할 수 있게 하려면 모든 라디오 버튼의 name 값을 똑같이 지정해야 함.
- 예시는 위의 코드 참고.

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

텍스트 필드에서 사용자가 숫자를 직접 입력할 수도 있지만 type="number"를 사용하면 스핀 박스가 나타나면서 숫자를 선택할 수 있음.
- 스핀 박스란 입력칸 오른쪽에 ▲ , ▼를 표시해서 숫자를 높이거나 낮추는 기능을 함.
type="range"는 슬라이드 막대를 움직여서 숫자를 입력할 수 있음.

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

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

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

<fieldset>
      <legend>상품 선택</legend>
      <p><b>주문할 상품을 선택해 주세요.</b></p>
      <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>      
      <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>

출력 결과

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

웹 문서나 애플리케이션에 달력을 넣으려면 type="date", type="month", type="week 이용.

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

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

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

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

시간을 지정할 때는 type="time" 사용.
- 폼에서 시간을 입력.
- 항목이 3개로 구성.
- 1번째 항목은 오전 or 오후, 나머지는 시, 분
날짜와 시간을 함께 지정하려면 type="datetime" 이나 type="datetime-local"을 사용.
- 사용자가 웹 문서를 보고 있는 지역에 맞는 날짜와 시간을 함께 입력할 수 있음.

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

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

출력 결과

날짜나 시간의 범위 제한하기.

날짜와 시간의 범위를 지정하는 속성

종류	설명
min	날짜나 시간의 범위를 제한할 때 사용. min 속성은 범위의 시작 날짜나 시간을, max 속성은 범위의 마지막 날짜나 시간을 지정함.
max
step	증감시킬 크기를 지정함.
value	기본적으로 표시할 날짜나 시간을 지정함.

<h1>범위 제한하기</h1>
<input type="date" min="2020-02-01" max="2020-02-15">
<input type="time">

출력 결과

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

전송 버튼을 나타내는 submit은 폼에 입력한 정보를 서버로 전송함.
- submit 버튼으로 전송된 정보는 <form> 태그의 action 속성에서 지정한 폼 처리 프로그램에 넘겨짐.
reset 버튼은 <input> 요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 모두 지우는 역할을 함.
- value 속성을 사용해서 버튼에 표시할 내용을 지정함.

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

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

2-1-10. 이미지 버튼을 나타내는 type="image"

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>

출력 결과

2-1-11. 기본 버튼을 나타내는 type="button"

type="button"은 submit이나 reset 버튼과 같은 기능이 없고 오직 버튼 형태만 삽입.
- 주로 버튼을 클릭해서 자바스크립트를 실행할 때 사용.
- value 속성을 사용해 버튼에 표시할 내용을 지정함.

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

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

해당 버튼을 클릭하면 자바스크립트의 window.open() 함수를 실행함.

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

폼에서 사진이나 문서를 첨부해야 하는 경우가 있음.
- type="file"로 지정하면 폼에 파일을 첨부할 수 있음.
  - type="file"을 사용하면 웹 브라우저 화면에 파일선택 or 찾아보기 버튼 등이 표시 됨.

<input type="file">

    <fieldset>
      <legend>반품 정보</legend>
      <p>만일 수령한 상품에 문제가 있다면 즉시 <b>반품 신청</b>해 주세요.</p>
      <p>반품 신청시 상품의 상태를 사진으로 첨부해 주세요.</p>
      <hr>
      <input type="file">    
    </fieldset>

출력 결과

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

히든 필드는 화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소.
- 사용자에게 보여줄 필요는 없지만 관리자가 알아야 하는 정보는 히든 필드로 입력함.

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

3-1. input 태그의 주요 속성.

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

autofocus 속성을 사용하면 페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시할 수 있음.

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

3-1-2. 힌트를 표시해 주는 placeholder 속성.

사용자가 텍스트를 입력할 때 입력란에 적당한 힌트 내용을 표시해서 그 필드를 클릭하면 내용이 사라지도록 만듦.

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

출력 결과

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

사용자가 입력하지는 못하고 읽게만 하는 읽기 전용 필드를 만들 수 있음.
- readonly 속성은 해당 필드를 읽기 전용으로 바꿈.

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

3-1-4. 필수 입력 필드를 지정하는 required 속성.

내용을 폼에 입력한 후 submit 버튼을 클릭하면 폼을 서버로 전송.
- 이때 필수 필드에 필요한 내용이 모두 채워졌는 지 검사해야 함.
반드시 입력해야 하는 내용에는 required 속성을 지정해 필수 필드로 만들 수 있음.
- 해당 속성을 사용하려면 required="required" or required로 하면 됨.

      <ul id="shipping">
        <li>
          <label for="prod">주문 상품</label>
          <input type="text" id="prod" value="상품용 3KG" readonly>
        </li>
        <li>
          <label for="user-name">이름 </label>
          <input type="text" id="user-name" autofocus required>
        </li>
        <li>
          <label for="addr">배송 주소</label> 
          <input type="text" id="addr" required>
        </li>
        <li>
          <label for="mail">이메일</label>
          <input type="email" id="mail">
        </li>        
        <li>
          <label for="phone">연락처</label>
          <input type="tel" id="phone" placeholder="하이픈 빼고 입력해 주세요.(01012345678)" required>
        </li>
        <li>
          <label for="d-day">배송 지정</label>
          <input type="date" id="d-day"> <small>(주문일로부터 최소 3일 이후)</small>
        </li>        
      </ul>

출력 결과

주문 상품에 적용된 것이 readonly

4-1. 폼에서 사용하는 여러 가지 태그.

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

폼에서 텍스트를 여러 줄 입력하는 영역을 만들 수 있음.
- 이 영역을 텍스트 영역(textarea)이라고 함.

<textarea>내용</textarea>

<textarea> 태그에서는 너비 크기를 지정하는 cols 속성과 화면에 텍스트를 몇 줄 표시할지 지정하는 rows 속성을 사용.
- cols에서 지정하는 글자 수는 영문자를 기준.
  - 한글 1 글자 = 영문자 2글자에 해당
  - Ex) cols="40" : 한글 20글자 정도.

<textarea> 태그의 속성

종류	설명
cols	- 텍스트 영역의 가로 너비를 문자 단위로 지정함.
rows	- 텍스트 영역의 세로 길이를 줄 단위로 지정함. - 지정한 숫자보다 줄 개수가 많아지면 스크롤이 생김.

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

출력 결과

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

사용자가 내용을 직접 입력하지 않고 여러 옵션 중에서 선택하게 하려면 드롭다운 목록이나 데이터 목록을 사용함.
드롭다운 목록은 <select> 태그와 <option> 태그를 이용해 표시함.
- <select> 태그로 드롭다운 목록의 시작과 끝을 표시함.
- 그 안에 <option> 태그를 사용해 원하는 항목을 추가.
  - <option> 태그에는 value 속성을 이용해 서버로 넘겨주는 값을 지정함.

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

<select> 태그의 속성.
- <select> 태그를 사용해 만든 드롭다운 목록은 기본적으로 옵션이 하나만 표시.
- size속성이나 multiple 속성을 이용하면 드롭다운 목록의 크기나 선택할 항목의 개수를 조절할 수 있음.

<select> 태그의 속성

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

<option> 태그의 속성.
- 드롭다운 목록에 표시 되는 옵션은 <option> 태그를 이용해 지정.

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

출력 결과

4-1-3. 데이터 목록 만들어 주는 `<datalist>`, `<option>` 태그

데이터 목록을 사용하면 텍스트 필드에 값을 직접 입력하지 않고 미리 만들어 놓은 값 중에서 선택할 수 있음.
데이터 목록을 만들 때는 <datalist> 태그를 이용해 데이터 목록의 시작과 끝을 표시.
- 그 사이에 <option> 태그를 사용해 각 데이터의 옵션을 표시함.
- value 속성을 사용해서 서버로 넘겨줄 값을 지정하는데, 이 값이 텍스트 필드에도 나타남.
- 데이터 목록을 사용할 텍스트 필드에서 어떤 데이터 목록을 연결할지 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>

출력 결과

4-1-4. 버튼을 만들어 주는 `<button>` 태그.

<button> 태그를 이용하여 폼을 전송하거나 리셋하는 버튼을 삽입할 수 있음.

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

<button> 태그의 type 속성은 버튼이 활성화 되었을 때 어떤 동작을 할지 지정함.
- 3가지 중 선택하지 않으면 submit을 선택한 것으로 간주.

<button> 태그의 type 속성

종류	설명
submit	- 폼을 서버로 전송함. 과 같은 기능.
reset	- 폼에 입력한 내용을 초기화 함. 과 같은 기능.
button	- 버튼 형태만 만들 뿐 자체 기능은 없음. 과 같은 기능.

<button> 태그는 폼뿐만 아니라 버튼이 필요한 웹 문서의 어디든지 다양하게 활용할 수 있음.

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

출력 결과

하쮸

Every cloud has a silver lining.

이전 포스트

HTML, CSS, JavaScript - 4. 웹 문서에 다양한 내용 입력하기. (HTML)

다음 포스트

HTML, CSS, JavaScript - 5. 입력 양식 작성하기. (HTML)

HTML_CSS_JavaScript

1. 입력 양식 작성하기.

1-1. 폼 삽입하기.

1-1-1. 웹에서 만나는 폼.

1-1-2. 폼을 만드는 `<form>` 태그

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

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

2-1. 사용자 입력을 위한 input 태그.

2-1-1. 웹 폼의 다양한 곳에서 사용하는 `<input>` 태그.

2-1-2. `<input>` 태그의 type 속성 한눈에 살펴보기.

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

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

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

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

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

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

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

2-1-10. 이미지 버튼을 나타내는 type="image"

2-1-11. 기본 버튼을 나타내는 type="button"

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

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

3-1. input 태그의 주요 속성.

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

3-1-2. 힌트를 표시해 주는 placeholder 속성.

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

3-1-4. 필수 입력 필드를 지정하는 required 속성.

4-1. 폼에서 사용하는 여러 가지 태그.

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

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

4-1-3. 데이터 목록 만들어 주는 `<datalist>`, `<option>` 태그

4-1-4. 버튼을 만들어 주는 `<button>` 태그.

HTML, CSS, JavaScript - 4. 웹 문서에 다양한 내용 입력하기. (HTML)

HTML, CSS, JavaScript - 6. CSS의 기본. (CSS)

0개의 댓글

HTML, CSS, JavaScript - 5. 입력 양식 작성하기. (HTML)

HTML_CSS_JavaScript

1. 입력 양식 작성하기.

1-1. 폼 삽입하기.

1-1-1. 웹에서 만나는 폼.

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

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

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

2-1. 사용자 입력을 위한 input 태그.

2-1-1. 웹 폼의 다양한 곳에서 사용하는 <input> 태그.

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

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

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

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

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

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

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

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

2-1-10. 이미지 버튼을 나타내는 type="image"

2-1-11. 기본 버튼을 나타내는 type="button"

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

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

3-1. input 태그의 주요 속성.

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

3-1-2. 힌트를 표시해 주는 placeholder 속성.

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

3-1-4. 필수 입력 필드를 지정하는 required 속성.

4-1. 폼에서 사용하는 여러 가지 태그.

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

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

4-1-3. 데이터 목록 만들어 주는 <datalist>, <option> 태그

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

HTML, CSS, JavaScript - 4. 웹 문서에 다양한 내용 입력하기. (HTML)

HTML, CSS, JavaScript - 6. CSS의 기본. (CSS)

0개의 댓글

1-1-2. 폼을 만드는 `<form>` 태그

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

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

2-1-1. 웹 폼의 다양한 곳에서 사용하는 `<input>` 태그.

2-1-2. `<input>` 태그의 type 속성 한눈에 살펴보기.

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

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

4-1-3. 데이터 목록 만들어 주는 `<datalist>`, `<option>` 태그

4-1-4. 버튼을 만들어 주는 `<button>` 태그.