§ 폼태그
HTML : 폼(form) 이해
1. 폼 태그 속성
action : 폼을 전송할 서버 쪽 스크립트 파일을 지정합니다. //url 작성(http://~~.jsp, .do) asp, spring, servlet 파일 등의 경로 및 url을 써준다
name : 폼을 식별하기 위한 이름을 지정합니다. //입력양식의 이름 지정
accept-charset : 폼 전송에 사용할 문자 인코딩을 지정합니다.//html의 euc-kr, utf-8,16 등
target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정합니다.//default는 현재 창(this.document), 다른 창에서 열려면(ex.frame) 지정해줌, 거의 안씀
method : 폼을 서버에 전송할 http 메소드를 정합니다. (GET 또는 POST, multi part) //방법, 전송을 어떤 방식으로 할 것인지//get방식-주소창에서 어떤 값(parameter)이 넘어가는지 확인가능-데이터 양이 적을 때 좋음, 보안상 문제가 있다, post 방식- 어떤 자료가 넘어가는지 볼 수 없다, 보안이 좀 더 강함, cg방식으로 넘겨줌
//화면에 보이지는 않지만 입력된 자료를 묶어서 서버에 보내주는 역할
서버에 보내지 않을 때는 method나 action이 필요없다
2. 폼을 구성하는 다양한 엘리먼트(html 구성요소)
(1) 폼 엘리먼트 그룹 <field>, <legend> 태그
<fieldset> 태그는 폼 태그 안에 관련 있는 폼 엘리먼트들을 그룹화할 때 사용합니다.//필드들의 집합
그리고 <fieldset> 태그 하위에 <legend> 태그를 사용하여 그룹화한
폼 엘리먼트들을 목적에 맞게 이름을 지정합니다.
(2) 다양한 모양을 가진 <input> 태그//인풋 type을 text로 하면 한 줄에 입력 가능, 여러줄은 textarea 사용
<input> 태그는 사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 줍니다.
속성에는 type, readonly, maxlength 등이 있습니다.
type : 태그 모양을 다양하게 변경할 수 있습니다. type에는 text, radio(라디오 버튼), checkbox(체크하는 박스), password(text필드 같은데 내용입력하는게 별표시로 보임-암호),
button(버튼), hidden(입력 양식-화면에는 보이지않지만 폼양식의 필드 값으로 서버에 전송가능), fileupload(로컬 파일을 서버에 올릴 떄 사용), submit(서버에 전송), reset(입력양식을 꺠끗이 지움-취소) 등을 지정할 수 있습니다.//태그 모양을 만드는 값
name : 태그 이름을 지정합니다. //인풋 태그의 이름//실제 파라미터로 넘어가는 키 값, id는 식별하기 위하여 쓰는 클라이언트, 스크립트, 스타일 등에 쓰이는 것이고 서버로 넘길 때는 name을 사용, 중복되면 안된다, 중복되면 자동으로 배열로 바뀜
readonly : 태그를 읽기전용으로 합니다.//read only(읽기 전용)//입력 불가, 단순히 보여주기만 할 때-ex. 회원번호
maxlength : 해당 태그 최대 글자 수를 지정합니다.//~패스워드는 최대 몇 자리까지,아이디는 최대 몇 자까지
required : 해당 태그가 필수태그로 지정됩니다. 필수 태그를 입력하지 않고, submit 버튼을 //필수로 작성해야된다고 지정, 주소나 아이디 등을 꼭 지정하라고 함
누르면 에러메시지가 웹 브라우저에 출력됩니다. (HTML5 추가사항)
autofocus : 웹 페이지가 로딩되자마자 이 속성을 지정한 태그로 포커스가 이동됩니다. (HTML5 추가사항)//작성 목록에서 자동으로 아이디로 포커싱이 가게하는 등
placeholder : 태그에 입력할 값에 대한 힌트를 줍니다. (HTML5 추가사항)
pattern : 정규표현식을 사용하여 특정범위 내의 유효한 값을 입력받을 때 사용합니다. (HTML5 추가사항)//핸드폰 번호 등의 유효한 값 지정, 010-4자리수-4자리수//특정한 양식에 입력받아야할 글자 등의 지정
value는 값을 내가 입력해서 보여주는 것
(3) 목록태그 <select>, <optgroup>, <option>
<select>는 항목을 선택할 수 있는 태그입니다. 속성 중에 size와 multiple 속성이 있습니다.// 드롭 다운 형태, size는 한 번에 선택할 수 있는 항목 수가 한개, multiple은 여러개 다중선택 가능
size는 한 번에 표시할 항목 수를 의미하고, multiple는 다중선택을 허용할 것인지를 지정하는 속성입니다.
<select> 태그 하위에 <optgroup> 태그와 <option> 태그가 있습니다. <optgroup> //option의 약자
태그 는 <select> 태그 안에서 목록들을 그룹화할 경우 사용됩니다. label 속성을 사용하여 그룹 이름을 지정합니다.
<optgroup> 태그 하위에 <option> 태그를 포함합니다. <option> 태그는 목록을 나타내는 태그입니다.
(4) 여러 줄 글상자 <textarea>
여러 줄을 입력받는 태그입니다. 속성 중에 rows와 cols가 있습니다. rows는 줄을, cols는 한 줄에 입력될 크기를 지정합니다.
//세 줄은 3 rows, 자간은 cols, 1 column은 한 글자가 들어갈 크기이다
3. HTML5 에서 추가된 엘리먼트
HTML5에서 새롭게 추가된 엘리먼트들이 있습니다. 그 중에서 유용한 엘리먼트를 소개 하겠습니다.
(1) 입력 값 후보 <datalist>//input태그와 같이 쓰임
텍스트 상자에 입력 값 후보 목록을 지정할 경우 사용합니다.
(2) <input> 태그의 date
날짜를 입력받기 위한 속성값입니다. 날짜 선택을 위한 달력도 함께 표시됩니다. 이 값이 서버 프로그램에
전달되면 자바 date 객체에 바로 데이터가 전달됩니다. 그래서 쉽게 date 데이터를 서버 프로그램에서
받을 수 있는 장점이 있습니다.
날짜와 관련된 것에는 date 말고 month, week, time, datatime, datetime-local이 추가되었습니다.
date 속성과 비슷하게 지정하면 사용자가 원하는 결과를 볼 수 있습니다.
(3) <input> 태그의 number와 range //number는 숫자, range는 최대값~최소갑
number와 range는 둘 다 숫자를 입력할 때 사용합니다. 차이점으로 range 태그는 슬라이더 형태의
UI로 렌더링 된다는 점입니다. min, max 속성을 사용하여 최소 최댓값을 지정합니다.
(4) <input> 태그의 color
색상을 입력받을 때 사용합니다. color 타입은 아직 모든 웹 브라우저에서 지원하지 않지만,
일부 웹 브라우저에서 Color Picker 형태의 UI로 렌더링 됩니다.
etc 폼 datalist, 라디오버튼, textarea 등이 있다
화면에 뿌려주는 것 visible과 연관
폼 태그는 입력한 내용을 server에 보낸다 서버와 연동하려면 폼태그를 써야한다
국비교육 10일차 4교시에 진행
