html로 체크박스, 라디오버튼, 드롭다운 리스트 만드는 법!
체크박스 checkbox
<!DOCTYPE html>
<html>
<head>
<title> 체크 박스 만들기 </title>
</head>
<body>
<h2> 여러분이 가지고 있는 부품을 모두 고르세요</h2>
<input type="checkbox" name="computer" value="cpu"checked>CPU<br>
<input type="checkbox" name="computer" value="Memory"checked>메모리<br>
<input type="checkbox" name="computer" value="HDD">하드디스크<br>
<input type="checkbox" name="computer" value="CDROM">CD-ROM 드라이브<br>
<input type="checkbox" name="computer" value="DVDROM">DVD-ROM 드라이브<br>
<input type="checkbox" name="computer" value="CDRWDVD">CD-RW/DVD 콤보 드라이브<br>
<input type="checkbox" name="computer" value="DVDMulti">DVD multi 드라이브<br>
<input type="checkbox" name="computer" value="Keyboard">키보드<br>
<input type="checkbox" name="computer" value="Mouse">마우스<br>
</body>
</html>여러분이 가지고 있는 부품을 모두 고르세요
CPU메모리
하드디스크
CD-ROM 드라이브
DVD-ROM 드라이브
CD-RW/DVD 콤보 드라이브
DVD multi 드라이브
키보드
마우스
radio (checked 속성 이용)
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2> 1.여러분이 사용하는 CPU는 무엇인가요?</h2>
<input type="radio" name="cpu" value="코어2듀오"checked>코어2듀오<br>
<input type="radio" name="cpu" value="코어듀오">코어듀오<br>
<input type="radio" name="cpu" value="펜티엄 4">펜티엄 4<br>
<input type="radio" name="cpu" value="펜티엄 3">펜티엄 3<br>
<h2> 2.메모리는 얼마나 사용하세요?</h2>
<input type="radio" name="memory" value="2048">2GB<br>
<input type="radio" name="memory" value="1024"checked>1GB<br>
<input type="radio" name="memory" value="512">512MB<br>
<input type="radio" name="memory" value="256">256MB<br>
</body>
</html>1.여러분이 사용하는 CPU는 무엇인가요?
코어2듀오코어듀오
펜티엄 4
펜티엄 3
2.메모리는 얼마나 사용하세요?
2GB1GB
512MB
256MB
dropdownlist 드롭다운리스트
<!DOCTYPE html>
<html>
<head>
<title>Dropdown list and listbox</title>
</head>
<body>
<table>
<tr>
<td colspan="2">
<h2> 가장 재미있는 것을 선택해 주세요.</h2>
</td>
</tr>
<tr>
<td valign="top">
<select name="items1">
<option value="HTML">HTML</option>
<option value="Javascript">Javascript</option>
<option value="CSS">CSS</option>
</select>
</td>
<td valign="top">
<select name="items2">
<option value="JAVA">JAVA</option>
<option value="Python">Python</option>
<option value="Swift">Swift</option>
</select>
</td>
</tr>
</table>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
가장 재미있는 것을 선택해 주세요. |
|
This is a Heading
This is a paragraph.
728x90
'WORKS > Html CSS' 카테고리의 다른 글
| [HTML] input 태그: text, password / textarea 태그 / submit , reset button (0) | 2022.02.24 |
|---|---|
| [HTML] 이미지 하이퍼링크 / a 태그 (0) | 2022.02.24 |
| [HTML] 문서에 줄긋기 hr 태그 / p 태그 문단 나누기 / pre 태그 내가 쓴 그대로 (0) | 2022.02.24 |
| [HTML] html 태그 01: 들여쓰기: 공백문자 / blockquote 자동 들여쓰기 (0) | 2022.02.13 |
댓글