2020년 1학기 인터넷프로그래밍 (07주차 수업자료 1) 박 기 홍
- 1 -
※ 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=
…
2020년 1학기 인터넷프로그래밍 (07주차 수업자료 1) 박 기 홍
- 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>
2020년 1학기 인터넷프로그래밍 (07주차 수업자료 1) 박 기 홍
- 3 -
- 예시
내용
예시
문자열 입력 필드
<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> 태그 등 알아보기. 아래 코드를 작성 후 실행해 보자.
2020년 1학기 인터넷프로그래밍 (07주차 수업자료 1) 박 기 홍
- 4 -
2020년 1학기 인터넷프로그래밍 (07주차 수업자료 1) 박 기 홍
- 5 -
- 입력 필드의 그룹핑
태그
속성
내용
<fieldset> </fieldset>
name
☞ 그룹 이름 지정
form
☞ 폼과 연결
disabled
☞ 그룹 내의 모든 하위 입력요소들을 비활성화
<legend> </legend>
☞ 그룹을 구분하기 위한 제목 레벨
☞ 그룹 라벨의 스타일은 그룹을 구분하는 선의 중간에 걸쳐서 표시
※ <fieldset>, <legend> 태그 등 알아보기. 아래 코드를 작성 후 실행해 보자.
2020년 1학기 인터넷프로그래밍 (07주차 수업자료 1) 박 기 홍
- 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”
☞ 색상 선택
2020년 1학기 인터넷프로그래밍 (07주차 수업자료 1) 박 기 홍
- 7 -
※ 아래 코드를 작성 후 실행해 보자.
2020년 1학기 인터넷프로그래밍 (07주차 수업자료 1) 박 기 홍
- 8 -
※ 날짜와 시간 입력
<input type=“date”>
<input type=“month”>
<input type=“week”>
※ 아래 코드를 작성 후 실행해 보자.
2020년 1학기 인터넷프로그래밍 (07주차 수업자료 1) 박 기 홍
- 9 -
※ 색상 입력
-
<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+'원'"/>
※ 암호화 키 생성
- 서버와 통신할 때의 보안을 위해 암호화 키 생성(공개키 기반 암호화 방식)
- 폼이 제출되면 공개키와 개인키가 생성(공개키는 서버로 전송, 개인키는 브라우저에서 키 보관)
2020년 1학기 인터넷프로그래밍 (07주차 수업자료 1) 박 기 홍
- 10 -
※ 아래 코드를 작성 후 실행해 보자. (색상 선택)
※ 아래 코드를 작성 후 실행해 보자.
