HTML 개발자 수업 52일차(1)

728x90

1. form

[정의]

- 우리가 HTML을 배우는 목적 ( HTML Form + HTML INPUT Control )

- 사용자와 웹사이트 또는 어플리케이션이 서로 상호 작용하는 것 중 중요한 기술 중에 하나이다. 폼은 사용자가 웹사이트에 데이터를 전송하는 것을 허용한다. 일반적으로 데이터는 웹 서버로 전송되지만 웹페이지가 데이터를 사용하기 위하여 사용할 수 도 있다.

- <form> 이외의 태그: 주로 출력을 위한 태그들

- <form> 관련된 태그: 주로 행동(입력)을 위한 태그들

- 비유하자면... 택배상자!?

[속성]

1) action

- 입력받은 데이터를 수신할 서버측 프로그램의 주소(URL)

- 서버측 프로그래밍 언어로 작성한 프로그램의 주소를 적는다. (Servlet, JSP, Spring, 프로그램 주소)

- 데이터를 전송 받을 측의 주소 -> 택배 받는 사람 주소

2) method

[ GET ]

- 데이터를 전송할 URL에 덧붙여서 전송하는 방식

- 데이터가 외부에 노출된다. (보안이 중요한 데이터는 사용금지!!)

- URL(256자 제한) -> 전송 데이터가 길면 잘린다.

- 주로 숫자나 영문자를 보낼 때 사용 한다. -> 식별자 전송

[ POST ]

- 데이터를 전송 패킷의 본문 안에 넣어 전송하는 방식

- 데이터가 외부에 노출되지 않는다.

- 보안이 중요한 데이터에 사용(완전한 보안을 의미하진 않음)

- 데이터 전송 길이에 제한이 없다.

- 데이터 종류에 상관없이 모든 형태의 데이터를 보낼 때 사용한다.

<!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>폼 예시1</h1>
    <form method="POST" action="/ClientTest/ex19ok.jsp">
        데이터 : <input type="text" name="data" value="홍길동" disabled>
        <input type="submit" value="보내기">
    </form>
    
    <h1>폼 예시2</h1>
    <form method="GET" action="https://search.naver.com/search.naver">
        데이터: <input type="text" name="query">
        <input type="submit" value="보내기">
    </form>

</body>
</html>

[ 단일 입력 태그, <input> ]

- 단독 태그, 인라인 태그

- 데이터를 입력받는 태그

- 속성

type	입력 컨트롤의 종류(text가 기본값)
name	식별자, 가장 오래된 식별자, 서버로 전송할 때 사용, HTML에서만 사용된다.
id	식별자, CSS와 JavaScript에서 사용하는 식별자, HTML에서 아주 가끔 사용된다.
class	식별자, CSS와 JavaScript에서 사용하는 식별자, HTML에서 사용 안한다.
size	박스의 길이(문자 수)
maxlength	입력 가능한 최대 문자 수
value	해당 컨트롤의 입력값(미리 정하면 컨트롤이 초기값이 된다.)
readonly	플래그타입, 읽기 전용, 입력 OFF, 전원 ON --> 서버 전송 가능
disabled	플래그타입, 비활성화 입력 OFF, 전원 OFF --> 서버 전송 불가능
title	말풍선 도움말용도 이다.
accesskey	바로가기 키(Alt + 조합키)
autocomplete	검색 기록 끄기
autofocus	플래그 타입, 자동 포커스(활성화)
tapindex	탭 인덱스, tab키를 누를 때 포커스 받는 순서

[ 여러줄 입력 태그, <textarea> ]

- 쌍 태그, 인라인 태그

- 여러줄을 입력받는 텍스트 박스

- 대부분의 속성은 <input>과 동일하다.

- value 속성이 없다. > 기본값 지정 불가능 ? > PCDATA로 따로 지정한다.

- maxlength 속성이 없다. > 다량의 텍스트 입력용

- <textarea>의 영역은 컨트롤 영역이다. <body> 영역과 성질이 다르다! 모든 공백 문자를 있는 그대로 인식한다.

- <textarea>만의 속성

cols	컬럼 수(문자 수)
rows	줄 수(문자 수)

