HTML의 태그들(4)

○ 논리 태그들

● <arg> 태그

요약을 할 때 사용한다

● <em> 태그

강조된 텍스트를 표현할 때 사용한다. 이탤릭체

● <cite> 태그

인용구. 작품의 제목을 지정할 때 사용한다

● <kbd> 태그

키보드 입력을 나타날 때 사용한다
요소 내의 텍스트는 기본 고정폭 글꼴을 사용하여 표현된다

● <code> 태그

컴퓨터 코드(컴퓨터가 인식할 수 있는 어떤 문자열)의 일부분을 나타낼 때 사용한다

● <q> 태그

잛은 인용구를 정의할 때 사용한다(" ~ ")

● <dfn> 태그

용어의 정의를 나타낼 때 사용한다

● <samp> 태그

컴퓨터 메시지. 컴퓨터 프로그램의 샘플 또는 인용 출력을 나타낼 때 사용한다

● <var> 태그

변수를 정의할 때 사용한다

실행 코드

실행 결과

● <form> 태그

사용자 의견이나 정보를 알기 위해 입력할 큰 틀을 만드는 데 사용한다
(웹 페이지를 통해 사용자 입력을 받는 폼) 게시판, 회원 가입, 로그인 부분에 해당하는 문서를 만들 경우에도 사용한다

입력 글 상자, 라디오 버튼, 선택 상자, 드롭 다운 메뉴 등의 다양한 형태로 방문자에게 내용을 선택할 수 있게 하며,
입력한 정보는 PHP, JSP와 같은 웹 프로그래밍 요소와 연동하여 실제 서버 측에 전송된다

form 태그의 형식

<form name="폼 이름" method="post/get" action="폼 실행 프로그램">
폼 양식
</form>

form 태그의 속성

• name : 폼을 식별하기 위한 이름을 지정한다. 한 문서 내에 여러 개의 폼 양식이 있는 경우 구분을 지어줄 때 사용한다
• method : 폼을 서버에 전송할 http 메소드를 지정한다. get과 post 중 하나를 지정한다
  

           get과 post는 브라우저에서 폼 데이터를 가져와 서버로 보내는 똑같은 기능을 하지만,
       - get : 폼 데이터를 url 끝에 붙여서 눈에 보이게 한다
       - post : 폼 데이터를 내부적으로 하여 눈에 보이지 않게 한다

• action : 폼 양식에 입력한 값들을 실제로 전송시킬 프로그램 경로를 지정한다

          폼을 전송할 서버 쪽 스크립트 파일을 지정한다

• target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다
• accept_charset : 폼 전송에 사용할 문자 인코딩을 지정한다

● <input> 태그

사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 준다

input 태그의 속성

• type : 태그 모양을 다양하게 변경할 수 있다
• name : 태그 이름을 지정한다
• readonly : 태그를 읽기 전용으로 지정한다
• required : 해당 태그가 필수 태그로 지정된다. 필수 태그를 입력하지 않고 submit 버튼을 누르면 에러 메시지가 뜬다
• autofocus : 웹 페이지가 로딩되자마자 이 속성을 지정한 태그로 포커스가 이동한다
• pattern : 정규 표현식을 사용하여 특정 범위 내의 유효한 값을 입력받을 때 사용한다
• placeholder : 태그에 입력할 값에 대한 힌트를 준다
• value : placeholder와 달리 실제 적혀 있는 값이다
• maxlength : 해당 태그의 최대 글자 수를 지정한다
• minlength : 해당 태그의 최소 글자 수를 지정한다
• checked : 해당 태그를 미리 선택한다(radio, checkbox)

type 속성의 값

• text : 한 줄의 텍스트 입력 칸을 만든다
• password : 문자를 숨겨서 표시한다(별표나 동그라미 표시)
• submit : 폼 핸들러에게 폼을 제출하는 버튼을 정의한다
• radio : 라디오 버튼을 만든다(선택 항목 중 1가지만 선택 가능)
• checkbox : 체크박스를 만든다(선택 항목 중 여러 개 선택 가능)
• hidden : 사용자에게 보이지 않는 숨김 창을 만든다
• reset : 모든 폼 요소의 값을 초깃값으로 되돌리는 리셋 버튼을 정의한다
• file : 업로드할 파일을 선택할 수 있는 입력 필드와 "파일 선택" 버튼을 정의한다
• button : 누를 수 있는 버튼을 만든다
• email : 이메일을 입력할 수 있는 칸을 만든다
• range : 정확한 값이 중요하지 않는 숫자를 입력하는 창을 만든다(슬라이더 장치처럼)

실행 코드

실행 결과

checked 속성을 사용하여 지정한 항목이 미리 선택되게 만들었다

● <select> 태그

항목을 선택할 수 있게 하는 태그이다
콤보 박스라고도 하며, Pull-Down Menu 라고도 표현한다
select 태그 하위에 optgroup 태그와 optiono 태그가 있다

select 태그의 속성

• size : 한 번에 표시할 항목의 수를 의미한다
• multiple : 다중 선택을 허용할 것인지 지정한다

● <optgroup> 태그

select 태그 안에서 목록들을 그룹화할 경우에 사용하는 태그이다
optgroup 태그 하위에 option 태그가 있다

● <option> 태그

목록을 나타내는 태그이다
option 태그에서 사용하는 value 속성은 text 필드의 value와 다르다
텍스트 필드에서 value 속성에 값을 입력하면 기본 값이 입력되지만 option 태그는 option이 선택된 경우 전송되는 값을 지정하는 것이다.

값을 선택한 채로 폼을 전송하면 필드의 value 값은 선택한 옵션의 value 값으로 지정된다
기본 값으로 선택되게 하려면 option 태그 안에 selected 속성을 사용해야 한다

실행 코드

실행 결과

● <textarea> 태그

여러 줄을 입력받는 태그이다

textarea 태그의 속성

• rows : 행의 크기를 지정한다
• cols : 한 줄에 입력될 크기를 지정한다

실행 코드

실행 결과