쌍용 강북 교육센터 국비학원 Day 43일차
<form> 태그
form태그는 웹 페이지에서의 입력 양식을 의미한다. 로그인 창이나, 회원가입 폼 등이 이에 해당된다. 텍스트 필드에 글자를 입력하거나, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달되어 정보를 처리하게 된다.
form 태그 속성
폼 속성을 이용하여 해당 데이터를 전송할 때 어디로 보내야하는지 어떤 방법으로 보낼지 정하는걸 의미한다.
name - 폼을 식별하기 위한 이름을 지정한다. (name은 보통 JSP에서 DB의 컬럼명으로 사용)
accept-charset - 폼 전송에 사용할 문자 인코딩을 지정한다.
target - action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다.
method - 폼을 서버에 전송할 http 메소드를 정한다. 즉, 웹 서버와 클라이언트간의 통신 방법 (GET 또는 POST)
type - 폼의 모양과 기능 결정
action - 폼 데이터가 전송되는 백엔드 url. 폼을 전송할 서버 쪽 스크립트 파일을 지정한다. 즉, 사용자가 입력한 데이터를 받아 처리하기 위한 웹 프로그램 (ASP, PHP, JSP… 등)의 페이지 지정
<input> 태그
사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 준다. type 속성을 통해 종류를 나타내며, name을 통해 데이터의 이름, value를 통해 기본 값을 지정한다.
input type 속성의 종류
- text : 일반 문자 및 텍스트
- password : 비밀번호 입력 양식
- button : 버튼
- submit : 양식 제출용 버튼
- reset : 양식 초기화용 버튼
- radio : 한개만 선택할 수 있는 컴포넌트
- checkbox : 체크를 표시하여 다수를 선택할 수 있는 컴포넌트
- file : 파일 업로드 속성
- hidden : 사용자에게 보이지 않는 숨은 요소
- range : 범위를 나타내는 속성 (max와 min으로 값을 지정할 수 있다.)
- date : 날짜를 나타내는 속성
- color : 색상을 나타내는 속성
- number : 숫자를 입력받는 속성 (max와 min으로 값을 지정할 수 있다.)
name - 태그에 이름을 지정한다.
readonly - 읽기전용 태그로 지정한다.
maxlength - 해당 태그의 최대 글자 수를 지정한다.
required - 해당 태그를 반드시 입력이 필요한 필수태그로 지정한다.
autofocus - 페이지 로드시 이 속성을 지정한 태그로 포커스가 이동된다.
placeholder - 태그에 입력할 값에 힌트를 제공한다. (input 박스안의 예시를 나타낸다)
pattern - 정규표현식을 사용하여 특정범위 내의 유효한 값을 입력받을때 사용한다.
accept - 해당하는 파일의 형태만 받는다. ex) ' image/* ' - 이미지 파일만 입력받는다.
<field> , <legend> 태그
폼 태그 안에 관련 있는 폼 요소들을 그룹화할 때 사용한다. <fieldset> 태그 하위에 <legend> 태그를 사용하여 그룹화한 폼 요소들을 목적에 맞게 이름을 지정한다.
<fieldset> - 폼을 묶어주는 (그룹핑)역할을 한다.
<legend> - fieldset에 대한 제목을 지정한다. (위의 예제로 "회원가입 정보"가 legend 태그안에 들어가 있다.)
<select> , <optgroup> , <option> 태그
<select>는 항목을 선택할 수 있는 태그이다. 속성중에는 size와 multiple 속성이 있으며 size는 한번에 표시할 항목 수를 의미하고, multiple은 다중선택을 허용할 것인지 지정하는 속성이다.
select 태그 하위에는 <optgroup> 태그와 <option> 태그가 있으며 optgroup는 select 태그 안에서 목록들을 그릅화할 경우 사용되고 label속성을 사용하여 그룹 이름을 지정한다. optgroup 태그 하위에는 목록을 나타내는 태그인 <option>이 포함되어있다. (위의 예제로 선호음식이나 선호 프로그램이 해당된다. 옵션태그의 value 값이 없으면 태그사이에 있는 단어 (데이터)가 넘어간다)
<textarea> 태그
여러 줄을 입력받는 태그로 속성중에 rows와 cols가 있다. rows는 줄을 cols는 한 줄이 입력될 크기를 지정한다.
(위의 예제로 가입인사말이 해당된다)
<datalist> 태그
텍스트 상자에 입력 값 후보 목록을 지정할 경우 사용한다. (위의 예제로 웹브라우저가 해당된다)
<table> 태그
표를 만들어주는 태그로, 표 뿐만 아니라 갤러리와 웹사이트 전체의 레이아웃 공간을 배치할때도 사용할 수 있는 등 매우 다양하게 응용이 가능하여 굉장히 많이 사용되는 태그중 하나이다.
table의 주요 태그
<table> - 테이블을 만드는 태그
<th> - 테이블의 열의 제목. 헤더를 만드는 태그
<tr> - 테이블의 행을 만드는 태그
<td> - 테이블의 열을 만드는 태그
<caption> - 표의 설명 또는 제목을 나타낸다.
<colgroup> - 표의 열을 묶는 그룹을 정의합니다. (속성에 span이 존재하는데 span = '숫자' 는 묶어줄 열의 개수를 뜻한다)
<thead> - 표의 타이틀 용도로 쓰이는 행들의 집합이다. (테이블에서 오로지 1번만 사용)
<tbody> - 표의 여러 행 (<tr>)을 묶어서 표 본문을 구성합니다. (표의 데이터를 표시하는 용도로 쓰인다)
<tfoot> - 표의 마지막에 요약데이터나 총합 등을 보여줄 때 사용한다. (테이블에서 오로지 1번만 사용)
- align - 정렬을 지정한다.
- bgcolor - 배경색을 지정한다.
- bordercolor - 테두리 선의 색을 지정한다.
- cellspacing - 셀간의 간격을 지정한다.
- width - 가로의 길이를 지정한다. (px이나 %로 입력)
- height - 세로의 길이를 지정한다. (px이나 %로 입력)
- rawspan - 지정한 값만큼의 행을 병합한다. (위 아래 - tr태그 다음 바로 tr태그가 바로나와야 하므로 사용할 때 주의)
- colspan - 지정한 값만큼의 열을 병합한다. (좌우로)
- vertical-align - 세로 기준 정렬을 뜻한다. (text-align인 가로기준과 반대. 테이블 태그와 inline 요소만 가능하므로 주의)
