입력 양식 작성하기

입력 양식이란 특정 항목에 사용자가 뭔가를 입력할 수 있게 만든 것으로 '폼이라고도 한다. (로그인 창, 검색 창 등등)

HTML에서 입력 양식을 사용하면 로그인 창에 아이디와 비밀번호 항목을, 회원 가입 양식에 이메일 주소, 전화번호 등의 항목을 넣을 수도 있다.

 

1. 폼 삽입하기 

웹에서 만나는 폼 

- 우리는 웹에서 폼을 자주 만난다.

- 아이디와 비밀번호를 입력하거나 로그인 버튼, 회원 가입 등 사용자가 웹 사이트로 정보를 보낼 수 있는 모든 요소는 모두 폼이라고 할 수 있다.

- 검색 사이트나 쇼핑몰 주문서 화면에서도 폼을 이용한 입력란을 볼 수 있다.

 

 

폼의 동작 과정

- 사용자가 아이디와 비밀번호를 입력하고 로그인 버튼을 클릭하면 입력한 정보는 웹 서버로 전송된다.

- 그럼 서버는 자신이 가진 데이터베이스에서 입력받은 아이디와 비밀번호가 일치하는지 확인하고 그 결과를 웹 브라우저에 보낸다.

- 폼과 관련한 작업은 정보를 저장하거나 검색, 수정하는 것이 대부분인데 모두 데이터베이스를 기반으로 작동한다.

- 따라서 텍스트 박스나 버튼 같은 폼 형태는 HTML 태그로 만들지만, 폼에 입력한 사용자 정보는 ASP나 PHP, JSP 같은 서버 프로그래밍을 이용해 처리한다.

 

 

폼을 만드는 <form> 태그

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

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

 

<form> 태그의 속성

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

폼에 내용을 입력하고 서버로 전송했을 때 서버에 있는 register.php를 실행한다.

 

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

 

자동 완성 기능을 나타내는 autocomplete 속성

- 폼에서 내용을 입력할 때 예전에 입력한 내용을 자동으로 표시해 주는 것을 자동 완성 기능이라고 한다.

- 사용자가 입력한 내용을 기억했다가 비슷한 글자가 입력되면 이전에 입력한 내용을 힌트로 보여준다.

- 자동 완성 기능은 autocomplete 속성을 사용하면 기본 속성값은 "on" 이다.

- 중요한 개인 정보나 인증 번호와 같은 일회성 정보를 입력할 때 속성을 off로 지정하면 자동 완성 기능을 끌 수 있다.

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

 

 

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

- 하나의 폼 안에서 여러 구역을 나누어 표시할 때 <fieldset> 태그를 사용한다.

- 쇼핑몰 사이트에서 주문서를 작성할 때 개인 정보와 배송 정보를 나누어 표시하면 사용자가 입력하기도 편리하고 화면도 깔끔하게 정리할 수 있다.

 

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

<form action="">
    <fieldset>
      <legend>상품 선택</legend>
    </fieldset>
    <fieldset>
      <legend>배송 정보</legend>
    </fieldset>      
  </form>

 

 

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

- <label> 태그는 <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용한다.

- 레이블이란 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트를 말한다.

- <label> 태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되었다는 것을 웹 브라우저가 알 수 있다.

 

- <label> 태그는 2가지 방법으로 사용할 수 있다.

1. 태그 안에 폼 요소를 넣는 것

<label>아이디(6자 이상)<input type="text"></label>

 

2. <label> 태그와 폼 요소를 따로 사용하고 <label> 태그의 for 속성과 폼 요소와 id 속성을 이용해 서로 연결하는 것이다. 다시 말해, 폼 요소의 id속성값을 <label> 태그의 for 속성에게 알려주는 방법을 사용한다.

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

 

---

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

 

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

- 웹 사이트에서 흔히 볼 수 있는 회원 가입이나 로그인 화면은 폼을 사용해 작성한 것이다.

- <input> 태그는 다양한 폼에서 사용자가 입력한 정보를 받을 때 사용한다.

 

<input> 태그의 type 속성

- 로그인 창에서 아이디와 비밀번호를 입력하거나 로그인 버튼을 클릭하는 등 <input> 태그는 매우 다양한 입력 형태로 만들 수 있다.

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

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

 

 

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

