WEB(Front-End)/HTML
연습예제 - body 태그안에 쓰이는 태그5 (Form 요소)
RoarinGom
2021. 3. 4. 19:37
예제1
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="ex1.css">
</head>
<body>
<form action="" method="get">
<table border="1" cellspacing=0 cellpadding=0>
<tr>
<td>
<label for="bookName">도서명</label>
</td>
<td>
<input type="text" id="bookName" value="웹 2.0을 이끄는 방탄웹">
</td>
</tr>
<tr>
<td>
<label for="publisher">출판사명</label>
</td>
<td>
<input type="text" id="publisher" value="Manning">
</td>
</tr>
<tr>
<td>
<label for="publishYear">발행년도</label>
</td>
<td>
<select name="" id="publishYear" style="margin-right:50px;">
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
</select>
<label for="authorPw" class="authorPw">저자암호</label>
<input type="password" name="authorPw" id="authorPw">
</td>
</tr>
<tr>
<td>
<label for="bookImage">도서이미지</label>
</td>
<td>
<input type="file" name="bookImage" id="bookImage" id="" width="200">
</td>
</tr>
<tr>
<td>
<label for="relatedSearchTerm">관련검색어</label>
</td>
<td>
<input type="checkbox" name="relatedSearchTerm" id="relatedSearchTerm" value="웹표준">웹표준
<input type="checkbox" name="relatedSearchTerm" id="relatedSearchTerm" value="에이작스">에이작스
<input type="checkbox" name="relatedSearchTerm" id="relatedSearchTerm" value="자바스크립트">자바스크립트
<input type="checkbox" name="relatedSearchTerm" id="relatedSearchTerm" value="HTML">HTML
<input type="checkbox" name="relatedSearchTerm" id="relatedSearchTerm" value="MySql">MySql
</td>
</tr>
<tr>
<td>
<label for="">보관도서</label>
</td>
<td>
<input type="radio" name="storedLibrary" id="" value="도서관1">도서관1</input>
<input type="radio" name="storedLibrary" id="" value="도서관2">도서관2</input>
<input type="radio" name="storedLibrary" id="" value="도서관3">도서관3</input>
<input type="radio" name="storedLibrary" id="" value="도서관4">도서관4</input>
<input type="radio" name="storedLibrary" id="" value="도서관5">도서관5</input>
</td>
</tr>
<tr>
<td>
<label for="relatedTitle">관련제목</label>
</td>
<td>
<select name="relatedTitle" id="relatedTitle" multiple="multiple" size="4">
<option value="component1">component1</option>
<option value="component2">component2</option>
<option value="component3">component3</option>
<option value="component4">component4</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="explanation">설명</label>
</td>
<td>
<textarea name="explanation" id="explanation" cols="30" rows="10" ></textarea>
</td>
</tr>
</table>
</form>
</body>
</html>예제2. optgroup 사용 한번 보기
