반응형
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/color.php">
<h1>색상</h1>
<select name="color">
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
</select>
<h1>색상2(다중선택)</h1>
<select name="color2" multiple>
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
</select>
<input type="submit">
</form>
</body>
</html>
<!-- select-option을 이용해서 선택창과 목록 구현이 가능합니다. -->
<!-- multiple 속성을 넣으면 다중 선택이 가능하다. --><html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<p>
<h1>색상</h1>
붉은색<input type="radio" name="color" value="red">
검은색<input type="radio" name="color" value="black" checked>
파란색<input type="radio" name="color" value="blue">
</p>
<p>
<h1>사이즈 였넹?(다중선택)</h1>
분홍색<input type="checkbox" name="color2" value="pinck">
하늘색<input type="checkbox" name="color2" value="sky" checked>
노란색<input type="checkbox" name="color2" value="yellow" checked>
</p>
<input type="submit">
</form>
</body>
</html>
<!-- 같은 이름으로 묶어줘야 라디오 버튼이 그룹으로 묶여서 정상 동작함-->
<!-- type이 radio냐 checkbox냐에 따라 선택버튼이 달라짐 -->
<!-- checked를 이용하면 기본 선택을 설정할 수 있다.-->반응형
'WEB > HTML' 카테고리의 다른 글
| 데이터 전송 - hidden (0) | 2024.02.06 |
|---|---|
| 버튼 (0) | 2024.02.05 |
| 텍스트 입력 (0) | 2024.02.05 |
| 입력양식 - form (0) | 2024.02.05 |
| 표 - table (0) | 2024.02.05 |