HTML 드롭다운 리스트 select 태그

HTML 열네 번째 포스트에서는 select 태그를 배워보겠습니다.
이번에 공부할 select 태그 또한 form 태그 안에서 쓰이는 태그입니다.
계속해서 form 태그의 연장선이라고 보시면 될 것 같습니다.
select 태그란 무엇인지 아래의 생활코딩 강의 영상으로 공부해보겠습니다.




지난 포스트

HTML 긴 텍스트 문자 입력에는 textarea 태그

이번 HTML 포스트에서는 form 태그 안에 들어가는 textarea 태그에 대해서 배워보겠습니다. textarea는 긴 텍스트를 입력하는 컨트롤입니다.



select 태그




form_choice1.html
<!DOCTYPE html>
<html>
    <head>
        <title>선택</title>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="http://localhost/color.php">
            <h1>색상</h1>
            <select name="color">
                <option value="red">레드</option>
                <option value="blue">블루</option>
                <option value="black">블랙</option>
            </select>
            <input type="submit">
        </form>
    </body>
</html>

색상


위의 코드 실행 결과는 일부러 submit 버튼을 빼고 만들었습니다.
보낼 서버가 없으니 클릭해도 어차피 에러만 날 것이기 때문에..


select 태그는 우리들이 웹사이트를 이용하면서 수도 없이 많이 봤을 법한 이런 드롭다운 리스트 중에 하나를 선택하게 하는 태그입니다.
영상에서도 나온 것처럼 select 태그 안에 multiple이라는 속성을 넣으면 다중 선택이 가능해지지만 일반적으로 거의 사용하지 않는 방법입니다.
그런 때에는 체크박스라는 것을 사용하는 것이 훨씬 더 효율적인데 이건 다음 포스트에서 공부해보겠습니다.




다음 포스트

HTML 라디오 버튼과 체크박스

이번 HTML 포스트에서는 form 태그 안에 들어가는 input 태그의 속성 중에 radio와 checkbox에 대해 배워보겠습니다.

Post a Comment

1. 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
2. 가능하면 비로그인 방문자 분께서는 익명보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
3. 구글 블로그에 댓글을 쓰고 '게시' 버튼을 클릭했을 때 가끔 에러가 발생해서 댓글이 날아가는 이슈가 있습니다.
혹시 장문의 댓글을 남기실 분들은 혹시 모를 에러를 대비해 '게시' 버튼 클릭 전에 댓글을 복사해두세요.

다음 이전