HTML 기초, radio, button, submit, reset 속성들과 <select> 태그 (26번째)

HTML 기초, <input> 태그 type 속성값 : radio, button, submit, reset, <select> 태그

 

◎ 라디오 버튼을 위한 radio

 

라디오 버튼은 여러 가지 항목 중에서 하나를 선택해야 할 경우 사용합니다. HTML 문서에서 라디오 버튼을 구현하려면 type 속성에 "radio" 를 지정하고 다음처럼 표현하면됩니다.

 

예문)

 

<input type="radio" name="그룹명">

 

속성	속성 값	설명
type	radio	라디오 버튼을 만들려면 type 속성 값을 radio로 설정해야 됩니다.
name	문자열	name 속성을 동일하게 주면 라디오 버튼을 배타적으로 선택할 수 있습니다.
value	문자열	라디오 버튼에 출력되는 캡션 값입니다.
checked	X	<input> 태그에 checked를 기술하면 라디오 버튼이 처음부터 체크된 상태로 나타납니다.

 

라디오 버튼은 배타적 선택을 합니다. 배타적 선택이란? 나열된 항목들 중에서 선택할 수 있는 항목이 오로지 하나라는 의미.

그래서 다른 항목을 선택하면 그전에 선택했던 항목은 선택이 해제됩니다. 배타적 선택이 가능하게하려면 목적이 동일한 라디오 버튼들을 그룹으로 구성해야 됩니다. 그래야만 그룹 내의 라디오 버튼들 사이에만 배타적 선택이 적용됩니다.

목적이 동일한 라디오 버튼을 동일한 그룹으로 구성하려면 name 속성이 같아야 됩니다.

 

 

◎ 명령을 지시하는 버튼을 위한 button

 

사용자가 다양한 명령을 내릴 수 있도록 하는 입력양식이 버튼입니다. <input> 태그의 type 속성에 button을 지정하면 버튼을 만들 수 있습니다. <input> 태그의 type 속성에 "button"을 지정하면 우리가 가장 보편적으로 사용하는 버튼이 만들어 집니다.

 

 

◎ 전송버튼과 입력취소버튼을 위한 submit, reset

 

<input> 태그의 type 속성을 "submit" 로 지정하면 form 택의 action 속성에 지정한 페이지로 이동됩니다. 이때 입력한 모든 데이터의 내용이 이동하는 페이지로 전송됩니다.

리셋 버튼은 이전에 입력된 데이터를 모두 초기화하고 다시 입력받을 수 있도록 하는 버튼입니다.

 

 

 

◎ 콤보 박스와 리스트 박스를 위한 <select> 태그

 

콤보 박스와 리스트 박스는 여러 가지 항목 중에서 하나를 선택하기 위한 입력양식인데, 리스트 박스를 작성하기 위해서는 <select> 태그를 사용합니다. <option> 속성의 항목에 해당되는 내용을 기술합니다.

<select> 태그에 size 속성을 추가해 크기를 지정하면 리스트 박스가 나타나고 생략하거나 1을 지정하면 콤보 박스가 나타납니다.

 

태그	속성	속성 값	설명
<select>	name	문자열	텍스트 영역이 여러 개일 경우 name 속성에 특정 이름을 지정하면 어느 입력 양식에 입력된 데이터인지 구분할 수 있다.
	size	숫자	리스트 박스가 기본적으로 보여줄 목록의 개수를 지정합니다. size 속성 값을 지정하지 않으면 리스트 박스가 됩니다.
<option>	value	문자열	콤보 박스와 리스트 박스의 각 항목의 값을 지정합니다.