roadmap HTML (2. Forms and validations)

Oh Joon·2020년 12월 4일

html roadmap

Roadmap HTML

목록 보기

3/4

🎈 HTML 폼이란?

HTML폼은 사용자와 웹사이트 또는 어플리케이션이 서로 상호 작용하는 기술 중 하나이다.
폼은 사용자가 웹사이트에 데이터를 전송하는 것을 허용한다.
폼은 하나 이상의 위젯으로 만들어진다.
- 셀렉 박스
- 버튼
- 체크박스
- 라디오 버튼
- 텍스트 필드
위젯들은 위젯을 설명하는 라벨과 함께 사용된다.

📃 폼의 이해

입력된 데이터를 한 번에 서버로 전송한다.
전송한 데이터는 웹 서버가 처리하고 결과에 따른 또 다른 웹 페이지를 보여준다.

📃 폼 태그 동작방법

폼이 있는 웹 페이지를 방문
폼 내용을 입력
폼 안에 있는 모든 데이터를 웹 서버로 전송
웹 서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램으로 넘김
웹 프로그램은 폼 데이터를 처리
처리결과에 따른 새로운 html 페이지를 웹 서버에 전송
웹 서버는 받은 html 페이지를 브라우저에 전송
브라우저는 받은 html 페이지를 화면에 출력

📃 폼 태그 속성

action : 폼을 전송할 서버 쪽 스크립트 파일을 지정한다.
name : 폼을 식별하기 위한 이름을 지정한다.
accept-charset : 폼 전송에 사용할 문자 인코딩을 지정한다.
target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다.
method : 폼을 서버에 전송할 http 메소드를 정한다. (GET or POST)
- GET은 폼 데이터를 URL 끝에 붙여서 눈이 보이게 보내지만 POST 방식은 내부적으로 보지이 않게 보낸다.

폼 태그 속성 예

<html>  
    <head>
    </head>

    <body>
        <form action = "http://localhost:8080/form.jsp" accept-charset="utf-8" 
              name = "person_info" method = "get"> 

        </form>
    </body>
<html>

위쪽이 GET 방식이고 아래쪽이 POST 방식이다.

URL 끝에 데이터를 붙여 보내는 GET 방식은 데이터가 외부에 노출되어 보안에 취약하다. 그래서 전송할 데이터가 개인정보 보안을 해야 하는 경우는 POST 방식을 사용해야 한다.

GET 방식은 지정된 리소스에서 데이터를 요청하는 경우인 읽을 때 사용하는 메소드이지만, POST 방식은 지정된 리소스에서 데이터를 처리할 경우인 쓰고, 수정, 삭제할 때 사용한다.

보안이 필요하지 않으면서 지정된 리소스에서 자원을 읽을 경우에는 GET 방식을 사용하고, 그렇지 않다면 POST 방식을 사용하면 된다.

📃 폼을 구성하는 다양한 엘리먼트

1. 폼 엘리먼트 그룹 `<field>,<legend>`

<fieldset> 태그는 폼 태그 안에 관련 있는 폼 엘리먼트들을 그룹화할 때 사용한다. 그리고 
<fieldset> 태그 하위에 <legend> 태그를 사용하여 그룹화한 폼 엘리먼트들을 목적에 맞게 이름을 지정한다.

2. 다양한 모양을 가진 `<input>`

사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 준다.

속성

type : 태그 모양을 다양하게 변경 가능. text, radio, checkbox, password, button, hidden, submit 등
name : 태그 이름을 지정
readonly : 태그를 읽기전용으로 변경
maxlength : 해당 태그 최대 글자 수를 지정
required : 해당 태그가 필수태그로 지정되며 필수 태그를 입력하지 않고 submit 버튼을 누르면 에러메시지가 출력된다.(HTML5 추가사항)
autofocus : 웹 페이지가 로딩되자마자 이 속성을 추가한 태그로 포커스가 이동
placeholder : 태그에 입력할 값에 대한 힌트를 줌(HTML5 추가사항)
pattern : 정규표현식을 사용하여 특정범위 내의 유효한 값을 입력받을 때 사용(HTML5 추가사항)

주민번호 입력 칸은 HTML5에서 추가된 pattern 속성을 사용하여 정규표현식에 맞는 정확한 값을 입력해야 한다. 정규표현식을 지키지 않고 submit 버튼을 누르면 정확한 입력방법 설명이 나타난다. checkbox는 여러 개를 선택할 수 있지만, radio는 그룹 목록 중 하나만 선택이 가능하다.

3. 목록태그 `<select>,<optgroup>,<option>`

select : 항목을 선택할 수 있는 태그. 속성에는 size와 multiple
- size : 한 번에 표시할 항목 수
- multiple : 다중 선택을 허용할 것인지 지정
optgroup : select 태그 안에서 목록들을 그룹화할 경우 사용하며 label 속성을 사용하여 그룹 이름을 지정함.
option : 목록을 나타내는 태그

select > optgroup > option