---
title: "HTML 정리 04"
date: "2019-01-28"
tags: ["HTML"]
status: archived
verified: false
---
---
## input tag - text type
* **text type일 때 disabled와 readonly 속성을 적용한 모습**
* rdisabled는 값 수정 불가, 서버로 전송 안됨
* readonly는 값 수정 불가, 서버로 값 전송 됨.
```html
```
* **size**속성으로 입력 필드의 길이를 조절가능
* 보여줄 글자 수 이긴 하지만 정확히 안떨어짐
* 융통성있게 크기를 맞추면 된다.
* **maxlength**는 입력가능한 글자 수
* size와 maxlength는 아무런 관련이 없다!
* **value**는 아무값도 입력하지 않았을 때 서버로 전송할 값
* 값이 입력되면 입력된 값이 넘어간다.
```html
```
* **placeholder** 속성은 HTML5에서 추가된 속성
* 사용자가 값을 입력하기 전까지 안내 문자열을 보여줄 때 사용
```html
```
## input tag - password type
* **비밀번호나 외부에 값을 노출시키지 말아야할 데이터를 입력받을 때 사용**
* 속성은 text와 동일
* text와 다르게 password는 한글이 입력되지 않는다.
* 다른 곳에 한글 입력 후 복사 붙여넣기로 입력은 가능
```html
```
## input tag - checkbox type
* **보기로 준비된 값 중 사용자가 여러개를 선택하여 입력할 때 사용**
* **value속성값이 서버로 전송될 값!**
* **name을 동일하게 설정하면 group으로 묶여진다.**
* 배열로 처리됨(일괄처리 가능)
* **웹은 이름이 같으면 무조건 배열로 처리된다.**
* checked는 특정 checkbox가 선택이된 상태로 제공할 때 사용
* 4.0.1까지는 checked 권장, HTML5에서는 checked="checked"를 권장
```html
좋아하는 과일 입력
사과(가을)
배(가을)
딸기(봄)
포도(여름)
```
## input tag - radio type
* **보기로 준비된 값 중 사용자가 한개를 선택하여 입력할 때 사용**
* name을 동일하게 설정하면 group으로 묶여진다.
* 배열로 처리됨
```html
남자
여자
```
## input tag - hidden type
* **사용자에게 값을 노출시키지 않고 값을 전달할 때 사용**
* JavaScript에서 값을 변경한 후 서버로 전송하는 경우 많이 사용됨
* 화면에 그려지진 않지만 소스보기로 확인 가능
```html
```
## input tag - image type
* **이미지를 제공할 때 사용자가 클릭하면 서버로 전송하게 된다.**
* **submit기능**
* form 태그 안에 모든 HTML Form Control들이 가진 값을 서버로 전송하는 일
* image태그는 검증하는 과정을 거치지 않고 보내지기 때문에 **사용을 권장 안함.**
```html
<클릭가능 <img태그, 클릭불가
```
## input tag - file type
* **파일 전송할 때 사용**
* JavaScript에서 값 변경을 할 수 없는 HTML Form Control
```html
```
## input tag - submit,reset,button type
* **사용자가 클릭하여 동작할 수 있는 버튼 류 HTML Form Control**
* **form 태그의 하위태그(자식태그)로 존재해야만 동작**
* **submit**
* **HTML Form Control의 값을 서버로 전송하는 기능**
* 브라우저마다 정해진 라벨이 존재
* **reset**
* **HTML Form Control의 값을 초기화하는 기능**
* 브라우저마다 정해진 라벨이 존재
* **button**
* **버튼 모양**
* JavaScript에서 유효성 검증을 해야하는 경우
* 기본 라벨이 없음
```html
```
```html
```
## 웹서버와 웹클라이언트의 요청/응답
## Form tag
* **HTML Form Control의 값을 서버로 전송하는 일을 하는 태그**
* input 태그들을 form태그로 감싸면 submit, button, reset이 동작하게 된다.
* **action 속성**
* **값을 받을 페이지의 URL**
* Servlet명, JSP명, ..
* **name 속성**
* JavaScript에서 접근할 이름
* **method 속성**
* **전송방식(GET/POST)**
```html
```
## 전송방식
* **GET**
* **주소창으로 데이터를 전송하는 방식**
* 보안이 되지 않는다.
* 중요하지 않은 데이터를 전달할 때 사용
* 255자 이하의 소용량 데이터를 전송할 때 사용
* 파일은 전송할 수 없다.
* 주소창에 URL을 직접 입력, anchor tag, form태그의 method 속성값을 get으로 줬을 때, JavaScript에 location.href로 이동할 때 GET방식으로 전송
* **POST**
* **HTTP header를 통해서 데이터를 전송하는 방식**
* 보안이 된다.
* 256자 이상의 대용량 데이터를 전송할 때 사용
* 파일을 전송할 수 있다.
* enctype="multipart/form-data"로 변경
* 반드시 form태그 method 속성값이 post인 경우에만 POST방식으로 전송
## label tag
* **택스트의 용도를 알려주기 위해서 사용하는 태그**
```html
```
## fieldset tag
* **HTML Form Control을 묶어주기 위해 사용하는 태그**
* **legend** 태그를 fieldset 하위태그로 넣으면 Java Swing의 titled border 라벨처럼 표시가능
```html
```
## select tag
* **radio와 비슷, 정해진 값 중 하나만 선택하여 전송할 때 사용**
* name속성은 식별하기 위한 이름
* option 태그의 value값은 서버로 전송되는 값
* option태그의 selected 속성으로 선택이된 상태로 나오게 할 수 있다.
```html
```
* size는 보여줄 옵션의 개수
```html
```
## textarea tag
* **많은 양의 문자열을 입력할 때 사용**
* rows 속성은 보여줄 행 수
* cols 속성은 한줄에 쓸 글자수
```html
```
## HTML5에서 추가된 HTML Form Control들
* ie에서 지원하지 않기 때문에 쓰일 일은 많이 없다..
```html
```
* **의미적**
* email, tel
* **기능적**
* date(날짜)
* color(색선택)
* number(숫자)
* range(범위)
* **의미적인 type들은 text type과 차이점은 없지만 소스볼 때 가독성을 높이기 위해 사용**
```html
의미적 Form Control
```
* **기능적인 date type**
* value 속성값이 "년-월-일" 형식의 값이 입력되면 해당 날짜정보가 입력되어 보여진다.
* 날짜 형식이 아니면 value값인식을 못 함 (value 속성 안쓴것과 동일 결과)
```html
기능을 가진 HTML Form Control
```
* **month 타입**은 년-월까지만 선택가능
```html
```
* **datetime-local 타입**은 "년-월-일 시:분:초" 형식의 값을 가진다.
```html
```
* **color 타입**
* 색 선택가능
* value속성값으로 RGB값을 넣어줄 수 있다.
```html
```
* **number 타입**
* 숫자를 위아래 화살표 클릭으로 값변경이 가능
```html
```
* **range 타입**
* min 속성으로 최소값
* max 속성으로 최대값
* value 속성은 현재값 설정이 가능
```html
0100
```
## media tags
* **HTML5 이전**
* **embed tag**
* 영상, 음악 파일 모두 재생할 수 있다.
* **HTML5에서 제공하는 태그**
* **audio tag**
* 음악만 재생
* **video tag**
* 동영상만 재생
* 지원 코덱이 다르기 때문에 브라우저에 따라 재생여부가 다름
## embed tag
```html
```
* **controller 속성**을 true로 주면 컨트롤바가 추가됨
```html
```
## audio tag
```html
```
* **audio 태그는 source 태그를 하위 태그로 줘도 된다.**
* 위에 source태그의 음악파일이 재생될 수 없다면 아래 source태그가 가진 음악파일이 재생된다.
* **순서대로 재생되는게 아니라 첫번째 소스가 재생이 안되면 다음 소스가 재생이 되도록한 것.**
* mp3가 안되면 wav파일이 재생되도록 한 것 처럼
```html
```
* 다음과 같이 코딩하면 만약 브라우저가 재생을 지원 안하면 "당신의 브라우저는 이 태그를 지원하지 않습니다."가 출력된다.
```html
```
## video tag
```html
```
* audio처럼 source를 줄 수 있다
```html
```
```html
```
## HTML5에서 지원되는 태그
* **mark tag**
* 하이라이트(형광펜효과)
* **code tag**
* element(열림태그와 닫힘태그 사이)가 가지고 있는 값이 다른 언어의 코드임을 명시적으로 알려줄 때 사용
```html
다른 언어의 코드
```
```html
int i=0;
System.out.println(i);
```
* **address tag**
* element가 가지고 있는 값이 주소임을 명시적으로 나타낼 때
* 이탤릭체로 표현된다.
```html
우리집 주소는 서울시 강남구 역삼동 한독빌딩 8층 4강의장입니다.
```
* **audio tag, video tag**
* **canvas tag**
* 2D 그래픽을 그릴 때 사용
* flash 효과를 대체가능
* JavaScript가 반드시 필수
* **nav, section, aside, footer tag**
* css로 설정한 영역을 의미적으로 구분하는 태그(semantic tag)
## 숙제
* 아래 두 페이지를 HTML을 사용하여 작성하세요.
* [join.html 풀이](https://github.com/younggeun0/SSangYoung/blob/master/dev/workspace/html_prj/WebContent/member/join.html)
* [agreement.html 풀이](https://github.com/younggeun0/SSangYoung/blob/master/dev/workspace/html_prj/WebContent/member/agreement.html)
<img태그, 클릭불가
```
## input tag - file type
* **파일 전송할 때 사용**
* JavaScript에서 값 변경을 할 수 없는 HTML Form Control
```html
```
## input tag - submit,reset,button type
* **사용자가 클릭하여 동작할 수 있는 버튼 류 HTML Form Control**
* **form 태그의 하위태그(자식태그)로 존재해야만 동작**
* **submit**
* **HTML Form Control의 값을 서버로 전송하는 기능**
* 브라우저마다 정해진 라벨이 존재
* **reset**
* **HTML Form Control의 값을 초기화하는 기능**
* 브라우저마다 정해진 라벨이 존재
* **button**
* **버튼 모양**
* JavaScript에서 유효성 검증을 해야하는 경우
* 기본 라벨이 없음
```html
```
```html
```
## 웹서버와 웹클라이언트의 요청/응답
## Form tag
* **HTML Form Control의 값을 서버로 전송하는 일을 하는 태그**
* input 태그들을 form태그로 감싸면 submit, button, reset이 동작하게 된다.
* **action 속성**
* **값을 받을 페이지의 URL**
* Servlet명, JSP명, ..
* **name 속성**
* JavaScript에서 접근할 이름
* **method 속성**
* **전송방식(GET/POST)**
```html
```
## 전송방식
* **GET**
* **주소창으로 데이터를 전송하는 방식**
* 보안이 되지 않는다.
* 중요하지 않은 데이터를 전달할 때 사용
* 255자 이하의 소용량 데이터를 전송할 때 사용
* 파일은 전송할 수 없다.
* 주소창에 URL을 직접 입력, anchor tag, form태그의 method 속성값을 get으로 줬을 때, JavaScript에 location.href로 이동할 때 GET방식으로 전송
* **POST**
* **HTTP header를 통해서 데이터를 전송하는 방식**
* 보안이 된다.
* 256자 이상의 대용량 데이터를 전송할 때 사용
* 파일을 전송할 수 있다.
* enctype="multipart/form-data"로 변경
* 반드시 form태그 method 속성값이 post인 경우에만 POST방식으로 전송
## label tag
* **택스트의 용도를 알려주기 위해서 사용하는 태그**
```html
```
## fieldset tag
* **HTML Form Control을 묶어주기 위해 사용하는 태그**
* **legend** 태그를 fieldset 하위태그로 넣으면 Java Swing의 titled border 라벨처럼 표시가능
```html
```
## select tag
* **radio와 비슷, 정해진 값 중 하나만 선택하여 전송할 때 사용**
* name속성은 식별하기 위한 이름
* option 태그의 value값은 서버로 전송되는 값
* option태그의 selected 속성으로 선택이된 상태로 나오게 할 수 있다.
```html
```
* size는 보여줄 옵션의 개수
```html
```
## textarea tag
* **많은 양의 문자열을 입력할 때 사용**
* rows 속성은 보여줄 행 수
* cols 속성은 한줄에 쓸 글자수
```html
```
## HTML5에서 추가된 HTML Form Control들
* ie에서 지원하지 않기 때문에 쓰일 일은 많이 없다..
```html
```
* **의미적**
* email, tel
* **기능적**
* date(날짜)
* color(색선택)
* number(숫자)
* range(범위)
* **의미적인 type들은 text type과 차이점은 없지만 소스볼 때 가독성을 높이기 위해 사용**
```html