[ <input> 태그에서 type의 종류 ]

1) 체크박스(checkbox)

- 논리값 입력

- 속성: name, id, class, title, readonly, disabled

- checked: 플래그 타입, 컨트롤 체크 상태 제어

체크박스: <input type="checkbox" checked>
<hr>
<input type="checkbox" id="cb1"><label for="cb1">약관에 동의합니다.</label>
<hr>
<label>
    <input type="checkbox">약관에 동의합니다.
</label>
<hr>
<label for="txt1">이름:</label><input type="text" id="txt1">

2) 라디오 버튼(radio)

- 그룹 지정 -> name 속성 사용

- checked: 플래그 타입, 컨트롤 체크 상태 제어

- 라디오와 체크박스 차이점? radio: 단일선택, checkbox: 다중 선택

<input type="radio" name="rb1">동의
<input type="radio" name="rb1" checked>비동의
<hr>
<input type="radio" name="rb2">남자<br>
<input type="radio" name="rb2" checked>여자<br>
<input type="radio" name="rb2">기타

<input type="checkbox"> 햄버거
<input type="checkbox"> 콜라
<input type="checkbox"> 감자튀김
<input type="checkbox"> 샐러드

비동의, 여자는 checked 속성 사용, 맨 밑 타입은 다중 선택가능(checkbox)

3) 파일 업로드(file)

- 파일 선택:<input type="file">

4) 히든 태그(hidden)

- 개발자용

- 눈에 안보이는 텍스트 박스

- 고객 화면에는 보이지 않지만, 서버로 전송해야 하는 데이터

히든태그: <input type="hidden">

5) 그외의 버튼류(submit, reset, image, button 등..)

전송 버튼: <input type="submit" value="데이터를 전송합니다.">
취소 버튼: <input type="reset" value="취소 버튼">
이미지 버튼: <input type="image" src="images/cat01.jpg">
일반 버튼: <input type="button" value="일반 버튼" onclick="alert('출력메세지입니다!!');">

[ 선택 태그, <select> ]

- 셀렉트 박스, Combo Box, DropDownList 등... 여러가지 이름으로 불림

- 단일 선택(radio) - 기본값(default)

- 다중 선택(checkbox) - select multiple

1) 단일 선택(radio) - 기본값(default)

2) 다중 선택(checkbox) - select multiple

<!-- 1. 단일 선택 -->
<select size="10">
    <option>강아지</option>
    <option selected>고양이</option>
    <option>병아리</option>
</select>

<!-- 2. 다중 선택 -->
<select multiple size="10">
    <option>강아지</option>
    <option selected>고양이</option>
    <option>병아리</option>
</select>

<!-- 3. 안내문구 확인 후 선택 -->
<select>
    <option disabled selected>색상을 선택하시요.</option>
    <option>빨강</option>
    <option>노랑</option>
    <option>파랑</option>
</select>

<!-- 4. 여러개의 그룹 선택 -->
<select>
    <optgroup label="필수 색상">
        <option>빨강</option>
        <option>노랑</option>
        <option>파랑</option>
    </optgroup>
    <optgroup label="선택 색상">
        <option>주황</option>
        <option>보라</option>
        <option>초록</option>
    </optgroup>
</select>

MEMO>

# 처음으로 분량이 많아서 이어서 다음 페이지에 호스팅 하겠습니다!

728x90

저작자표시

'교육 > HTML' 카테고리의 다른 글

HTML 개발자 수업 52일차(2) - frame, html5 (0)	2021.06.10
HTML 개발자 수업 51일차 - image, table (0)	2021.06.09
HTML 개발자 수업 50일차 - body (0)	2021.06.08
HTML 개발자 수업 49일차 - Visual Studio Code(VSC) 설치, HTML (0)	2021.06.07

sleep

HTML 개발자 수업 52일차(1) - form

1. form

1. form

MEMO>

'교육 > HTML' 카테고리의 다른 글

댓글

티스토리툴바

HTML 개발자 수업 52일차(1) - form

1. form

1. form

MEMO>

'교육 > HTML' 카테고리의 다른 글

관련글

댓글

티스토리툴바