[노마드코더-바닐라JS로 크롬앱 만들기] HTML에서 required속성, maxlength속성

[노마드코더 - 바닐라JS로 크롬앱 만들기]

HTML에서 required속성, maxlength 속성

 

 

  <form class="login-form">
    <input 
      required
      maxlength="15"
      type="text"
      placeholder="What is your name?"
    />
    <input type="submit" value="Log in" />
  </form>

 

1. input태그의 required속성

input태그에 필수값 적용을 위한 속성으로 form 태그의 자식요소로 있을 때 적용된다.

required 속성이 제대로 동작하는 <input> 요소의 type 속성값은 다음과 같다.

- checkbox, date, email, file, number, password, pickers, radio, search, tel, text, url

 

required 속성은 불리언(boolean) 속성

불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 된다.

 

출처 : http://tcpschool.com/html-tag-attrs/input-required

 

 

 

 

2. input태그의 maxlength속성

input태그에서 허용되는 최대 글자수를 명시한다.

 

이 방법은

input의 type이 'text, search, url, tel, email, password' 일 경우에만 유효하다.

type이 'number'일 경우에는 유효하지 않다.

따라서, type이 'number'인 경우에는 다음의 방법을 사용해야 한다.

 

*5자리 숫자 제한인 경우

<input 
  type='number' 
  oninput='handleOnInput(this, 5)'
/>

숫자를 입력할 수 있는 'type'이 'number'인 input이 있고,

여기에 'oninput' 입력 이벤트가 발생하면

'handleOnInput' 함수가 호출된다.

이때, 첫번째 파라미터로 이벤트가 일어난 element, 즉, input element가 전달이되고,

두번째 파라미터로 최대 입력 글자 길이(5)가 전달된다.

출처: https://hianna.tistory.com/435 [어제 오늘 내일]