HTML에서 입력양식

●<form>태그

 

1. <form>태그란?

<form>~~</form>안에는 다양한 입력요소인 <input>, <select>, <textarea>태그 및 이와 관련된

<fieldset>, <legend>, <label>태그등이 사용된다.

 

2. <form> 태그의 속성

  1) action="URL" : 폼이 제출될 때 폼 데이터를 전달받아 처리할 페이지의 주소를 지정

  2) method="전송방식" : 폼 데이터를 제출할 때 사용하는 HTTP방법 (get, post)

  3) name="이름" : 폼의 이름을 지정

  4) accept-charset="인코딩" : 폼제출을 위해 사용되는 문자 인코딩방식을 지정

  5) autocomplete="on|off" : 폼의 input요소에서 자동완성 기능을 사용 여부를 지정

  6) enctype="인코딩" : "method=post"인 경우서버로 제출될 때 폼 데이터의 인코딩 방식을 지정

  7) novalidate : 제출 시 폼 데이터의 유효성을 검사하지 않도록 지정

  8) target="창" : 폼 제출후에 서버로부터전달받은 처리결과를 보여줄 창을 지정(_blank, _self, _parent, _top, 프레임명)

 

3. method 속성의 전송 방식의 비교

	method="get"	method="post"
전송 형태	기본 값, 폼 데이터가 이름과 값의 쌍 형태로 URL에 포함되어 전송	HTTP Request 헤더 속에 포함시켜 전송
데이터 길이	최대 2048글자	제약이 없음
보      안	"URL?name=value&age=value"와 같이전송되어 내용의 확인이 가능→보안이 중요하지 않은 데이터 전달에 많이 사용(예:검색어 등) → '이전페이지'버튼을 통한 이동이가능	보안이 필요한 로그인 정보, 회원정보 등 개인 정보 전송에 많이 사용 →'이전 페이지' 버튼을 누르면데이터를 다시 보내야한다는 경고가 표시

 

*실습*

 

 

---

●<input>태그

 

1. <input>태그란?

<form>태그 내에서 사용되는 입력요소 중에서 가장 빈도가 높고 중요한 것이 바로 <input> 태그이다. 

이것은 사용자가 데이터를 입력할 수 있는 입력타입을 지정하는 요소로서, type속성의 값에 따라 매우 다양한 형태의 입력타입을 

지정할 수 있다.

 

 

2.<input>태그 형식

 <input type="입력타입유형" 속성="속성값" />

 

 

3.<input> 태그의 속성

  1) accept="파일 유형" : 서버로 업로드되어 수용할 수있는 파일의 형식을 지정 ( type="file" 인 경우에만 사용)

  2) alt="텍스트" : 이미지에 대한 대체 텍스트를 지정 (type="image" 인 경우에만 사용)

  3) height="픽셀", width="픽셀" : 이미지의 폭과 높이를 지정 (type="image" 인 경우에만 사용)

  4) src="URL" :  제출 버튼으로 사용할 이미지의 URL을 지정 (type="image" 인 경우에만 사용)

  5) autocomplete="on|off" : 지정한 입력 타입의 값을 자동으로 완성할지의 여부 지정

  6) autofocus : 페이지가 로드될 때 자동으로 지정한 입력 타입에 포커스를 위치시킨

  7) checked : 페이지가 로드될 때 초깃값을 선택되는 항목을 지정 (type="checkbox" 또는 type="radio" 인경우)

  8) disabled : input요소를 비활성시킴

  9) form="폼_id" : input 요소가 form 요소 밖에서 사용되는 경우에 input요소가 속하는 폼을 지정

  10) minlength="숫자", maxlength="숫자" : 입력 가능한최소 문자 개수와최대 문자 개수를 지정

  11) multiple : input 요소에서 하나 이상의 값을 지정할 수 있도록 함

  12) name="이름" : 서버로 전달되는 input요소의 이름을 지정 parameter값

  13) pattern="정규표현식" : 입력값에 대해 유효성 검사를 위한 정규 표현식을 지정

  14) placeholder="텍스트" : 입력값에 대한 힌트를 희미한텍스트로 보여줌

  15) readonly : input요소를 읽기 전용으로 지정

  16) size="숫자" : 화면에 보이는 텍스트 입력 타입의 최대 길이를 지정

  17) type="유형" : input 요소가 나타낼 수 있는 입력타입을 지정

  18) value="텍스트" : input요소의 값을 지정

  19) required : 입력 타입에 반드시 값이 입력되어야 함을 지정

 

 

