<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>입력양식태그</title>
</head>
<body>
<!-- label 태그는 input 태그를 설명하며, 항목이나 파일을 식별하기 위해 사용하는 제목이나 이름을 말한다. -->
<form action="jsp/writeprocess.jsp" method="post">
<table>
<tr>
<td><label for="username">이름</label></td>
<td><input id="username" type="text" name="username"></td>
</tr>
<tr>
<td>성별</td>
<td>
<input id="man" type="radio" name="gender" value="m">
<label for="man">남자</label>
<input id="woman" type="radio" name="gender" value="w">
<label for="woman">여자</label>
</td>
</tr>
<tr>
<td>좋아하는 음식</td>
<td>
<select name="food">
<option value="김밥" selected>김밥</option>
<option value="떡복이">떡복이</option>
<option value="순대">순대</option>
<option value="어묵">어묵</option>
</select>
</td>
</tr>
<tr>
<td>좋아하는 음식</td>
<td>
<select name="food" multiple><!-- 항목 중 여러 개를 선택 -->
<option value="김밥" selected>김밥</option>
<option value="떡복이">떡복이</option>
<option value="순대">순대</option>
<option value="어묵">어묵</option>
</select>
</td>
</tr>
<tr>
<td>교육 내용</td>
<td>
<label for="프론트엔드">프론트엔드</label>
<select id="프론트엔드" name="front-edu">
<!-- 선택하는 항목이 많을 경우에 사용자가 선택하기 편하도록 선택 항목을 구분한다. -->
<optgroup label="기본">
<option value="HTML5" selected>HTML5</option>
<option value="CSS3">CSS3</option>
<option value="JS">JavaScript and jQuery</option>
</optgroup>
<optgroup label="고급">
<option value="Ajax">Ajax</option>
<option value="node">node.js</option>
<option value="react">React.js</option>
</optgroup>
</select>
<!-- 백엔드: 자바, 데이터베이스, SQL, JSP(자바 웹 프로그래밍), Spring framework(스프링) -->
<label for="백엔드">백엔드</label>
<select id="백엔드" name="back-edu">
<optgroup label="기본">
<option value="java" selected>자바</option>
<option value="db">데이터베이스</option>
<option value="sql">SQL</option>
</optgroup>
<optgroup label="고급">
<option value="jsp">JSP</option>
<option value="spring">spring</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td><input type="submit" value="전송"></td>
<td><input type="reset" value="초기화"> <input type="button" value="버튼"></td>
</tr>
</table>
</form>
</body>
</html>
결과물
'Html' 카테고리의 다른 글
| html (0) | 2022.10.04 |
|---|---|
| 10.HTML5에서 추가한 입력 양식 태그 (0) | 2022.09.23 |
| 0.0 VS Code 설정 (0) | 2022.09.21 |
| 08. 입력양식태그 (0) | 2022.09.20 |
| 07. 공간분할태그 (0) | 2022.09.20 |