Form과 input

Form

• 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 form
• 폼과 관련된 대부분의 작업들은 정보를 저장, 검색, 수정 하는 일
• 이런 작업은 모두 DB 를 기반으로 함
• 아이디를 입력하는 text field, button 같은 form 의 형태를 만드는 것은 HTML tag,

form 에 입력한 사용자 정보를 처리하는 것은 ASP, PHP 등의 서버

 

1. <form> 태그 - 폼 생성

   

 

form을 만드는 기본 태그

<form> ~ </form> 사이에 원하는 form 요소를 삽입하여 폼을 만들 수 있다.

<form> 태그에서는 다음과 같은 속성들을 사용한다.

• method: 사용자가 입력한 내용들을 어떤 방식으로 서버쪽에 넘겨줄지 지정
• get: 사용자가 입력한 내용이 주소 표시줄에 그대로 나타남 256~4096 byte까지만 전송 가능
• post: 사용자의 입력을 standard input 으로 넘겨주어 입력 길이 제한이 없고, 입력 내용도 드러나지 않음
• name: form 의 이름을 지정. 한 문서 내에 <form> 태그가 여러개 있을 경우 구분하기 위해 사용
• action: <form> 태그 안의 내용들을 처리해줄 서버 상의 프로그램을 지정
• target: <action> 태그에서 지정한 스크립트 파일을 열 위치를 지정

• 다음과 같은 속성값을 사용할 수 있다.

_self: target 속성의 기본값으로, 현재 창 에서 열림

_blank: 새 창이나 새 탭에서 열림

_parent: 부모 프레임에 표시

_top: 프레임을 벗어나 전체화면에 표시

 

위의 텍스트 입력창 예시의 경우

1. 입력한 내용이 웹 서버의 input.php 파일로 전송
2. 서버에서 input_test.php 파일을 실행
3. 실행 결과를 웹브라우저로 전달
4. 결과를 화면에 표시

와 같은 과정을 거치게 된다.

 

Input

    입력과 관련한 태그 및 속성들

 

1. <input> 태그 - 사용자 입력

라디오 버튼, 체크 박스, 입력창 등 사용자가 입력하는 부분은 거의 다 <input> 태그를 사용한다.

다음과 같이 type 속성값을 지정해서 원하는 형태의 입력을 받을 수 있다.

 

  a. 텍스트

 

기본적으로 텍스트가 입력가능한 타입들로, 비밀번호, 이메일 등 특정 목적에 따라 나뉘어 각각 추가 기능이 존재

size 속성으로 화면에 보일 문자 길이를, maxlength 속성으로 입력 가능한 최대 문자 길이를, value 로 초기값을 설정할 수 있다.

※ password 타입의 경우 value 속성 사용 불가

b. 숫자

숫자 입력과 관련된 타입들

min, max 속성으로 최소, 최대값, value 속성으로 초기값을 지정할 수 있다.

 

c. 선택

몇 가지 항목 중 선택하는 타입들

value 속성으로 지정한 값이 해당 항목 선택시 서버로 전송되는 값으로, 필수적으로 넣어줘야 한다.

checked 속성을 사용하면 해당 항목은 기본적으로 선택된 상태로 표시된다.

d. 날짜

날짜를 입력하기 위한 타입들

모두 동일하게 min, max 속성값으로 최소, 최대 값을, step 속성으로 날짜, 시간 조절 단위를, value 로 초기값을 지정할 수 있다.

시간을 표시하는 경우 기본적으로 24시간제이며, 날짜 다음에 T 키워드를 쓰고 그 뒤로 시간을 지정해주면 된다.된다.

 

e. 버튼

버튼 타입들

f. 기타

 

2. <input> 태그 속성들

 

그 외의 Form 요소들

<input> 외에도 다양한 Form 요소들이 존재한다.

1. 여러 데이터 나열

• 나열된 데이터 중 원하는 값을 선택하거나, 여러줄의 데이터를 입력할 수 있도록 해주는 form 요소들

여러 옵션 중에서 선택할 수 있는 드롭다운 목록을 구성하는 태그들

공간을 최소한으로 사용하며 여러 옵션을 표시할 수 있다.

<select> ~ </select> 사이에 각 옵션 항목들을 <option> 태그로 넣으면 된다.

<select> 태그의 속성은 다음과 같다.

• size: 화면에 표시될 드롭다운 메뉴의 항목 개수를 지정
• multiple: 브라우저 화면에 여러 개의 옵션이 함께 표시되면서 Ctrl 키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있음

 

<option> 태그의 속성은 다음과 같다.

• value: 옵션 선택시 서버로 넘겨질 값을 지정
• selected: 화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정

 

데이터 목록에서 선택한 값이 자동으로 연결된 텍스트 필드에 입력된다.

<datalist> 에 id 속성값을 지정해주고, <input> 태그의 list 속성값으로 <datalist> 의 id 값을 지정해서 연결해줘야 한다.

<select> 와 유사해 보이지만 텍스트 필드를 따로 연결해 줘야한다는 점이나, 값을 직접 입력하고 선택된 값도 수정할 수 있다는 점에서 차이가 있다.

<option> 태그에서는 다음과 같은 속성을 사용할 수 있다.

• value: 항목 선택시 서버로 넘겨질 값을 지정
• label: 브라우저에 표시할 레이블. 따로 지정하지 않을 경우 value 값을 레이블로 사용함

 

 

여러줄의 텍스트를 입력할 수 있는 텍스트 영역을 만들어주는 태그

게시물 입력 창, 회원 가입 양식의 약관 등에 사용한다.

<textarea> 에서 사용할 수 있는 속성은 다음과 같다.

• cols: 텍스트 영역의 가로 너비를 문자 단위로 지정
• rows: 텍스트 영역의 세로 길이를 줄 단위로 지정. 지정한 길이 넘어가면 스크롤 막대 생김

<input> 태그에서 type 지정해서 만들 수 있는 버튼 (submit, reset, button) 과 동일한 기능을 한다.

대신 <button> 을 사용해서 만든 버튼은 화면 낭독기에서 버튼임을 정확히 전달할 수 있고, CSS 를 사용해서 다양한 형태로 꾸밀 수도 있다.

<button> 태그에 type 속성으로 다음과 같은 값들을 지정해서 원하는 기능의 버튼을 만들 수 있다.

• submit: form 을 서버로 전송
• reset: form 에 입력한 모든 내용을 초기화
• button: 버튼 형태만 만듬

 

계산 결과를 브라우저에 표시해주는 태그

표시되는 형태가 <input> 태그를 사용한 것과 차이점은 없지만 이 값이 계산 결과값이라는 점을 웹 브라우저에게 정확히 인식시킬 수 있다.

작업 진행 상태를 브라우저에 표시하는 태그

넣어줄 수 있는 값에는 특별한 단위가 없고, 표시하지도 않는다.

max 값 대비 value 값의 비율을 프로그레스 바 형태로 표시해준다.

• value: 현재 작업 진행 상태를 나타내며 부동 소수점으로 표현 (0 <= value <= max(max 없으면 1.0))
• max: 작업을 완료하기 위해 필요한 양을 나타냄 (0 < max)

 

전체 크기 중에서 얼마나 차지하는지를 표현할 때 사용하는 태그

다음과 같은 속성들을 사용할 수 있다.

• max, min: 범위의 최대, 최소값 (디폴트 min = 0, max = 1)
• value: 범위 내에서 차지하는 값
• low: 하한선
• high: 상한선
• optimum: 적정선. optimum 이 high 보다 크면 value 값이 클수록 좋고, 반대로 low 보다 작으면 value 가 작을수록 좋다.