[HTML] Input에 대해서

HTML 입력에 대해서

웹에서 사용자가 입력한 내용을 서버로 보낼 때, 사용한다. 대표적인 예시로 회원가입 및 로그인이 있다.

 

입력 양식의 작동 방식

1. 사용자는 입력 양식에 데이터를 채워서 서버로 보낸다.

2. 서버는 입력 양식을 받아 JSP와 같은 서버 스크립트로 보낸다.

3. JSP는 입력 데이터를 처리하여 새로운 웹페이지를 생성한다.

4. 입력에 대한 응답으로 새로운 웹페이지가 전달된다.

 

이렇게 글로 보면 어려우니 쉽게 설명하겠다.

 

 

1. 브라우저가 웹 페이지를 로드한다.

 

 

 

 

 

 

 

2. 사용자가 데이터를 입력 후 submit 버튼을 눌러 입력 양식을 웹서버로 전송한다.

3. 웹 서버는 양식을 받아 서버 스크립트를 통하여 처리하고 응답 페이지를 생성하여 사용자에게 보내준다.

서버가 보낸 응답페이지

 

 

<form> 요소에 대해서

 

위처럼 form 내부에 input태그가 들어가 있다. 즉 form은 하나의 양식을 만들어준다고 생각하면 쉽다.

또한 form태그의 속성에 method라는 속성이 있는데 이제 이 부분에 대해서 설명하겠다.

 

GET 방식과 POST 방식

GET 방식

• URL 주소 뒤에 파라미터를 붙여서 데이터를 전달하는 방식

 

위 사진을 보면 파라미터가 URL을 통해서 전송된다. GET방식은 간단한 방법으로 장점도 많으나 단점도 많다. 

 

단점

• GET 방식으로 보낼 수 있는 글자 수는 최대 2084글자로 제한되어 있다.
• 비밀이 보장되지 않는다. 즉 id, 비밀번호 입력을 GET방식으로 하면 당연히~~ 유출된다.

POST 방식

• 사용자가 입력한 데이터를 URL 주소에 붙이지 않고 HTTP request헤더에 포함시켜 전송하는 방식

POST방식은 GET방식의 단점이 보완된다는 장점이 있다. 길이 제한이 없으며 보안이 유지된다.

 

 

입력 요소

입력 요소들은 반드시 서버에서만 사용되는 것이 아니다.

클라이언트 컴퓨터에서만 사용될 수 있다. 이게 무슨 말이냐면 HTML문서에 포함된 자바 스크립트가 입력을 받아 특정 작업을 수행할 때도 사용될 수 있다.

 

 

입력 태그

아래 사진을 참고하여 필요한 태그를 사용하길 바란다.

 

<input> 형식

<input type="button" value="버튼" name="button1" />

• type : 입력 필드의 타입 결정
• value : 버튼에 나타나는 텍스트
• name : 서버로 전달되는 이름

흔히 사용하는 type들

 

여기서 추가로 설명하겠다.

password 사용 시 입력 내용이 사용자에게 보이지 않도록 점으로 표시된다.

 

radio는 하나만 선택할 수 있다.

checkbox는 중복 선택이 가능하다.

 

<label> 요소

label을 radio, checkbox와 함께 사용하면 체크하는 부분을 누르지 않고 이름을 눌러도 해당 부분이 선택된다. 단 label 사용 시 꼭 id를 지정해주어야 한다.

 

<select> 요소

option과 함께 사용해야 한다.

만약 selected 속성을 사용하면 기본으로 선택된다.

 

파일 업로드

<input type="file" accept="image/jpg,image/gif" >

type을 file로 지정해 준다.  여기서 accept 속성은 지정한 파일만 업로드할 수 있도록 하는 것이다. 만약 해당 속성을 지정하지 않을 시 모든 파일에 대해 업로드가 가능하다.

 

개발자들을 더욱 편하게 해주는 HTML5 입력 요소 

HTML5의 입력 타입은 자체적으로 입력에 대해서 검증해 준다.

 

여기까지 이상이다.

 

다음부터는 CSS를 다뤄보겠다