[HTML-03] 여러가지 중요 태그들2

2019. 06. 13 필기

 

 

● FORM 태그

<form></form> : 값을 액션페이지(서블릿orJSP로 만듦)로 전달하는 기능 제공

 

○ 값을 다른 문서로 전달하는 방법

1. URL 주소에 QueryString 이용
2. Form 태그 이용 --- ajax 를 사용하지 않는다면 form태그를 통해서만 값 전달 가능
* action 속성 : 값을 전달할 페이지의 URL 주소를 속성값으로 설정 - 생략된다면 현재 페이지에서 값 전달
* method 속성 : 값을 전달하는 방식(요청방식)
=> 하위태그 : input, select, textarea 등

값 입력 기능의 태그가 반드시 존재
=> input, select, tectarea 등

값 전달(submit) 기능의 태그가 반드시 존재
=> input, button 등

○ 클라이언트의 자원 요청 방식 - method

1. GET
: 값을 URL 주소의 QueryString으로 전달하여 요청
 => 소용량의 일반적인 값을 전달하고자 할 경우 사용
2. POST
: 값을 REQUEST MESSAGE에 숨겨서 전달하여 요청
 => 대용량 또는 보안을 필요로 하는 값을 전달하고자 할 경우 사용
* enctype 속성 : 값을 전달하는 형식을 속성값으로 설정
--- "application/x-www-form-urlencoder" : 텍스트값 (default) - 2byte씩 전송
--- "multipart/form-data" : 원시값(파일 전달) - 1byte씩 전송 / 라이브러리 제공됨

 

● INPUT 태그

<input> : 값을 입력받거나 이벤트 기능의 버튼을 제공

type 속성 : 태그의 기능을 속성값으로 설정
type 속성값
-- "hidden" : 사용자로부터 값을 직접 전달(개발자가 많이 씀) - value 필요
-- "text" : 문자열을 입력받아 전달할 경우 사용 - value 필요
-- "radio" : 동그라미 체크박스
-- "checkbox" : 네모 체크박스
-- "file" : 파일을 업로드할 때 --- enctype 속성값을 "multipart/form-data"로 설정
-- "email" : 이메일 입력받아 전달 --- 이메일 형식이 아닐 경우 에러 발생
-- "number" : 숫자 입력받아 전달 --- 숫자 외 입력 불가
-- "tel" : 전화번호 입력받아 전달 --- 스마트기기의 입력패드가 숫자판으로 자동 변경
-- "url" : URL 주소 입력받아 전달 --- url 형식으로 입력하지 않을 경우 에러 발생
-- "search" : 검색 키워드를 입력받아 전달 --- 스마트기기에서 자동완성 기능 제공
-- "color" : 색상값(RGB #RRGGBB - 16진수)를 입력받아 전달
-- "range" : 
-- "date" : 
-- "time" : 
-- "datetime-local" : 
-- "button" : 버튼 출력 - 이벤트 핸들러 속성(onclick)으로 기능부여 가능
-- "submit" : form 태그로 값을 전달하는 버튼 출력
-- "reset" : form 태그의 값을 초기화 시키는 버튼
--- submit, reset은 <input> 대신 <button></button> 사용해서 표현 가능

submit, reset 버튼에 이미지를 입힐 수도 있다.
 ==> <input type="image" src="/디렉토리/파일명" name="submit">
 --- name 속성값으로 "submit" 또는 "reset"으로 설정

name 속성 : 태그의 이름을 속성값으로 설정 - 액션페이지에서 값을 구분하기 위해 사용(Parameter name)
value 속성 : 각 속성에 값을 지정해 줌. (ex. 버튼에 출력될 텍스트)
size 속성 : 입력 필드에 보여지는 input 요소의 크기(size)를 설정(입력창 크기!)
maxlength 속성 : 최대 입력 가능한 입력값의 크기(입력값 크기!)
required 속성 : 필수 입력기능 제공(입력값 없을 시 오류메시지 뜸) - value 생략 가능(기본메시지 출력)
placeholder 속성 : 입력 필드에 메시지 출력 - 보통 유효성검사에 대한 내용 출력(ex. 10자 이내의 아이디만 가능합니다)
autofocus 속성 : 입력초점을 태그에 제공
--- required, placeholder, autofocus, email 등등은 HTML5버전 이상부터만 가능 >> 한국 웹사이트에서는 잘 사용 X

 

● LABEL 태그

<label></label> : label 요소로 묶인 영역을 클릭했을 때 선택이 된다.
                       즉, 꼭 입력창을 선택하지 않고 텍스트만 클릭해도 입력초점이 주어지거나 선택됨

 

● TEXTAREA 태그

 

● SELECT 태그

 

● DATALIST 태그

<datalist></datalist> : input 태그에 입력값 제공
=> 하위태그 : option 태그

list 속성에 datalist 태그의 고유값을 속성값으로 설정 - 입력값 선택

 

● FIELDSET 태그

<fieldset></fieldset> : 입력 영역 구분
=> 하위태그 : legend