3_html_(폼관련태그)

폼 관련 태그

<form> 태그는 HTML에서 사용자가 입력할 수 있는 양식을 제공하는 태그

사용자가 입력한 정보를 서버 또는 다른 페이지로 전달하는 역할을 함

속성

# name : form태그의 고유 이름을 지정하는 태그, form태그들 끼리 구분을 위해 사용

# action : form태그 내부에 입력된 데이터를 전송받아 처리할 서버 또는 페이지의 URL 작성

# method : 데이터 전송 방식 지정

- get : URL창에 데이터를 담아 전달하는 방식

(전달되는 데이터가 눈에 보임)

전달하는 데이터 크기에 제한이 있음(256~4096byte)

- post : HTTP 요청(request)에 데이터를 담아 전달하는 방식

(전달되는 데이터가 보이지 않음)

전달하는 데이터 크기에 제한이 없음

# target : action속성의 지정된 페이지를 어떻게 보여줄것인가 지정

<label> : input태그에 대한 간단한 설명을 작성하는 태그

# submit : submit버튼을 클릭시 action에 지정된 경로로

지정된 method(전송방식)에 따라 input 태그 값들을 전송함

action 미작성시 현재페이지로 데이터 전송

method 미작성시 기본값은 get방식

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

<legend> : 묶은 폼 요소에 명칭을 붙이는 태그

@text와 관련된 input태그@

# text : 한줄 짜리 텍스트를 입력할 수 있는 텍스트 상자

# password : 비밀번호를 입력할 수 있는 텍스트 상자

# search, url, email, tel

: 겉모습은 "text"와 비슷하지만 각각의 정보에 맞게 분화된 기능을

제공하는 텍스트 상자 + 유효성검사

@숫자 관련 input 태그@

# number : 텍스트 상자에 숫자만 입력가능하게 하는태그

+ 브라우저 종류에 따라 스핀박스가 표시되기도함

# <range> : 슬라이드바를 통해 숫자 지정

@ 날짜 관련 input 태그 @

type = "date" / "month" / "week" / "time" / "datetime" / "datetime-local"

@ 라디오 버튼 & 체크박스 input 태그 @

태그를 여러 개 선언하여 하나의 용도로 사용함

-> 각 태그의 name 속성을 동일하게 작성하여 그룹 형성

@추가 input 태그 @

# color : 색상선택

# file : 파일선택

# hidden : 특정값을 화면에 노출시키지않고 전송

@Button 태그@

(html5방식)

<button>button</button>

button태그에 type이 지정되지 않고 form 태그 내부에 존재하는 경우 type이 자동으로 submit으로 설정됨

@ select, option 태그@

<select>
	<option value=""></option>
</select>

옵션 : checked가 아니랃 seleted임

@ textarea 태그 @

여러줄이 입력 가능한 텍스트 상자

옵션 : row ="", cols=""

css옵션 : style="resize:none"