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">
blockquote는 인용임을 나타내는 태그입니다. 인용의 출처는 cite 속성으로 나타냅니다. cite 속성 입력은 선택 사항이고, 웹브라우저에서는 보이지 않습니다. blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다.
progress는 HTML5에서 제공하는 태그로, 작업의 진행 상태를 나타내기 위해 사용됩니다. 주로 파일 업로드, 다운로드, 로딩 진행 상황 등을 시각적으로 보여줄 때 유용합니다. progress 태그는 기본적으로 게이지 형태로 표시되며, 사용자가 커스텀 스타일을 적용할 수도 있습니다.
noscript 태그는 HTML 문서에서 JavaScript가 비활성화되어 있을 때 표시할 콘텐츠를 지정하는 데 사용됩니다. 사용자의 브라우저가 JavaScript를 지원하지 않거나, JavaScript가 비활성화되어 있는 경우에만 이 태그 내의 콘텐츠가 렌더링됩니다.
HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식합니다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현됩니다. 만약 블록 요소 안에서 줄바꿈을 하고 싶다면 br 태그를 이용합니다.
HTML / Reference / input type="radio"
radio(라디오 버튼)는 사용자가 여러 개의 옵션 중 하나만 선택할 수 있게 하는 폼 요소입니다. input 태그의 type="radio" 속성을 사용하여 라디오 버튼을 생성합니다.
em 태그는 주로 말투나 감정적인 강조 또는 문장의 맥락에서 중요한 부분을 나타낼 때 사용합니다. strong 태그는 중요성, 경고 또는 텍스트에서 매우 중요한 정보를 나타낼 때 사용됩니다.
pre 태그는 HTML에서 "preformatted text"를 정의하는 데 사용됩니다. 이 태그는 HTML 문서에서 텍스트를 작성한 그대로 표시하도록 하여, 공백과 줄바꿈을 유지하는 특징이 있습니다. 일반적으로 코드 블록, ASCII 아트, 또는 공백과 줄바꿈을 유지해야 하는 텍스트를 표시할 때 사용됩니다.
HTML / Reference / input type="date"
type이 date인 input은 날짜를 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다.
textarea는 여러 줄의 긴 문장을 입력할 수 있는 양식입니다. col 속성으로 가로 크기를, row 속성으로 세로 크기를 정할 수 있습니다. 하지만, 크기 등 모양은 CSS의 width, height로 정하는 게 좋습니다.
del과 ins 태그는 HTML에서 텍스트의 수정 이력을 표현하는 데 사용됩니다. del은 텍스트를 삭제했음을 나타냅니다. 취소선이 있는 게 기본 모양입니다. ins는 새로 추가되었음을 나타냅니다. 밑줄이 있는 게 기본 모양입니다.