7-HTML Forms2

output

input타입은 oninput에서 정의하면서 표시된 값이 출력되게 해주는 element이다.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_output

TYPE

range

• 

type="text"

• 일반적인 텍스트워드를 받는다.

number

• 숫자를 받는다. min, max attribute로 최대 최소값의 validation을 진행할 수 있다.
• step : ^을 눌렀을때 얼마나 늘어나는지

password

• 우리가 흔히 아는 pwd입력.

submit

reset

• form에 있는 입력값들을 빈칸으로 초기화한다.

color

• input type으로 color picker를 이용하여 color 정보를 입력할 수 있다.
• http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_color

date

• 날짜에 관한 정보를 입력한다.

• min, max는 입력 가능한 날짜 중 최소값과 최대값을 의미한다. * min="2000-01-02"

• 이 min,max는 number에서도 지정해줄 수 있다.
  

  datetime-local

  • 날짜+시간
  • http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_email

  month

  • 월 선택

  week

  • 주 선택
    

  time

  • 시간만.
    http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_time

email

• 어떠한 값이 들어왔을 때 이메일 형식을 validation해주는 element이다.
  스마트폰같은건 자판이 바뀌므로 유용하다.
  http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_email

image

• https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_image
• 이미지를 input으로 받는다면은 sumbmit을 image로 대체해주는 기능이다. image submit으로 생각하면 될듯

file

• https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_file
  

  multiple arrteibute

  • 여러개의 파일 선택 가능

hidden

• 유저에게 보여주고 싶지 않지만 값의 구분을 위해 사용하는 부분.

• 하지만 개발자 도구에는 보이기에 보안을 위해 사용해서는 되지 않는다.

• https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_hidden

search

• 검색을 위한 type이다.
  

tel

• telephone number를 입력 가능한 부분이다.
• 전화와의 구분

url

• url validation은 하네 그래도
  http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_url

attribute

value

• ㅑㅞ셔

readonly

• 입력을 수정 못한다.
• 서버에는 전달 된다.
  http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_attributes_readonly

disabled

• 값 변경 불가능. 희미하게 보인다.
• 서버로는 전달되지 않는다.

size

• inputbox의 크기 조정

maxlength

• 최대 몇 자를 넣을 것인가.
• minlegth도 있음.

pattern

• 정규화식 정용.
• Works with the following input types : text, date, search, url, tel, email, and password
  https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_pattern

placeholder

required

• 반드시 입력해야 하게 설정

step

autofocus

height width

• 근데 이건 css로 하면 되는거 아님?

list

• 어떤 단어를 입력할 수 있는지 옵션을 보여준다. 사용자가 입력하는 것도 가능

autocomplete ="on"

• 자동완성기능. 이전에 입력한 단어들을 쿠키로 저장
  http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_autocomplete

form

• form attribute는 form의 id를 타겟팅하여 form밖에 있어도 이 attribute를 쓴 정보를 서버에 전달해준다.
• https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_form

formaction

• 보통 submit 버튼에 사용
• form에 정해진 서버가 아닌 다른 서버로 보내준다.
  http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_formaction

formenctype

• 보통 submit 버튼에 사용

formmethod

• 보통 submit 버튼에 사용
• form에 정의된 부분은 override

formtarget

• action의 탭을 override한다.
• 보통 submit 버튼에 사용

formnovalidate

• validation을 자동으로 해주는 element에서 검증 과정을 무시해버리는 attribute이다.
• <input>에 적용되는 부분이다.
  https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_formnovalidate

novalidate

• form에서 정의하는 no validate.
  https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_formnovalidate

공통 attribute

min max size step value...
placeholder