form tag 사용하는 이유
form tag는 입력된 데이터가 여러개일 때 제출하면 서버로 한번에 전송한다.
속성
action : 폼을 전송할 서버 쪽 스크립트 파일을 지정
name : 폼을 식별하기 위한 이름을 지정
accept-charset : 폼 전송에 사용할 문자 인코딩을 지정
target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정
method : 폼을 서버에서 전송할 http 메소드를 지정
폼을 구성하는 다양한 엘리먼트
fieldset tag : 폼 태그 안에 관련 있는 폼 엘리먼트들을 그룹화 할 때 사용
legend tag : 그룹화한 폼 엘리먼트들을 목적에 맞게 이름을 지정
input tag
사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 준다.
속성
type : input tag의 모양을 변경할 수 있다.
- text, radio, checkbox, password, button, hidden, file, submit, reset 등을 지정 가능
name : 태그 이름을 지정
readonly : 태그를 읽기전용으로 활성화
maxlength : 해당 태그 최대 글자 수를 지정
required : 해당 태그가 필수태그로 지정, 입력하지 않고 제출할 시 에러 메세지가 출력
autofocus : 웹 페이지가 로딩되자마자 이 속성을 지정한 태그로 포커스 이동
placeholder : 미리 입력 값을 지정, focus 시 자동으로 사라짐
pattern : 정규표현식을 사용하여 특정범위 내의 유효한 값을 입력받을 때 사용 - title : 정규표현식에 맞지 않을 때 경고 문구로 지정 가능
목록태그
select tag : 항목을 선택할 수 있는 태그
- size : 한번에 표시할 항목 수를 의미
- multiple : 다중선택 혀용 여부를 지정
optgroup tag : select tag의 하위 tag, select 태그 안에서 목록들을 그룹화할 경우 사용, label 속성을 사용하여 그룹 이름을 지정
option tag : select tag의 하위 tag, 목록을 나타내는 태그
여러줄 글상자
textarea tag : 여러 줄을 입력받는 태그, 속성 중에 rows와 cols가 있고 rows는 줄을, cols는 한 줄에 입력될 크기 지정
form tag 안에 있는 button tag 제출 동작 막기
다음과 같이 button tag의 type을 button으로 지정하면 제출되지않는다.
<button type="button">버튼</button>