[HTML5&CSS] Form styling하기

label을 styling하기 위해서 font와 text의 크기를 조절한다.

textboxes나 textareas는 일반적으로 그 크기를 바꾸고, border를 제거한다. 또 예시 입력값인 placeholder를 추가해서 어떤 값을 입력하면 되는지를 도와주도록 한다.

 

button을 styling하기 위해서 일반적으로 배경색과 크기를 바꾼다. button의 box 바깥이 흉하므로 좀 손본다.

 

Select boxes를 styling하기 위해서는 일반적으로 text box처럼 보이게 만들고, 오른쪽의 아래 화살표를 styling한다.

 

form validation을 위해서 HTML은 required attribute를 제공한다. 입력이 꼭 필요한 field는 required attribute를 사용한다. CSS에서 이를 select하기 위해서 :valid 와 :invalid pseudo selector를 사용할 수 있다.