웹페이지

HTML STEP 11 - FORM

IT의 큰손 2023. 4. 12. 10:40
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
저작자표시 비영리 변경금지