- 텍스트 필드는 폼에서 가장 많이 사용하는 요소이다. 

- 주로 아이디나 이름, 주소 등 한 줄 짜리 일반 텍스트를 입력할 때 사용한다.

- 비밀번호 필드는 입력하는 내용을 화면에 보여 주지 않아야 하므로 '*'나 '●' 로 표시한다.

- 이 점만 제외하면 텍스트 필드와 똑같이 동작하고 같은 속성을 사용한다.

 

주요 속성

종류	설명
size	텍스트와 비밀번호 필드의 길이를 지정한다. 즉 화면에 몇 글자가 보이도록 할 것인지를 지정한다. 예를 들어 최대로 입력할 수 있는 글자 수가 10개인데 size 속성값을 5로 지정하면 필드 크기는 5개 글자 크기에 맞추고 나머지 5개 글자는 화면에 보이지 않는다.
value	텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여 주는 내용이다. 이 속성을 사용하지 않으면 빈 텍스트 필드가 표시된다. 비밀번호 필드에서 사용하지 않는 속성이다.
maxlength	텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정한다.

 

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

 

 

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

- type ="search"를 사용하면 웹 브라우저 화면으로 볼 때는 텍스트 필드와 똑같지만, 웹 브라우저에서는 검색을 위한 텍스트 필드로 인식한다.

- type ="url"은 웹 주소를 입력하는 필드이고, type="email"은 이메일 주소를 입력하는 필드다.

 

HTML5 이전까지는 입력한 값이 이메일 주소인지, URL 주소인지 자바스크립트를 이용하여 확인해야 했지만 HTML5에서는 type="email"처럼 이메일 주소 필드로 지정하기만 하면 웹 브라우저에가 알아서 확인한다.

만일 입력값이 지정한 형식에 맞지 않는다면 웹 브라우저에서 오류 메시지를 보여준다.

 

- type="tel"은 전화번호를 나타내는 필드다. 전화번호는 지역마다 형식이 다르므로 사용자가 입력한 값이 전화번호인지 아닌지 체크할 수 없다. 모바일 페이지에서 이 값을 사용하면 바로 전화를 걸 수 있다.

 

<form action="">
    <fieldset>
      <legend>상품 선택</legend>
     
    </fieldset>
    <fieldset>
      <legend>배송 정보</legend>
      <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> 
  </form>

 

 

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

- 체크 박스와 라디오 버튼은 여러 항목 중에서 원하는 항목을 선택할 때 사용하는 폼 요소이다.

- 이때 항목을 1개만 선택하려면 라디오 버튼을 사용하고

- 2개 이상 선택하려면 체크 박스를 사용한다.

 

체크 박스와 라디오 버튼에서 사용할 수 있는 속성

종류	설명
value	선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값을 지정한다. 이 값은 영문이거나 숫자여야 하며 필수 속성이다.
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_3">가정용 5kg</label>
      <p><b>포장 선택</b></p>
      <label><input type="radio" value="yes">선물 포장</label>
      <label><input type="radio" value="no">선물 포장 안 함</label>
    </fieldset>

 

라디오 버튼과 name 속성

간혹 HTML 소스 코드를 보면 라디오 버튼에 name 속성이 포함된 것을 볼 수 있다.

name 속성은 PHP와 같은 웹 프로그래밍에서 폼 요소를 제어할 때 자주 사용한다.

라디오 버튼에서 하나의 버튼만 선택할 수 있게 하려면 모든 라디오 버튼의 name값을 똑같이 지정 한다.

 

 

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

- 텍스트 필드에서 사용자가 숫자를 직접 입력할 수도 있지만 type = "number"를 사용하면 스핀 박스가 나타나면서 숫자를 선택할 수 있다.

- 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_3">가정용 5kg</label>
        <input type="range" min="0" max="3" value="1">개 (최대 3개)
      </li>
</ul>   

 

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

- 웹 문서나 애플리케이션에 달력을 넣으려면 type ="date", type ="month", type ="week" 같은 날짜 관련 유형을 이용한다.

 

1. type ="date"로 지정하면 달력에서 날짜를 선택해서 입력할 수 있다. 날짜를 선택하면 필드에 "yyyy-mm-dd" 형식으로 연도, 월, 일이 표시된다.

