※ HTML5 + CSS3 ① 폼 (form) 태그 <form name=“ 이름 ” method=“get/post” action=“ 애플리케이션 주소 ”> </form>

※ HTML5 + CSS3

① 폼 (form) 태그

- 회원가입, 상품구매, 키워드 검색 등 사용자로부터 정보를 받을 때 - 사용자와 애플리케이션의 상호작용

- 즉, 사용자가 입력하는 정보를 하나로 묶어서 애플리케이션에 전달할 수 있도록 다양한 입력양 식을 그룹핑(grouping)하고 전송방법을 설정함.

<form name=“이름” method=“get/post” action=“애플리케이션 주소”> </form>

․ method 속성: 데이터들이 전송되는 방식을 지정

․ action 속성: 데이터를 처리할 애플리케이션 프로그램 주소(URL)

․ name 속성: 폼 요소에 대한 이름을 지정

get 방식 post 방식

- 전송할 데이터를 URL 주소에 포함하여 문자열 형태로 전달

- URL뒤에 ‘?’에 이이서 “변수명=값”

- 변수가 여러개일 경우 &로 구분 - 한글은 16비트 유니코드로 표현

- get 방식은 간단한 데이터를 전달할 때 용이 - 주소창에 전달하는 값이 노출되어 보안에 취약

- 프로그램의 입출력 방식을 사용하여 데이터의 양에 제한이 없음.

- 전송하는 데이터가 드러나지

않으므로 보안이 필용한 경우 많이 사용함.

… /application.js?person=%C8%AB%B1%E6%B5%BF&sex=

male&job= …

- 2 -

② 입력 (input) 태그

- <form> 태그 안에 <input>, <textarea>, <select>, <button> 등 태그

태그 속성 내용

<input>

name ☞ 입력 요소의 이름

value _{☞ 입력 요소의 값}

type ☞ 입력 폼의 유형을 결정

<input type="입력 형식" name="변수명", value="입력 값">

type=“text” ☞ 문자열 입력 필드

type=“password” _{☞ 암호 문자열}

type=“radio” _{☞ 단일 선택}

type=“checkbox” _{☞ 복수 선택}

type=“submit” _{☞ 전송 버튼}

type=“reset” _{☞ 초기화 버튼}

type=“button” _{☞ 임의 기능 버튼}

type=“image” ☞ 이미지를 전송 버튼으로 정의

type=“file” _{☞ 파일 선택}

type=“hidden” _{☞ 숨길 필드}

<textarea> </textarea>

^name ☞ <textarea> 요소의 이름을 지정 cols ☞ 한 줄에 해당하는 문자수 rows ☞ 텍스트 영역의 행의 개수

<textarea name="이름" cols="열의 수" rows="행의 수">

텍스트 영역에 표시되는 초기 문장

</textarea>

<select> </select>

^name ☞ 선택목록의 변수명

size ☞ 사용자들에게 보여줄 항목의 개수

multiple ☞ 하나 이상의 항목을 선택 가능

<option> </option>

value ☞ 각 항목을 구별하기 위한 값

selected ☞ 초기 화면에서 기본 값으로 지정

<select name="job" size="1" >

<option value="student" selected>학생</option>

<option value="company">회사원</option>

<option value="teacher">교사</option>

<option value="sales">자영업</option>

<option value="others">기타</option>

</select>

- 예시

내용 예시

문자열 입력 필드

<input type="text" name="변수명" value="초기값"/>

암호 입력 필드

<input type="password" name="변수명"/>

라디오 버튼

<input type="radio" name="변수명" value="선택값"/>

체크박스 선택

<input type="checkbox" name="변수명" value="선택값"/>

전송 버튼

<input type="submit" value="버튼라벨"/>

초기화 버튼

<input type="reset" value="버튼라벨"/>

일반 버튼

<input type="button" value="버튼라벨"/>

이미지 버튼

<input type="image" src="이미지 파일" alt="문자열"/>

파일 선택하기

<input type="file" name=“myfile”/>

데이터 숨김

<input type="hidden" name="변수명" value=값"/>

※ <form>, <input> 태그 등 알아보기. 아래 코드를 작성 후 실행해 보자.

- 4 -

- 입력 필드의 그룹핑

태그 속성 내용

<fieldset> </fieldset>

