textarea요소

이는 여러 줄을 입력 받기 위해 사용하는 요소이다. 특이한 점은 컨텐츠가 없는 빈 태그임에도 관습적으로 종료 태그를 같이 써준다는 점이다.

<label for="">Your message</label>
<textarea name="user-message" id="" cols="30" rows="10"></textarea>

cols와 rows는 박스의 크기를 지정해준다.

또한 여기에 입력한 후 인풋을 제출하게 되면

user-message=dsfadsf%0D%0A%0D%0Adsfdf%0D%0Adfd%0D%0A

와 같이 URL에 %가 섞인 이상한게 추가되는데 이는 브라우저가 줄바꿈과 특수문자 등을 URL형식에 맞게 변형한 것이다.

드롭다운

드롭 다운은 사용자에게 여러 값을 옵션으로 제공할 때 등에서 라디오 박스 대신 사용하는 것이다.

드롭다운을 만들기 위해서는 select요소를 사용한다. select요소는 여러 option요소를 자식으로 가지는데, ul이나 ol안에 li가 중첩되어 있는 것으로 보면 될 듯?

option요소는 드롭다운에 표시될 여러 옵션을 텍스트로 가지고 있다.

<label for="favorite-color">Your favorite color?</label>
<select name="color" id="favorite-color">
     <option value="">Blue</option>
     <option value="">Red</option>
     <option value="">Green</option>
</select>

드롭다운이 생겼다. 드롭다운은 구조가 조금 복잡해서 스타일링을 제대로 하려면 조금 힘들다고 한다. 나중에 필요할 때 알아봐야겠다.

주의할 점은 name을 지정할 때 option이 아니라 select요소에 적용해야 한다는 점이다. 어차피 옵션 중 하나만 선택하게 되므로 select에 한 번만 name을 지정한다.

또한 value에 아무 값도 지정하지 않으면 보이는 텍스트가 그대로 전송되기 때문에 다른 정보를 전송하고 싶다면 option의 value속성에 각각 명시해주어야 한다.