HTML - form에 대하여 알아보자 2

유용한 HTML Form Attributes:

1. The Action Attribute

주로 action 속성은 사용자가 submit 버튼을 누르면 입력된 데이터가 어떻게 처리되는지 지정합니다. 여기서, 보통은 form data는 서버의 파일 처리 핸들러가 받아서 적절하게 처리합니다.

 

2. Method Attribtue

Method Attribute는 데이터를 제출할 때 사용할 HTTP 메서드를 지정합니다.

Get 방식 - URL에서 데이터와 함께 보내는 방식

POST 방식- HTTP post transaction 으로 데이터를 함구하여 보내는 방식입니다.

 

입력 방식이 명시되지 않은 경우, 디폴트 방식은 GET 방식입니다.

HTML Form Elements

우리가 지난 포스트에서 다루지 못한 요소들을 이어서 설명해볼게요

(지난 포스트 : binarywoo.tistory.com/3 )

 

• <datalist>
• <output>

<datalist>

이 태그는 빈 공란에 커서를 갖다 대면 미리 개발자가 지정한 여러 드롭다운 리스트가 보여지게 되면서 원하는 항목을 선택하는 방법이에요.

<output>

output태그는 script에서 계산을 하고 결과값을 보여주는데 사용이 되요.

간단한 사칙연산을 지원해줍니다. 복잡한건 되는지 몰겟네용

 

추가로 알아볼 여러가지 HTML Input types

• <input type="color"> : 색갈을 고를 수 있게 클릭시에 조그마한 창이 생기네용! 

• <input type="date"> : 날짜를 입력할 수 있게 선택 bar 가 생깁니당

• <input type="email">: 이메일 형식인 xxx@xxx.com 으로만 데이터를 받을 수 있게 만들어놓아요
• <input type="file"> : 파일을 서버에 업로드 할 수 있도록 버튼이 생성됩니당. 파일 전송시 (submit 버튼 클릭시) 처리되는 방식은 form handler가 처리를 하겠죵?? 
• <input type="hidden"> : 
• <input type="image">
• <input type="month">
• <input type="number">: 숫자로만 값을 입력받을 수 있게 만들어요
• <input type="range">: 입력값의 범위를 지정할 수 있어요
• <input type="reset"> : 이 버튼을 클릭시 입력한 내용이 전부 지워져용
• <input type="tel">: 전화번호 형식인 010-1234-1234 으로 받을 수 있게 해요
• <input type="time">: 원하는 시간대를 설정할 수 있어요

• <input type="url">
• <input type="week">

 

다음은 HTML Input Attributes 로 입력받을시에 사용자 행동을 정의할 수 있어요

The readonly Attribute:

readonly라고 지정하면 사용자는 입력된 값을 바꿀 수 없습니다.

The size Attribute:

입력받을 내용의 크기를 미리 지정할 수 있습니다.

The required Attribute:

개발자는 사용자가 꼭 입력해야할 목록들을 빠뜨리지 않고 입력하게 만드는 기능이에요.

The formenctype Attribute

Submit 버튼을 누를시에 (POST 방식에 한하여) form-data가 엔코딩이 필요한지를 input formenctype이 결정하게 됩니다.

Note: 주로 submit과 image 타입에 사용됩니다.

중요!!) 이 방식은 주로 이미지를 서버에 전송을 할때 사용됩니다. 

여기서는 입력값을 엔코딩하지 않음을 뜻하여 이미지 파일 자체를 전송하게 함을 의미합니다.

multipart/form-data : 
모든 문자를 인코딩하지 않음을 명시함.이 방식은 <form> 요소가 파일이나 이미지를 서버로 전송할 때 주로 사용함.

추가 내용:

HTML Canvas Graphics

HTML<캔버스> 요소는 웹 페이지에 그래픽을 그리는 데 사용됩니다.

상세한 내용은 아래 링크 참조 하세용:

www.w3schools.com/html/html5_canvas.asp

HTML SVG Graphics

SVG란 무엇인가?
SVG는 확장 가능한 벡터 그래픽을 나타냅니다.
SVG는 웹에 대한 그래픽을 정의하는 데 사용됩니다.
SVG는 W3C 권장 사항입니다.

www.w3schools.com/html/html5_svg.asp