name _{☞ 그룹 이름 지정} form _{☞ 폼과 연결}

disabled ☞ 그룹 내의 모든 하위 입력요소들을 비활성화

<legend> </legend> ☞ 그룹을 구분하기 위한 제목 레벨

☞ 그룹 라벨의 스타일은 그룹을 구분하는 선의 중간에 걸쳐서 표시

※ <fieldset>, <legend> 태그 등 알아보기. 아래 코드를 작성 후 실행해 보자.

- 6 -

③ 고급형식으로 입력하기

- 서식이 있는 텍스트 입력 - 날짜와 시간 입력 - 색상 및 숫자 입력 - 고급 입력 요소

※ <input> 태그에 추가된 새로운 속성

-

autocomplete

속성: 자동으로 사용자의 입력을 완성 -

placeholder

속성: 입력 값에 대한 설명을 희미하게 표시 -

required

속성: 사용자가 필수적으로 입력을 하도록 검증

-

autofocus

속성: 문서가 로드될 때 입력 영역에 마우스 커서를 표시 -

step

속성: 입력필드나 숫자나 범위를 조절하는 단계를 지정

※ <input> 태그 이외에 추가된 입력 태그

-

<output>

: 폼의 처리 결과

-

<datalist>

: 입력 양식에 대한 내용을 옵션 리스트로 제공 -

<keygen>

: 암호화 키를 생성

pattern=”[A-Za-z] {no }” : no개 만큼의 영문자를 입력 pattern=”[0-9] {no }” : no개 만큼의 숫자를 입력

pattern=”[A-Za-z0-9] {min, max }” : 영문자와 숫자를 min~max 만큼의 글자 수 입력 pattern=”[0-9]+” : 숫자를 1개 이상 입력

태그 구분 속성 내용

<input>

텍스트 관련

type=“email” _{☞ 이메일 주소}

type=“URL” _{☞ URL 주소}

type=“tel” _{☞ 전화번호}

type=“search” _{☞ 검색창 입력}

날짜와 시간

type=“date” _{☞ 날짜}

type=“month” ☞ 연도/월

type=“week” _{☞ 연도/주}

type=“time” _{☞ 시간}

type=“datetime” ☞ UTC time zone 날짜/시간 type=“datetime-local” ☞ Time zone이 없는 날짜/시간

색상 및 숫자

type=“number” _{☞ 숫자}

type=“range” _{☞ 일정 범위의 수}

type=“color” _{☞ 색상 선택}

※ 아래 코드를 작성 후 실행해 보자.

- 8 -

※ 날짜와 시간 입력

<input type=“date”> <input type=“month”> <input type=“week”>

※ 아래 코드를 작성 후 실행해 보자.

※ 색상 입력

-

<input type=“color”/>

- 크롬 브라우저: 색상 입력 양식을 클릭하면 전체 색상을 보여주는 시스템 색상메뉴

※ 숫자 입력

-

<input type=“number” min=“0” max=“100” step=“10” value=“20”/>

- 화살표 버튼으로 숫자를 조절할 수 있는 입력 형식

※ 범위 입력

-

0.1mm <input type=“range” min=1 max=5 value=3/> 0.5mm

- 스크롤바를 움직여서 일정한 범위의 숫자를 입력

※ 고급 입력

- 검색어 자동완성 및 제시어 기능

참가국 : <input type="text" size="12" list="country" />

<datalist id="country">

<option value="스페인"/>

<option value="영국"/>

<option value="독일"/>

</datalist>

※ 자동 계산 출력

- 입력된 데이터로부터 계산된 결과 표현, 폼의 출력을 위한 요소

금액 : <input type="number" name="price" min="0" step="100" value="0" /> 원 X

<input type="number" name="num" min="0" step="1" value="0" /> 권 =

<output onForminput="value=price.valueAsNumber*num.valueAsNumber+'원'"/>

※ 암호화 키 생성

- 서버와 통신할 때의 보안을 위해 암호화 키 생성(공개키 기반 암호화 방식)

- 폼이 제출되면 공개키와 개인키가 생성(공개키는 서버로 전송, 개인키는 브라우저에서 키 보관)

- 10 -

※ 아래 코드를 작성 후 실행해 보자. (색상 선택)

※ 아래 코드를 작성 후 실행해 보자.