4. <input type="속성값">type 속성

	속성값	설명
HTML5 이전 사용했던 입력타입	text	한 줄 짜리 텍스트를 입력할 수 있는 타입을 생성
	password	비밀번호를 입력하는 한 줄짜리 타입을 생성
	radio	라디오 버튼을 생성 (오직하나만 선택가능)
	checkbox	체크박스를 생성 (다중선택 가능)
	hidden	사용자에게보이지 않는 상태로 데이터를 입력받아 서버로 전송
	file	파일 업로드를 위한 파일 선택 버튼을 생성
	image	이미지 제출 버튼으로 지정
	submit	폼 데이터를서버로 전송하는 제출 버튼을 생성
	reset	모든 입력값을 초기화하는 버튼을 생성
	button	클릭할 수 있는 버튼을 생성 (주로 자바스크립트를 활성시키기위해서사용)
HTML5에 추가된 입력타입	search	검색어를 입력받을 때 사용
	tel	전화번호를 입력받을때 사용
	url	URL을 입력받을 때 사용 (자동으로 유효성 검사)
	email	이메일 주소를 입력받을 때 사용(자동으로 유효성검사)
	number	숫자를 입력받을 때 사용
	range	특정 범위의 숫자를 선택하는 슬라이더 컨트롤을 생성
	color	색상을 선택하는 컨트롤을 생성
	date	날짜를 입력하는 컨트롤을 생성
	month	연도와 월을 입력하는 컨트롤을 생성
	week	연도와 주차를 입력하는 컨트롤을 생성
	time	시간을 입력하는 컨트롤을 생성
	datetime	UTC 시간대에 맞게 날짜/시간을 입력하는 컨트롤을 생성
	datetime-local	날짜와시간을 입력하는 컨트롤을 생성

 

 

 

** search와 tel **

 

**file과 image**

 

**number와 range**

 

**날짜와 시간입력**

 

 

---

 

●<textarea>태그

 

1. <textarea>태그란?

 

사용자로부터 텍스트를 입력받기 위해선 <input type="text">를 사용하면 한줄에 해당하는 짧은 텍스트를 입력받을 수 있다.

반면 <textarea>태그를 사용하면 여러줄에 해당하는 텍스트를 입력받을 수 있는데, 이때 기본적인 텍스트 영역의 크기는 row와 cols 속성을 사용해서 지정한다.

 

 

2. <textarea> 속성

 

속성	설명
name="이름"	텍스트 영역의 이름을 지정
cols="숫자"	텍스트 영역의 너비를 지정
rows="숫자"	텍스트 영역의 높이를 지정
wrap="값"	폼으로 전송될 때 줄바꿈 포함 여부를 지정
readonly	텍스트 영역을 읽기전용으로만 사용

이 외에도 input 태그에서처럼 autofocus, disabled, form, maxlength,placeholder, required등의 속성도 사용된다.

 

 

 

*실습*

 

---

 

●<select>태그

 

1. <select>태그란?

 

드롭다운 리스트를 만들 때 사용하는 것으로서, 리스트에서 선택할 수 있는 옵션을 정의하기 위해서 <select>태그 내에서 <option>태그를 사용한다.

 

 

2.<select>태그의 속성

속성	설명
name="이름"	드롭다운 리스트의 이름을 지정
size="숫자"	한 번에 화면에 보여지는 항목의갯수를 지정
multiple	여러 개의 항목을 한번에 선택할 수 있도록 지정

 

 

3. <option>태그의속성

속성	설명
disabled	해당 옵션을 비활성화시킴
label="텍스트"	옵션의 긴 항목을 짧은 레이블로 value의우측에 표시
selected	페이지가 로드될 때 미리 선택될 옵션을 지정
value="텍스트"	서버로 전달되는 항목 값을 지정

 

 

*실습*