[HTML] Form (1)

 

 

 

output

 

 

 

oninput : input을 받을 때 마다 x를 갱신한다.

range : 막대기로 값 입력

number : validation으로 숫자만 입력하도록 설정함.

 

 

 

 

이 외에도 여러 가지 input type 속성이 있으니 이런게 있구나~ 정도만 생각해두고 필요할 때 찾아서 사용하자.

 

속성 값이 직관적이라서 어떤 역할을 하는지 이해하기 쉽다.

 

속성 값을 사용해 편하게 validation을 수행할 수 있다.

당연히 자바스크립트와 백엔드 언어로도 validation을 수행해야 하고, html은 추가로 사용한다고 생각하자.

 

 

 

 

 

 

 

 

 

 

 

 

 

input 태그에서 min max 속성을 설정해서 입력할 수 있는 최소치와 최대치를 설정할 수 있다.

 

 

readonly : 커서를 놓을 수는 있지만 값을 변경 할 수는 없음. 대신 submit은 가능

disabled : 커서도 놓을 수 없음. 입력 박스도 희미하게 보여줌. submit시 서버로 전달되지 않음.

 

maxlength : 최대로 입력할 수 있는 길이를 설정한다.

size : 보여주는 크기를 설정한다.

 

placeholder : 로 사용자에게 입력값에 대한 힌트를 준다.

autofocus : 커서를 자동으로 지정한다.

 

height, width : input type이 image일 때도 사용할 수 있다.

 

 

 

list :

 

 

 

 

select와 비슷하지만, 사용자가 직접 입력 할 수도 있다.

 

 

autocomplete : on으로 설정 시 자동완성을 지원한다. off로 설정 시 자동완성을 끈다.

 

 

입력 데이터들을 꼭 form 태그 내부에서 정의해야되는건 아니다.

 

 

 

form 밖에 정의한 후 form 태그로 어느 form에 속하는지 명시 해 주는 방법도 있다.

 

 

 

하나의 form 내부에서 데이터를 전달할 때, 버튼에 따라 다른 서버에 전달하도록 할 수 있다.

 

 

 

다른 서버에 전달하도록 할 수도 있고, 다른 방식으로 데이터를 전달 할 수도 있다.

 

 

 

 

전송 시 전송 결과를 현재 페이지에서 보여줄수 있고, 새 페이지를 만들어서 보여줄수도 있다.

 

 

 

 

html태그에 따라 validation을 수행하는 경우가 있는데, validation을 무시하도록 설정할 수 있다.