HTML / Reference / input type="radio"
개요
- radio(라디오 버튼)는 사용자가 여러 개의 옵션 중 하나만 선택할 수 있게 하는 폼 요소입니다.
- input 태그의 type="radio" 속성을 사용하여 라디오 버튼을 생성합니다.
문법
<input type="radio" name="xxx" value="yyy" checked>
- name : name의 값이 같은 것 중에서 하나를 선택합니다.
- value : 선택했을 때 전달될 값입니다.
- checked : 선택된 상태로 만듭니다.
예제 1
- Apple 또는 Banana 중 하나만 선택합니다.
- 아무것도 선택되지 않은 상태에서 시작합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
* {
font-size: 16px;
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<form method="get" action="form-action.html">
<p>Fruit</p>
<label><input type="radio" name="fruit" value="apple"> Apple</label>
<label><input type="radio" name="fruit" value="banana"> Banana</label>
<p><input type="submit" value="Submit"> <input type="reset" value="Reset"></p>
</form>
</body>
</html>
- Apple을 선택하고 Submit 버튼을 클릭하면, fruit의 값이 apple로 전송됩니다.
예제 2
- Apple 또는 Banana에서 하나, Soccer 또는 Baseball에서 하나를 선택합니다.
- 아무것도 선택되지 않은 상태에서 시작합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
* {
font-size: 16px;
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<form method="get" action="form-action.html">
<p>Fruit</p>
<label><input type="radio" name="fruit" value="apple"> Apple</label>
<label><input type="radio" name="fruit" value="banana"> Banana</label>
<p>Sport</p>
<label><input type="radio" name="sport" value="soccer"> Soccer</label>
<label><input type="radio" name="sport" value="baseball"> Baseball</label>
<p><input type="submit" value="Submit"> <input type="reset" value="Reset"></p>
</form>
</body>
</html>
- Apple과 Baseball을 선택하고 Submit 버튼을 클릭하면 fruit의 값으로 apple, sport의 값으로 banana를 전송합니다.
예제 3
- checked를 추가하면, 그 값이 선택된 상태로 시작합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
* {
font-size: 16px;
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<form method="get" action="form-action.html">
<p>Fruit</p>
<label><input type="radio" name="fruit" value="apple"> Apple</label>
<label><input type="radio" name="fruit" value="banana" checked> Banana</label>
<p><input type="submit" value="Submit"> <input type="reset" value="Reset"></p>
</form>
</body>
</html>
초기화
라디오 버튼은 체크박스와는 달리 선택을 해제할 수 없습니다. 따라서 초기화 버튼을 만들어두는 것이 좋습니다.
<input type="reset" value="Reset">
noscript 태그는 HTML 문서에서 JavaScript가 비활성화되어 있을 때 표시할 콘텐츠를 지정하는 데 사용됩니다. 사용자의 브라우저가 JavaScript를 지원하지 않거나, JavaScript가 비활성화되어 있는 경우에만 이 태그 내의 콘텐츠가 렌더링됩니다.
abbr은 약자(abbreviation)임을 나타냅니다. title 속성에 약자의 뜻을 넣으면, 마우스를 약자 위에 올렸을 때 그 뜻이 툴팁으로 나옵니다.
del과 ins 태그는 HTML에서 텍스트의 수정 이력을 표현하는 데 사용됩니다. del은 텍스트를 삭제했음을 나타냅니다. 취소선이 있는 게 기본 모양입니다. ins는 새로 추가되었음을 나타냅니다. 밑줄이 있는 게 기본 모양입니다.
HTML / Reference / input type="number"
type이 number인 input은 숫자를 입력받는 양식입니다. 숫자 이외의 값을 입력하면 경고 메시지를 출력합니다. 숫자 범위, 값의 증감 단위 등을 설정할 수 있는 다양한 속성을 제공합니다. 이 입력 필드는 나이, 수량, 가격 등의 숫자 데이터를 입력받을 때 유용합니다.
pre 태그는 HTML에서 "preformatted text"를 정의하는 데 사용됩니다. 이 태그는 HTML 문서에서 텍스트를 작성한 그대로 표시하도록 하여, 공백과 줄바꿈을 유지하는 특징이 있습니다. 일반적으로 코드 블록, ASCII 아트, 또는 공백과 줄바꿈을 유지해야 하는 텍스트를 표시할 때 사용됩니다.
HTML / Reference / input type="date"
type이 date인 input은 날짜를 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다.
textarea는 여러 줄의 긴 문장을 입력할 수 있는 양식입니다. col 속성으로 가로 크기를, row 속성으로 세로 크기를 정할 수 있습니다. 하지만, 크기 등 모양은 CSS의 width, height로 정하는 게 좋습니다.
HTML / Reference / input type="radio"
radio(라디오 버튼)는 사용자가 여러 개의 옵션 중 하나만 선택할 수 있게 하는 폼 요소입니다. input 태그의 type="radio" 속성을 사용하여 라디오 버튼을 생성합니다.
HTML / Reference / figure, figcaption
figure는 사진, 이미지, 다이어그램 등을 감싸는 테그입니다. figcaption은 figure 요소에 캡션을 만듭니다. figure 요소의 자식 요소이며, 제일 처음 또는 제일 마지막에 위치합니다.
HTML / Reference / input type="hidden"
양식은 보통 사용자가 입력한 값을 활용하기 위해 사용합니다. 하지만, 사용자가 접속한 IP 등 사용자가 입력하지 않아도 필요한 값이 있을 수 있습니다. 이러한 값들은 type이 hidden인 input 태그로 만들어서 넘깁니다.