HTML 폼(form)요소(2) (select, button, textarea, label, fieldset,legend)

폼요소에서 Input 태그 말고 다른 태그들을 살펴보자.

 

- select 태그

select 를 사용하면 여러 개의 선택지에서 선택하는 메뉴를 만들 수 있다. option 태그로 항목을 만들고 선택지를 지정한다.

 

Example)

어떤책을 샀습니까?<br>

<select name="pickbook">

<option value="1">HTML</option>

<option value="2">Python</option>

<option value="3">CSS</option>

<option value="4">Java</option>

</select>

 

다음과 같은 결과를 얻을 수 있다.

 

어떤 책을 샀습니까?

HTML Python Java CSS

 

- button 태그

button 을 추가할때는 button 태그를 이용할 수 있다. input type='button' 으로 해도 된다.

다만, button type 속성값이 존재하는데  그중에서 submit, reset, button 세개가 주로쓰는 button type 속성값이다.  

button ,input 으로 작성을 하게 되면 type 따르면 submit으로 설정이 된다. 그런데 input 태그에 다른 type속성을 넣고 싶으면 더 세세하게 작성해야하고 상대적으로 button 태그로 간단해서 반드시 input 태그를 써야 하는 건 아니라면쓰는 걸 추천한다.

 

Example)

<button type="submit">보내기</button>

<button type="reset">지우기</button>

<button type="button">버튼</button>

 

 

- textarea 태그

textarea 태그를 쓰면 여러 줄의 텍스트를 입력할 수 있는 란을 만들어 준다.

 

Example)

<textarea cols="20" rows="20">

입력하세요.

</textarea>

 

cols 은 한줄당 문자수, rows 속성은 줄의 수 지정.

 

입력하세요.

 

-label 태그

폼의 입력 부분에 제목을 붙인다. 보통, 제목을 붙일 수 없는 태그에 사용한다

Example)

<label for="name">이름</label>

<input type="text" id="name">

 

 

for 와 id 는 따로 설명할 예정.

 

 

- fieldset 태그 및 legend 태그

fieldset 은 폼을 구성하는 부품을 그룹화한다. legend 태그는 fiedlset 태그로 작성된 그룹에 제목을 붙이는 기능을 담당한다. 쉽게 말해, 구분이 가능하게 만들어준다.

 

Example)

<fieldset>

<legend>명함</legend>

<label for="name">이름</label>

<input type="text" id ="name"><br>

<label for='adress'>주소</label>

<input type="text" id="adress">

</fieldset>