28일차 - 폼을 만드는 여러 태그의 속성들, 자체 검증
폼을 만드는 여러 태그의 속성들
어제 폼과 폼에 자주 쓰이는 여러 태그들, 그리고 그 태그들의 속성들에 대해서 보았다. 그 후 폼의 완성본을 만들었지만 구조화가 덜 되어 오늘 페이지의 이곳저곳을 수정해보았다.
조금 길어서 축소시킨 것인데, 필수 개인정보와 선택정보란을 구분짓고, 입력할 인풋들의 위치도 그에 맞춰 재배치했다. 또한, 공백 제출을 막기 위해 required 속성도 사용했다.
오늘은 어제에 이어 조금 더 다채로운 속성과 속성값들을 보려고 한다.
📢 textarea 태그에는 cols 속성과 rows 속성이 있는데, cols 속성은 가로로 몇 글자를 수용할지 정하는 속성이고, rows는 세로로 몇 글자를 수용할지 정하는 속성이다.
위 이미지는 cols에 30을 적용하고 rows에 10을 적용해서 그것이 어떤 의미인지 숫자를 써서 나타내고 있는 것이다.
또, 이 textarea는 기본값으로 사용자가 크기를 조절할 수 있도록 우측 모서리에 조절바를 제공하는데, 이는 양식을 망가뜨릴 수 있기 때문에 css 속성으로 없앨 수 있다. 그래서 css의 resize 속성을 사용하여 none 값을 주면 사라진다.
이 resize 속성은 조절바를 없애기만 할 뿐 아니라, 수직이나 수평값을 적용해서 한 방향으로만 조절할 수 있도록 할 수도 있다.
📢 select 태그에는 option이라는 자식 태그가 항상 따라다니는데, 이는 드랍다운에 표시될 여러 옵션을 텍스트로 나타나게 해준다.
위 이미지에서는 사용자가 좋아하는 색상이 뭔지 물어보는 곳에 select 태그를 써서 자식 태그인 option에 5가지의 색상을 적용하고 표출되는 모습을 보여주고 있다.
📢 button 태그의 type 속성을 button으로 하면 사용자가 입력한 양식을 제출하지 않게 된다. 그래서 사용자가 잘못된 형식으로 입력해도 경고창이 뜨거나 URL이 바뀌는 일이 생기지 않는다.
또, 이 type 속성을 reset으로 설정하여 버튼을 생성하면 폼을 초기화시킬 수 있다.
📢 placeholder 속성: 사용자에게 입력칸에 무엇을 어떤 형식으로 입력해야 하는지 미리 보여주는 문구를 띄워놓는 속성이다. value 속성값은 사용자가 지우지 않는 한 사용자가 입력한 값으로 취급되지만, 이 속성값은 사용자가 입력하기 시작하면 입력창에서 사라지기 때문에 사용자가 입력한 값으로 취급되지 않는다.
위 이미지는 사용자에게 이메일은 이런 형식으로 입력하라고 알려주는 placeholder 속성을 사용한 모습이다.
브라우저가 제공하는 자체 검증
어제 형식에 맞지 않는 이메일을 입력했을 때 경고창이 뜬 걸 확인했다. 이렇게 input type의 여러 유형들에 적합하지 않은 값이 입력됐을 때 경고가 뜨거나 입력이 안되는 것을 검증이라고 한다. 각 속성이 자체적으로 검증을 하여 전송되어야 하는 곳에 보내주는 것이다. 이는 개발자가 따로 로직을 짜지 않는 이상 브라우저에서 기본으로 제공되는 검증시스템을 이용할 수가 있다.
만약 이런 단계를 거치지 않게 하고싶다면 부모요소인 form태그에 novalidate 속성을 사용하면 된다. 이 속성은 불리언 속성이기에 값은 필요없다. 이런 속성이 필요할 때는 개발자가 직접 자바스크립트로 검증 로직을 짜서 쓸 때이다.
이 input 태그에 이름을 적는 칸에는 보통 제한을 걸지 않는다. 하지만 공백으로 제출되는 것을 막기 위해 별도의 검증을 거치게 하는 방법이 있는데, required 속성을 사용하는 것이다.
위 이미지에서는 이름, 패스워드, 이메일에 모두 required 속성을 적용한 것과 입력을 안하고 제출했을 때 경고창이 뜨는 것을 보여주고 있다.
라디오 버튼에도 required 속성을 사용할 수 있다. 라디오 버튼에 이 속성을 사용하는 것은 모두 체크되어야 한다는 뜻이 아니라, 어느 한 개는 꼭 체크되어야 제출이 가능하다는 뜻이다.
최소, 최대값의 지정방법
위 이미지에서 암호타입의 input에 minlength가 있는데, 이 속성은 암호 입력시 최소길이를 지정하는 속성이다. 최대 길이를 지정하려면 maxlength 속성을 사용하면 된다.
또, 회원가입시에 최소 나이나 최대 나이를 지정하고 싶을 땐 input의 해당 속성에 min과 max를 사용한다.
회원가입이 가능한 생년월일도 지정할 수 있는데, input의 date 속성에 min과 max를 사용하며, '0000-00-00' 형식으로 입력하면 된다.
최소 생년월일을 지정하면 위 이미지처럼 해당 연도의 날짜 이전으로는 설정할 수 없도록 설정된다.
