[HTML] form (2)

 

select, optgroup, option

다양한 데이터들을 나열해서 보여주는 태그입니다.

드롭다운 메뉴를 들어보셨다면, 그것과 동일하다는 점을 알 수 있을 것입니다. 사용자가 직접 입력하는 게 아니고, 제공된 여러 옵션 중에서 선택하는 것입니다.

간단히 예시를 보겠습니다. 자신있는 프로그래밍 언어를 고르는 화면입니다. 그 중에서 MySQL을 골랐습니다. 

 

이렇게 select 태그와 option 태그를 조합해서 간단한 드롭다운 목록을 만들 수 있습니다. 코드를 살펴보겠습니다.

<form>
    <h3>자신있는 언어</h3>
    <select name="language" id="programLanguage" size="3" multiple>
        <option value="java">자바</option>
        <option value="c">C언어</option>
        <option value="c++">C++</option>
        <option value="mysql" selected>MySQL</option>
        <option value="oracle">오라클</option>
        <option value="javascript">자바스크립트</option>
        <option value="python">파이썬</option>
    </select>
</form>

select 태그는 드롭다운의 시작과 끝을 표시하는 태그이며, option 태그는 드롭다운의 항목을 만들어줍니다. 이 select가 아주 큰 틀을 만들어주고 그 내부를 option이 채운다고 보면 됩니다.

드롭다운 목록에서 특정한 항목을 선택하고 submit하면, 선택 항목의 value 속성 값이 전송되고, 키는 select로 설정된 name 속성 값이 세팅됩니다.

 

코드를 보면에서를 예로 들어보겠습니다.  아래 코드에서 MySQL을 기본값으로 설정되게 selected라는 속성을 추가했습니다. 또한 전송이 된다면, name인 language가 키(key)로, mysql이 값(value)으로 하나의 쌍으로 전송되겠죠?

<select name="language" id="programLanguage" size="3" multiple>
    <option value="mysql" selected>MySQL</option>

...
</select>

이 값들은 optgroup 태그를 통해 하나의 그룹으로 묶어서 드롭다운 항목을 새롭게 구성할 수 있습니다.

 

Textarea

여러 줄 텍스트를 입력할 수 있는 태그입니다. 한 줄 텍스트라면 그냥 text 태그를 이요하면 되지만, 두 줄 이상이라면 이걸 써야죠. textarea로 입력된 글은 DB에서도 그대로 저장되므로 엔터값이나 공백도 같이 저장됩니다. DB에서 조회해온 데이터 내용을 다시 표출할 때는 입력한 대로 표출됩니다. (동의서 내용 등이 포함됩니다.)

 

textarea는 세가지 속성을 갖습니다.

1. cols는 textarea 영역의 가로 길이를 지정하는데, 문자 크기(px)를 단위로 지정합니다.

2. rows는 세로 길이를 지정하되 줄(row)의 수로 정할 수 있습니다.

3. resize는 css 속성으로 style 옵션에 작성합니다. 크기를 조절하는 옵션이 있지만 이를 제외하거나 특정 방향으로만 설정하려면 이를 사용합니다.(none: 크기 고정, both: 가로+세로 크기 조절, horizontal 가로 크기 조절, vertical 세로 크기 조절)

위 resize 옵션을 적용하면, 아래 그림처럼 간단하게 조절이 가능한 삼각형 버튼 같은 것이 있고 거기에 마우스 커서를 올리면 드래그해서 조정이 가능해집니다.

 

Button

말 그대로 버튼을 만들어 줍니다. input에서 type="submit", type="button" 과 동일하게 설정하면 됩니다.

button 태그에 설정 가능한 type 세가지가 있습니다.

1. submit : 폼을 요청한 주소로 전송합니다. 기본값입니다.

2. reset : 폼을 초기화하는 버튼을 만듭니다.

3. button : 아무 것도 안하는 껍데기 버튼을 만듭니다. 차후 JS로 기능을 만들어서 연결합니다.

<!-- 버튼 생성시 기본 타입이 submit 기본적으로 텍스트로 작성함.-->
<button>로그인</button>
<!-- 아무 기능 없는 버튼을 만들때는 type="button"으로 지정 -->
<button type="button" onclick="alert('버튼클릭됨')">버튼</button> <!--이벤트 매핑-->
<!-- 폼 초기화 버튼 -->
<button type="reset">다시작성</button>

 

여기서 button 태그는 이미지를 넣을 수 있습니다. 다만 버튼에 테두리가 생겨서 보기 싫습니다.

 <button>
    <img src="login.jpg" alt="로그인버튼" width="100%" height="100%">
</button>

버튼에 있는 이미지만 남기려면 버튼이 갖는 모든 여백을 0으로 해서 제거하면 됩니다.

<!-- button 태그내 이미지만 남기고 싶다면, 버튼이 갖는 모든 여백을 없앤다. Reset css를 활용. -->
<button style="margin: 0; padding: 0; border: 0;">
    <img src="login.jpg" alt="로그인버튼" width="100%" height="100%">
</button>