2. type ="month"로 지정하면 달력에서 월을 선택해서 입력할 수 있다. 월을 선택하면 "yyyy-mm"형식으로 연도, 월까지만 입력된다.

3. type ="week"로 지정하면 달력에서 주를 선택해서 입력할 수 있다. 주를 선택하면 1월 첫째 주를 기준으로 몇 번째 주인지 표시된다.

 

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

 

 

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

- 시간을 지정할 때는 type="time"을 사용하고 날짜와 시간을 함께 지정하려면 type="datetime"이나 type = "datetime-local"을 사용한다.

 

1. type = "time"은 폼에서 시간을 입력하게 합니다. 시간 입력 필드는 웹 브라우저마다 조금씩 다르게 나타나는데 항목이 3개로 구성된다는 점은 같다. 첫 번째 항목부터 '오전'과 '오후'를 의미하고 나머지는 '시' 와 '분'을 의미한다.

2. type ="datetime" 또는 type ="datetime -local"유형을 사용하면 사용자가 웹 문서를 보고 있는 지역에 맞는 날짜와 시간을 함께 입력할 수 있다.

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

 

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

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

 

 

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

- 전송 버튼을 나타내는 submit은 폼에 입력한 정보를 서버로 전송한다.

- submit 버튼으로 전송된 정보는 <form> 태그의 action 속성에서 지정한 폼 처리 프로그램에 넘겨진다.

- 반면에 reset 버튼은 <input> 요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 모두 지우는 역할을 한다.

 

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

 

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

- type = "image"는 submit 버튼과 같은 기능을 하는 이미지 버튼을 나타낸다.

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

- type = "button"은 submit이나 reset 버튼과 같은 기능이 없고 오직 버튼 형태만 삽입한다.

- value 속성을 사용해 버튼에 표시할 내용을 지정한다.

 

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

type="button"을 사용해 [공지 창 열기]라는 버튼을 만들고, 이 버튼을 클릭하면 자바스크립트의 window.open()함수를 실행한다. 

 

 

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

- 간혹 폼에서 사진이나 문서를 첨부해야 하는 경우가 있다.

- 이럴 땐 type = "file"로 지정하면 폼에 파일을 첨부할 수 있다.

- type ="file" 유형을 사용하면 웹 브라우저 화면에 [파일 선택]이나 [찾아보기] 버튼 등이 표시되는데, 이 버튼을 클릭하고 파일을 선택하면 파일이 첨부된다.

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

 

 

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

- 히든 필드는 화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소이다.

- 사용자에게 굳이 보여 줄 필요는 없지만 관리자가 알아야 하는 정보는 히든 필드로 입력한다.

- 예를 들어 자주 가는 사이트의 주문서, 회원 가입 등의 폼에서 마우스 오른쪽 버튼을 누르고 [검사]를 클릭해보면 해당 폼의 소스를 확인할 수 있는데 <hidden> 요소를 꽤 많이 사용한 것을 볼 수 있다.

 

<fieldset>
      <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="로그인">
</fieldset>

히든 필드를 사용해 사용자가 사이트에서 로그인하는 정보를 서버로 넘겨준다.

웹 브라우저에는 히든 필드가 보이지 않으므로 사용자는 그 정보를 알 수 없다.

하지만 [로그인] 버튼을 클릭하면 입력한 정보와 함께 히든 필드의 내용이 서버로 함께 전송된다.

 

 

---

5.3 input 태그의 주요 속성

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

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

- 예쩐에 이 기능을 구현하려면 자바스크립트를 이용해야 했는데 HTML5에서는 autofocus라는 속성으로 쉽게 해결할 수 있다.

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

 

힌트를 표시해 주는 placeholder 속성

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

- 이렇게 하면 텍스트 필드 앞에 제목을 사용하지 않고도 사용자에게 해당 필드에 어떤 내용을 입력해야 할지 알려 줄 수 있어서 편리하다.

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

 

 

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

- 사용자가 입력하지는 못하고 읽게만 하는 읽기 전용 필드를 만들 수도 있다.

- readonly 속성은 해당 필드를 읽기 전용으로 바꾼다.

- 텍스트 필드나 텍스트 영역에 내용이 표시되어 있어도 사용자는 그 내용을 볼 수만 있고 입력은 할 수 없다.

- readonly 속성은 간단히 readonly라고만 쓰거나 readonly = "readonly", 또는 readonly = "true"로 지정한다.

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

 

 

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

