폼, 드롭다운 목록

<Do it! HTML5+CSS3>을 기본으로 배운 내용입니다.

 

목차

• 1. 폼 만들기
• 2. 사용자 입력을 위한 <input> 태그
• 3. 여러 데이터 나열해 보여 주기

 

<Form>

• 폼은 대표적으로 웹 사이트의 로그인 화면이나 회원가입할 때 사용자가 입력할 수 있는 화면이다.
• 폼과 관련된 대부분의 작업은 정보를 저장하거나, 검색, 수정하는 일인데 이런 작업은 모두 데이터베이스를 기반으로 한다.
• 폼은 사용자가 입력정보를 입력하고 버튼을 클릭하면 그 내용이 웹 서버로 보내진다. 그럼 서버는 자신이 가지고 있는 데이터베이스에서 사용자가 보내 온 정보를 비교하고 그 결과를 브라우저에게 보낸다.
• 폼의 텍스트 상자나 버튼 같은 형태를 만드는 것은 HTML태그를 이용하고 그 폼에 입력한 정보를 처리하는 것은 ASP나 PHP, JSP 같은 서버 프로그래밍을 이용한다.

1. 폼 만들기

1) 폼 삽입하기 - <form> 태그

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

 

- <form>태그와 사용하는 속성들

사용자가 입력한 자료를 서버로 어떤 방식으로 넘길지, 서버에서 어떤 프로그램을 이용해 처리할 것인지 지정할 수 있다.

속성	설명
method	사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정한다. 속성 값 get : 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나고, 입력 내용의 길이가 제한(256byte~4096byte)된다. post : 사용자의 입력을 표준 입력으로 넘겨주기 때문에 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않는다. 대부분 이 방식을 사용한다.
name	폼의 이름을 지정한다.
action	<form>태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정한다.
target	<action>태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열리도록 지정한다.

+) autocomplete속성 - 자동 완성 기능

이 속성을 이용해 자동 완성 기능을 사용할 수 있다. 자동 완성 기능이란 검색창이나 로그인 창에 내용을 입력할 때 이전에 입력했던 내용이 아래에 표시되는 기능을 말한다.

 

 

2) 폼 요소에 레이블 붙이기 - <label>태그

레이블이란 아래 그림의 아이디나 비밀번호처럼 입력 창 옆에 붙여 놓은 텍스트를 말한다. <label>태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되어 있다는 것을 브라우저가 알 수 있다.

레이블을 이용하면 체크박스에서 텍스트만 선택해도 체크 박스 버튼이 선택될 수 있어 편리하다.

<label [속성="속성 값"]> 레이블 <input ...> </label>

또는

<label for="id이름"> 레이블 </label>
<input id="id이름" [속성="속성 값"]>

 

 

3) 폼 요소 그룹으로 묶기 - <fieldset>, <legend>태그

<fieldset> 태그로 폼 요소를 그룹으로 묶고 <legend>태그를 이용해 그룹에 제목을 붙여주면 아래 그림처럼 사용자가 정보를 입력하기에도 편리하고 화면도 깔끔히 정리할 수 있다.

<form>
  <fieldset>
    <legend> 로그인 정보 </legend>
    <ul>
      <li>
        <label for="id">아이디</label>
        <input type="text" id="id">
      </li>
      <li>
        <label for="pwd">비밀번호</label>
        <input type="text" id="pwd">
      </li>
    </ul>
  </fieldset>
</form>

 

 

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

1) 입력 항목 만들기 - <input>태그

사용자가 입력하는 부분을 만들 때 <input>태그를 사용한다.

<input type="유형" id="아이디" [기타속성="속성 값"]>

 

- type속성에서 사용 가능한 속성값

 

- <input>태그와 사용하는 속성들

속성	설명
autofocus	입력 커서 표시하기
placeholder	힌트 표시하기
readonly	읽기 전용 필드 만들기
required	필수 필드(필수로 입력해야 하는 내용) 지정
min, max, step	해당 필드의 최대,최소값 지정하기
size, minlength, maxlength	길이, 최소길이, 최대길이 지정하기

 

---

3. 여러 데이터 나열해 보여 주기

1) 드롭다운 목록 만들기 - <select>, <option>태그

드롭다운 목록은 사용자가 여러 옵션 중에서 선택하도록 하고 싶을 떄 사용한다.

드롭다운 목록은 <select>태그로 드롭다운 목록의 시작과 끝을 표시하고 그 안에 <option>태그를 사용해 원하는 항목들을 추가한다. <option>태그에는 value속성을 이용해 서버로 넘겨주기 위한 값을 지정한다.

<optgroup>태그 : 여러개의 <option>태그들을 하나의 그룹으로 묶을 수 있다.

<select>
  <option value="값" [속성="속성값"]> 내용1 </option>
  <option value="값" [속성="속성값"]> 내용2 </option>
  <option value="값" [속성="속성값"]> 내용3 </option>
  ...
</select>

 

- <select>, <option>태그와 사용하는 속성들

<select>태그와 사용하는 속성	설명
size	화면에 표시될 드롭다운 메뉴의 항목 개수를 지정한다.
multiple	브라우저 화면에 여러 개의 옵션이 함께 표시되면서 ctrl키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있다.

<option>태그와 사용하는 속성	설명
value	옵션을 선택했을 때 서버로 넘겨질 값을 지정한다.
selected	화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정한다.

 

 

2) 데이터 목록 중에서 값 선택하는 목록 만들기 - <datalist>, <option>태그

텍스트 필드에 직접 값을 입력하는 것이 아니라 제시한 데이터 목록 값 중에서 선택하도록 할 때 사용한다.

드롭다운 목록에서 <select>태그 대신 <datalist>태그를 사용하면 된다.

<input type="text" list="데이터 목록 id">
  <datalist>
    <option> 값1 </option>
    <option> 값2 </option>
    <option> 값3 </option>
    ...
  </datalist>

 

- <option>태그와 사용하는 속성들

속성	설명
value	사용자가 레이블을 선택했을 때 서버로 넘겨질 값을 지정
label	- 사용자를 위해 브라우저에 표시할 레이블 - 따로 지정하지 않을 경우, value 값을 레이블로 사용한다.

 

 

3) 여러 줄 입력하는 텍스트 영역 만들기 - <textarea>태그

<textarea>태그를 사용하면 여러 줄의 텍스트를 입력하는 영역을 만들 수 있다.

<textarea [속성="속성 값"]> 내용 </textarea>

 

- <textarea>태그와 사용하는 속성들

속성	설명
name	다른 폼 요소와 구분하기 위해 텍스트 영역의 이름을 지정한다.
cols	텍스트 영역의 가로 너비를 문자 단위로 지정한다.
rows	텍스트 영역의 세로 길이를 줄 단위로 지정한다. 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생긴다.