728x90
★ Form
- 입력 양식, 입력 컨트롤
- 클라이언트(사용자)로부터 입력장치(키보드,마우스 등)를 통해서 데이터를 입력
- 입력 데이터 > 서버로 전송!! > 업무 활용 or DB저장 등..
- <form>
- 모든 입력 컨트롤을 감싸는 컨테이너
- 입력값을 서버로 전송하는 역할
- 1. form.method
- 데이터를 전송하는 방식
- 1. get
- 전송되는 데이터를 URL에 붙여서 전송하는 방식
- 편법
- 전송되는 데이터가 노출(주소창) > 보안 X
- http://localhost:8090/client/html/ex19.jsp?data=java
- 노출되면 안되는 데이터 절대로 get으로 전송 금지!!
- URL(최대 256자) > Overflow > 짤림 > 대량의 데이터 전송금지(655535바이트)
- 2. post
- 전송되는 데이터를 패킷안에 넣어서 전송하는 방식
- FM
- http://localhost:8090/client/html/ex19.jsp
- 데이터가 외부로 노출 안됨 > 보안 O
- 전송 길이 무제한
- 2. form.action
- 데이터를 수신하는 서버측 주소(URL)
- 데이터를 수신할 능력이 있는 프로그램의 주소
■ 사용 ex)
- html 소스코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>데이터 입력</h1>
<form method="get" action="ex19.jsp">
<input type="text" name="data">
<input type="submit" value="전송하기">
</form>
</body>
</html>- jsp 소스코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>서버측 수신 페이지(택배 수신인)</h1>
<%
String data = request.getParameter("data");
%>
<p>데이터 : <%= data %></p>
</body>
</html>- 실행결과
★ 폼 컨트롤
- <input> 태그
- 인라인 태그
- 단독 태그
- input.type : 입력 컨트롤의 종류
- input.name : 식별자, HTML에서 사용
- input.id : 식별자, CSS/JavaScript에서 사용
- input.class : 식별자, CSS/JavaScript에서 사용
- input.size : 길이(문자 개수)
- input.maxlength : 최대 입력 길이(문자수)
- input.value : 컨트롤의 입력값(현재 입력값)
- input.readonly : 읽기 전용(전원 ON) > 서버로 전송 가능
- input.diabled : 비활성화 (전원 OFF) > 서버로 전송 불가능
- input.accesskey : 포커스로 바로가기 이동
- input.autofocus : 자동 포커스
- input.autocomplete : 자동완성 기능
- 사용 ex)
<form>
텍스트박스(단일라인) : Alt + S
<input type="text" name="address" id="txt1" class="txt" size="20" accesskey="s" autofocus autocomplete="off">
</form>
- 암호 상자
- 모든 속성이 텍스트 박스와 동일
- value 속성은 사용 금지 > 항상 새로 입력받게 만든다.
- 사용 ex)
텍스트박스(암호):
<input type="password">
- 텍스트 박스(다중라인)
- 다중라인 입력
- 쌍태그
- 대부분의 속성은 텍스트 박스와 동일
- value 속성이 없다.
- 영역 > 일반 문서 영역x, 컨트롤 영역o > 편집기의 공백이 그대로 적용
- 사용 ex)
텍스트박스(다중라인):
<textarea cols="50" rows="5">안녕하세요.</textare>
- 체크 박스
- 논리값 입력
- 사용 ex)
- label 태그 > 글자를 선택해도 선택가능
- checked > 사용자가 체크를 안해도 체크가 된 상태에서 사용
체크박스 :
<input type="checkbox">
<h2>취미 선택</h2>
<input type="checkbox"> 독서
<input type="checkbox"> 수영
<input type="checkbox"> 영화
<input type="checkbox" id="cb1"> <label for="cb1">독서</label>
<label><input type="checkbox"> 수영 </label>
<input type="checkbox" checked> 영화
- 라디오 버튼
- 반드시 2개 이상 함께 사용
- 사용 ex)
<input type="radio"> 남자
<input type="rddio"> 여자
- 셀렉트 박스
- 콤보박스, 드랍 다운 리스트
- 사용 ex)
셀렉트 박스 :
<select>
<option>강아지</option>
<option>고양이</option>
<option>병아리</option>
</select>
셀렉트 박스2:
<select>
<optgroup label="자바">
<option>클래스</option>
<option>메소드</option>
<option>배열</option>
</optgroup>
<optgroup label="오라클">
<option>테이블</option>
<option>프로시저</option>
<option>조인</option>
<option>서브쿼리</option>
</optgroup>
<optgroup label="HTML">
<option>▣▣▣ HTML ▣▣▣</option>
<option>head태그</option>
<option>body태그</option>
</optgroup>
</select>
- 파일 업로드
- 첨부 파일
- Open Dialog Box 호출하는 역할
- 사용 ex)
파일 선택:
<input type="file">
- 히든태그
- 눈에 보이지 않는 태그
- 개발자용
- 사용자가 모르게 서버로 데이터를 전송하는 역할
- 사용 ex)
히든 태그:
<input type="hidden" name="id" value="hong">
- 버튼들
- 1. 전송 버튼 : submit
<input type="submit" value="보내기">- 2. 취소 버튼 : reset
취소버튼 : <input type="reset" value="초기화">- 3. 일반 버튼 : button
일반버튼 : <input type="button" value="일반 버튼" onclick="alert('안녕하세요!!')">- 4. 전송 버튼2 : <button type="submit">
전송버튼 : <button type="submit">보내기</button>- 5. 취소 버튼2 : <button type="reset">
취소버튼 : <button type="reset">초기화</button>- 6.일반 버튼2 : <button type="button>
일반버튼 : <button type="button">일반버튼</button>- 1과 2가 다른점
- 디자인 기능이 보강된 버튼
버전 1
<input type="submit" value="<img src=''> 보내기">
버전2
<button type="button">
<img src="images/bullet01.png">
보내기
</button>728x90
'웹페이지' 카테고리의 다른 글
| HTML STEP 13 - HTML5 (0) | 2023.04.12 |
|---|---|
| HTML STEP 12 - Table 예제 (2) | 2023.04.12 |
| HTML STEP 10 - HTML 기초 예제문제 (0) | 2023.04.11 |
| HTML STEP 9 - TABLE (0) | 2023.04.11 |
| HTML STEP 8 - TAG (0) | 2023.04.11 |
728x90
★ Form
- 입력 양식, 입력 컨트롤
- 클라이언트(사용자)로부터 입력장치(키보드,마우스 등)를 통해서 데이터를 입력
- 입력 데이터 > 서버로 전송!! > 업무 활용 or DB저장 등..
- <form>
- 모든 입력 컨트롤을 감싸는 컨테이너
- 입력값을 서버로 전송하는 역할
- 1. form.method
- 데이터를 전송하는 방식
- 1. get
- 전송되는 데이터를 URL에 붙여서 전송하는 방식
- 편법
- 전송되는 데이터가 노출(주소창) > 보안 X
- http://localhost:8090/client/html/ex19.jsp?data=java
- 노출되면 안되는 데이터 절대로 get으로 전송 금지!!
- URL(최대 256자) > Overflow > 짤림 > 대량의 데이터 전송금지(655535바이트)
- 2. post
- 전송되는 데이터를 패킷안에 넣어서 전송하는 방식
- FM
- http://localhost:8090/client/html/ex19.jsp
- 데이터가 외부로 노출 안됨 > 보안 O
- 전송 길이 무제한
- 2. form.action
- 데이터를 수신하는 서버측 주소(URL)
- 데이터를 수신할 능력이 있는 프로그램의 주소
■ 사용 ex)
- html 소스코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>데이터 입력</h1>
<form method="get" action="ex19.jsp">
<input type="text" name="data">
<input type="submit" value="전송하기">
</form>
</body>
</html>- jsp 소스코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>서버측 수신 페이지(택배 수신인)</h1>
<%
String data = request.getParameter("data");
%>
<p>데이터 : <%= data %></p>
</body>
</html>- 실행결과
★ 폼 컨트롤
- <input> 태그
- 인라인 태그
- 단독 태그
- input.type : 입력 컨트롤의 종류
- input.name : 식별자, HTML에서 사용
- input.id : 식별자, CSS/JavaScript에서 사용
- input.class : 식별자, CSS/JavaScript에서 사용
- input.size : 길이(문자 개수)
- input.maxlength : 최대 입력 길이(문자수)
- input.value : 컨트롤의 입력값(현재 입력값)
- input.readonly : 읽기 전용(전원 ON) > 서버로 전송 가능
- input.diabled : 비활성화 (전원 OFF) > 서버로 전송 불가능
- input.accesskey : 포커스로 바로가기 이동
- input.autofocus : 자동 포커스
- input.autocomplete : 자동완성 기능
- 사용 ex)
<form>
텍스트박스(단일라인) : Alt + S
<input type="text" name="address" id="txt1" class="txt" size="20" accesskey="s" autofocus autocomplete="off">
</form>
- 암호 상자
- 모든 속성이 텍스트 박스와 동일
- value 속성은 사용 금지 > 항상 새로 입력받게 만든다.
- 사용 ex)
텍스트박스(암호):
<input type="password">
- 텍스트 박스(다중라인)
- 다중라인 입력
- 쌍태그
- 대부분의 속성은 텍스트 박스와 동일
- value 속성이 없다.
- 영역 > 일반 문서 영역x, 컨트롤 영역o > 편집기의 공백이 그대로 적용
- 사용 ex)
텍스트박스(다중라인):
<textarea cols="50" rows="5">안녕하세요.</textare>
- 체크 박스
- 논리값 입력
- 사용 ex)
- label 태그 > 글자를 선택해도 선택가능
- checked > 사용자가 체크를 안해도 체크가 된 상태에서 사용
체크박스 :
<input type="checkbox">
<h2>취미 선택</h2>
<input type="checkbox"> 독서
<input type="checkbox"> 수영
<input type="checkbox"> 영화
<input type="checkbox" id="cb1"> <label for="cb1">독서</label>
<label><input type="checkbox"> 수영 </label>
<input type="checkbox" checked> 영화
- 라디오 버튼
- 반드시 2개 이상 함께 사용
- 사용 ex)
<input type="radio"> 남자
<input type="rddio"> 여자
- 셀렉트 박스
- 콤보박스, 드랍 다운 리스트
- 사용 ex)
셀렉트 박스 :
<select>
<option>강아지</option>
<option>고양이</option>
<option>병아리</option>
</select>
셀렉트 박스2:
<select>
<optgroup label="자바">
<option>클래스</option>
<option>메소드</option>
<option>배열</option>
</optgroup>
<optgroup label="오라클">
<option>테이블</option>
<option>프로시저</option>
<option>조인</option>
<option>서브쿼리</option>
</optgroup>
<optgroup label="HTML">
<option>▣▣▣ HTML ▣▣▣</option>
<option>head태그</option>
<option>body태그</option>
</optgroup>
</select>
- 파일 업로드
- 첨부 파일
- Open Dialog Box 호출하는 역할
- 사용 ex)
파일 선택:
<input type="file">
- 히든태그
- 눈에 보이지 않는 태그
- 개발자용
- 사용자가 모르게 서버로 데이터를 전송하는 역할
- 사용 ex)
히든 태그:
<input type="hidden" name="id" value="hong">
- 버튼들
- 1. 전송 버튼 : submit
<input type="submit" value="보내기">- 2. 취소 버튼 : reset
취소버튼 : <input type="reset" value="초기화">- 3. 일반 버튼 : button
일반버튼 : <input type="button" value="일반 버튼" onclick="alert('안녕하세요!!')">- 4. 전송 버튼2 : <button type="submit">
전송버튼 : <button type="submit">보내기</button>- 5. 취소 버튼2 : <button type="reset">
취소버튼 : <button type="reset">초기화</button>- 6.일반 버튼2 : <button type="button>
일반버튼 : <button type="button">일반버튼</button>- 1과 2가 다른점
- 디자인 기능이 보강된 버튼
버전 1
<input type="submit" value="<img src=''> 보내기">
버전2
<button type="button">
<img src="images/bullet01.png">
보내기
</button>728x90
'웹페이지' 카테고리의 다른 글
| HTML STEP 13 - HTML5 (0) | 2023.04.12 |
|---|---|
| HTML STEP 12 - Table 예제 (2) | 2023.04.12 |
| HTML STEP 10 - HTML 기초 예제문제 (0) | 2023.04.11 |
| HTML STEP 9 - TABLE (0) | 2023.04.11 |
| HTML STEP 8 - TAG (0) | 2023.04.11 |
