3.1 <input type="button"> 엘리먼트
<input type="button"> 엘리먼트는 기본 동작이 없는 버튼을 생성할 때 사용돼.
submit 이나 reset 버튼처럼 클릭 시 특정 동작을 수행하지 않지만, 보통 JavaScript와 함께 사용해서 특정 작업을 수행할 수 있어.
사용 예시:
<input type="button" value="Click Me" onclick="alert('Button clicked!')">
주요 속성:
1. value 속성: 버튼에 표시할 텍스트를 설정해.
<input type="button" value="Click Me">
2. onclick 속성: 버튼 클릭 시 실행할 JavaScript 함수를 정의해.
<input type="button" value="Click Me" onclick="myFunction()">
function myFunction() {
alert('Button clicked!');
}
사용 예시:
JavaScript 함수 호출:
<input type="button" value="Show Alert" onclick="showAlert()">
function showAlert() {
alert('This is an alert!');
}
엘리먼트 스타일 변경:
<input type="button" value="Change Color" onclick="changeColor()">
<p id="text">이것은 단락이야.</p>
function changeColor() {
document.getElementById('text').style.color = 'blue';
}
3.2 <input type="checkbox"> 엘리먼트
<input type="checkbox"> 엘리먼트는 체크박스를 만들 때 사용돼.
사용자들이 여러 선택지 중에서 하나 혹은 여러 개를 선택할 수 있게 해주지. 체크박스는 켜지거나 꺼질 수 있어.
사용 예시:
<label for="subscribe">뉴스레터 구독:</label>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
주요 속성:
1. name 속성: 서버로 전송될 때 폼 요소의 이름을 설정해.
<input type="checkbox" name="subscribe">
2. value 속성: 체크박스가 선택되었을 때 서버로 전송될 값을 설정해.
<input type="checkbox" name="subscribe" value="yes">
3. checked 속성: 체크박스가 기본적으로 선택된 상태인지 여부를 결정해.
<input type="checkbox" name="subscribe" value="yes" checked>
사용 예시:
여러 개의 체크박스:
<p>관심사를 선택하세요:</p>
<input type="checkbox" name="interest" value="sports">스포츠<br>
<input type="checkbox" name="interest" value="music">음악<br>
<input type="checkbox" name="interest" value="movies">영화<br>
기본적으로 선택된 체크박스:
<input type="checkbox" name="terms" value="agree" checked> 약관에 동의합니다
3.3 <input type="radio"> 엘리먼트
라디오 버튼 선택 필드 (type="radio")
<input type="radio"> 엘리먼트는 라디오 버튼을 만드는 데 사용돼.
사용자들이 그룹에서 하나의 옵션만 선택할 수 있도록 해주지. 라디오 버튼은 동일한 name 속성값으로 그룹화돼.
사용 예시:
<p>성별을 선택하세요:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">남성</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">여성</label><br>
주요 속성:
name 속성: 라디오 버튼 그룹의 이름을 설정해. 동일한 name 값을 가진 모든 라디오 버튼이 하나의 그룹으로 묶여, 사용자들이 그 중 하나만 선택할 수 있게 돼.
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
value 속성: 라디오 버튼이 선택된 경우 서버로 전송될 값을 설정해.
<input type="radio" name="gender" value="male">
checked 속성: 라디오 버튼이 기본적으로 선택된 상태인지 여부를 결정해.
<input type="radio" name="gender" value="male" checked>
사용 예시:
하나의 옵션만 선택 가능한 라디오 버튼 그룹:
<p>색상을 선택하세요:</p>
<input type="radio" name="color" value="red">빨간색<br>
<input type="radio" name="color" value="green">초록색<br>
<input type="radio" name="color" value="blue">파란색<br>
기본적으로 선택된 라디오 버튼:
<input type="radio" name="subscription" value="monthly" checked>월간<br>
<input type="radio" name="subscription" value="yearly">연간<br>
GO TO FULL VERSION