form, checkbox, radio, select

form에서 데이터를 넘기는 방식

 

1)get방식

form에서 데이터를 넘기는 방식

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="html01_h.html" method="get">
		<table border = "">
			<tr>
				<td>아이디</td> 
				<td><input type="text" name="id" size="20">
				</td>
			</tr>
			<tr>
				<td>비밀번호</td> 
				<td><input type="text" name="pwd" size="20">
				</td>
			</tr>
			<tr>
			<td colspan="2" align="center">
			<input type="button" value="목록">
			<input type="submit" value="전송">
			<input type="reset" value="취소">
			</td>
			</tr>
		</table>
	</form>

</body>
</html>

 

url?id=xxxx&pwd=xxxx

submit을 클릭하면 action의 위치로 이동하면서 input태그의 값을 가지고 이동


2)post방식

주소의 끝에 값을 달고 가지 않고 페이지 내부에 포함해서 가져가는 방식

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="html01_h.html" method="post">
		<table border = "">
			<tr>
				<td>아이디</td> 
				<td><input type="text" name="id" size="20">
				</td>
			</tr>
			<tr>
				<td>비밀번호</td> 
				<td><input type="text" name="pwd" size="20">
				</td>
			</tr>
			<tr>
			<td colspan="2" align="center">
			<input type="button" value="목록">
			<input type="submit" value="전송">
			<input type="reset" value="취소">
			</td>
			</tr>
		</table>
	</form>

</body>
</html>

 


checkbox, radio버튼

radio는 하나만 선택 checkbox는 여러개 선택

<body>
	<form action="html01_h.html" method="get">
		<table border = "">
			<tr>
				<td>성별</td> 
				<td>
					<input type="radio" name="gender" value="man"> 남자
					<input type="radio" name="gender" value="woman"> 여자
				</td>
			</tr>
			<tr>
				<td>취미</td> 
				<td>
					<input type="checkbox" name="hobby" value="climing"> 등산
					<input type="checkbox" name="hobby" value="traveling"> 여행
					<input type="checkbox" name="hobby" value="fishing"> 낚시
				</td>
			</tr>
			<tr>
			<td colspan="2" align="center">
			<input type="button" value="목록">
			<input type="submit" value="전송">
			<input type="reset" value="취소">
			</td>
			</tr>
		</table>
	</form>
</body>


select

<select name="os" size="3" multiple>

 

<select name="os">


optgroup

<body>
	<select>
		<optgroup label="html5">
			<option>html</option>
			<option>css</option>
			<option>javascript</option>
		</optgroup>
		<optgroup label="웹표준">
			<option>구조</option>
			<option>표현</option>
			<option>동작</option>
		</optgroup>
	</select>
</body>