<select> placeholder 만들기

required(boolean attribute)

데이터 전송 전 반드시 작성해야 하는 폼 요소를 가리킨다.

아래의 타입에서 작동한다.

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

 

작성하지 않고 넘어갈 경우, 안내창이 뜨고 데이터가 전송되지 않는다.

www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_required

 

disabled(boolean attribute)

form 요소를 비활성한다. 비활성된 요소는 클릭하거나 사용할 수 없다.

비활성된 요소는 js를 사용해 disable value를 지워서 사용할 수 있다.

option태그에 사용시 option이 안보이게 된다.

 

:invalid(css pseudo-class)

form요소의 컨텐츠가 확인되지 않을 때, 해당 태그를 선택하도록 도와주는 CSS 가상선택자이다.

회원가입 폼에서 input태그의 빨간 테두리를 만들 때 사용한다고 생각하면 쉬울 것 같다.

developer.mozilla.org/en-US/docs/Web/CSS/:invalid

 

 

이 세 요소를 사용해서 placeholder를 만들 수 있다.

See the Pen select tag placeholder by esther kang (@esther0619) on CodePen.

첫번째 option에 disabled attribute를 추가하여 select 클릭시 나오는 옵션에서 제거하고 select attribute를 추가하여, select를 클릭하지 않았을 때 첫번째 option이 select창에 placeholder처럼 보이게 된다.

 

 

공부하다보니 폼 요소의 attribute와 type가 생각보다 많다는 것을 알게되었다.

참고해서 자세히 공부해야겠다!

www.w3schools.com/tags/tag_input.asp

 

 

참고 : www.w3docs.com/tools/code-editor/2592