K_blueprint
버튼, 체크박스, 콤보박스 만들기 본문
목 차
1. 텍스트 / 이미지 버튼 만들기
2. 선택형 입력 만들기
1. 텍스트 / 이미지 버튼 만들기
- HTML5에서 버튼은 '<input>' 태그 혹은, '<button>' 태그로 만들 수 있으며, type속성으로 버튼의 다양한 타입을 지정할 수 있다.
<input type="button|reset|submit|image" value = "버튼의 문자열">
<button type="button|reset|submit">버튼의 문자열</button>
- 위의 코드에서 확인할 수 있듯 5가지의 버튼 타입이 있고, 각 타입에 따른 예시 코드를 작성해 보자
● type = "button"
- 특별한 기능이 없는 '단순 버튼'으로 JS코드에서 사용된다.
<input type="button" value = "로그인">
<button type="button">로그인</button>
● type = "submit"
- 브라우저가 폼 데이터를 웹 서버로 전송할 수 있게 해주는 '제출 버튼'이다.
<input type="submit" value = "제출">
<button type="submit">제출</button>
● type = "reset"
- 폼에 입력된 내용을 모두 '초기화(지움)하는 버튼'이다.
<input type="reset" value = "초기화">
<button type="reset">초기화</button>
● type = "image"
- 이미지 버튼을 만들 수 있다.(즉, 이미지를 버튼으로 만들 수 있다.)
<input type="image" src="이미지_파일.png" alt = "이미지 버튼">
<button type="button"><img src = "이미지_파일.png" alt="이미지 버튼"></button>
2. 선택형 입력 만들기
- 선택형 입력이란, '체크박스', '라디오 버튼', '콤보박스'처럼 사용자에게 목록을 보여주고 주어진 목록에서 사용자가 내용을 선택하는 방식의 입력을 말한다.
● 체크박스
- 체크박스는 선택 혹은 해제 둘 중에 하나를 선택하는 폼 요소이다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>체크박스</title>
</head>
<body>
<h3>체크박스 만들기</h3>
<hr>
<form>
짜장면 <input type="checkbox" value="1">
짬뽕 <input type="checkbox" value="2" checked>
만두 <input type="checkbox" value="3">
</form>
</body>
</html>
- 해당 코드를 실행하게 되면 아래와 같은 브라우저가 출력되게 된다.
- 해당 체크박스는 복수 체크가 가능하며 코드에서 확인되는 것처럼 2번 항목에 'checked; 속성이 있기 때문에 브라우저에 출력될 때 먼저 체크가 되어 표시된다.
● 라디오 버튼
- 'name'속성 값이 동일한 라디오 버튼들이 하나의 그룹을 형성하고, 그중 하나만 선택되도록 하는 폼 요소이다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>라디오 버튼</title>
</head>
<body>
<h3>라디오 버튼 만들기</h3>
<hr>
<form>
<input type="radio" name = "china" value="1">짜장면<br>
<input type="radio" name = "china" value="2">짬뽕<br>
<input type="radio" name = "china" value="3">만두<br>
</form>
</body>
</html>
- 해당 코드를 실행하게 되면 아래와 같은 브라우저가 출력되게 된다.
- 해당 체크박스는 위에서 설명한 것과 유사하지만 다른 점은 '하나의 요소만 선택이 가능'하다는 것이다.
● 콤보박스
- 콤보박스는 사용자에게 '드롭다운 목록'을 보여주고 해당 값들 중 하나를 사용자로부터 입력받는 폼 요소이다.
- <select> 태그는 콤보박스 전체를 표현하며, <option> 태그는 항목 하나를 표현한다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>콤보박스</title>
</head>
<body>
<h3>콤보박스 만들기</h3>
<h2>오늘의 야식은?</h2>
<hr>
<form>
<select name="night meal">
<option value = "1">치킨</option>
<option value = "2">불닭볶음면</option>
<option value = "3">족발</option>
</select>
</form>
</body>
</html>
- 해당 코드를 실행하게 되면 아래와 같은 브라우저가 출력되게 된다.
+ <option> 태그에 'selected' 속성이 있으면 그 항목은 처음부터 선택 상태로 출력된다.
★ 본 게시글은 "HTML5+CSS3+Javascript 웹 프로그래밍"도서를 참고하여 작성되었습니다. ★
'HTML & CSS & Java script' 카테고리의 다른 글
| CSS3으로 웹 페이지 꾸미기 (4) | 2024.11.12 |
|---|---|
| HTML5로 여러가지 입력 만들기 (3) | 2024.11.11 |
| HTML5로 웹 폼 만들기 (7) | 2024.11.09 |
| HTML5의 문서 구조화 (10) | 2024.11.08 |
| 미디어(오디오, 비디오) 삽입하기 (4) | 2024.11.07 |