- 내용을 폼에 입력한 후 submit 버튼을 클릭하면 폼을 서버로 전송하는데, 이때 필수 필드에 필요한 내용이 모두 채워졌는지 검사해야 한다.

- 이렇게 반드시 입력해야 하는 내용에는 required 속성을 지정해 필수 필드로 만들 수 있다.

- 이 속성을 사용하려면 required="required"라고 지정하거나 required라고만 해도 된다.

 

 <form>
    <fieldset>
      <legend>배송 정보</legend>
      <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>  
    </fieldset>
    <div>
      <input type="submit" value="주문하기"> 
      <input type="reset" value="취소하기">
    </div>        
  </form>

 

 

---

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

 

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

- 폼에서 텍스트를 여러 줄 입력하는 영역을 만들 수도 있다.

- 이 영역을 텍스트 영역이라고 한다.

- <textarea> 태그는 게시판에서 글을 입력하거나 회원 가입 양식에서 사용자 약관을 표시할 때 자주 사용한다.

 

- <textarea> 태그에서는 너비 크기를 지정하는 cols 속성과 화면에 텍스트를 몇 줄 표시할지 지정하는 rows 속성을 사용한다.

- cols에서 지정하는 글자 수는 영문자를 기준으로 한다. (한글 1글자는 영문자 2글자에 해당)

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

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

 

 

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

- 사용자가 내용을 직접 입력하지 않고 여러 옵션 중에서 선택하게 하려면 드롭다운 목록이나 데이터 목록을 사용한다.

- 드롭다운 목록은 목록을 클릭했을 때 옵션이 요소 아래쪽으로 펼쳐져서 붙인 일므이다.

- 드롭다운 목록은 <select> 태그와 <option> 태그를 이용해 표시한다.

- <select> 태그로 드롭다운 목록의 시작과 끝을 표시하고, 그 안에 <option> 태그를 사용해 원하는 항목을 추가한다.

- <option> 태그에는 value 속성을 이용해 서버로 넘겨주는 값을 지정한다.

 

 

<select> 태그의 속성 알아보기

- 먼저 <select> 태그를 사용해 만든 드롭다운 목록은 기본적으로 옵션이 하나만 표시되는데, 옆에 있는 화살표를 클릭해 나머지 옵션을 살펴본 후 필요한 항목을 선택할 수 있다.

- 이 때 size 속성이나 multiple 속성을 이용하면 드롭다운 목록의 크기나 선택할 항목의 개수를 조절할 수 있다.

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

 

<option> 태그의 속성 알아보기

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

- <option> 태그에서만 사용하는 속성은 다음과 같다.

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

 

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

 

 

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

- 데이터 목록을 사용하면 텍스트 필드에 값을 직접 입력하지 않고 미리 만들어 놓은 값 중에서 선택할 수 있다.

- 데이터 목록을 만들 때는 <datalist> 태그를 이용해 데이터 목록의 시작과 끝을 표시하고 그 사이에 <option> 태그를 사용해 각 데이터의 옵션을 표시한다.

- 이때 value 속성을 사용해서 서버로 넘겨줄 값을 지정하는데, 이 값이 텍스트 필드에도 나타난다.

- 데이터 목록을 사용할 텍스트 필드에서 어떤 데이터 목록을 연결할지 id 값을 지정한다.

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

 

 

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

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

- <button> 태그의 type 속성은 버튼이 활성화되었을 때 어떤 동작을 할지 지정한다.

- submit, reset, button 중에서 선택할 수 있고 만약 지정하지 않으면 submit을 선택한 것으로 간주한다.

종류	설명
submit	폼을 서버로 전송한다. <input type ="submit">과 같은 기능을 한다.
reset	폼에 입력한 내용을 초기화한다. <input type="reset">과 같은 기능을 한다.
button	버튼 형태만 만들 뿐 자체 기능은 없다. <input type ="button"> 과 같은 기능을 한다.

화면 낭독기로 웹 문서를 읽어 줄 때 <button> 태그를 만나면 이 부분에 버튼이 있다는 것을 알고 정확히 전달한다.

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

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

 

 

---

출처 : Do it! HTML+CSS+자바스크립트 웹 표준의 정석 [고경희 (이지퍼블리싱)]