<폼>
폼 태그 : <form></form>
<form antion="test.jsp"></form>
-<form antion="test.jsp" method="get/post">
폼컨트롤
</form>
-폼컨트롤 의 종류
• 텍스트 입력
• 패스워드 입력
• 텍스트 영역(여러줄)
• 라디오버튼
• 체크박스
• 드롭다운 박스
• 전송 버튼
• 이미지 버튼
• 파일 올리기
<body>
<h2>폼컨트롤 종류</h2>
<form action="server.html" method="get">
<p>
<labe>이름:</labe> <input type="text" name="" id="">
</p>
이름창에 뭘 치면
주소보면 서버 에이치티엠엘로 넘어감.
-
<labe>이름:</labe> <input type="text" name="username" id="">
-> 텍스트 컨트롤에 [aaaa] 입력하면 텍스트 컨트롤name="username"
-예시 하나더
<labe>아이디:</labe> <input type="text" name="userid" id="">
<비밀번호>
<label>비밀번호:</label>
<input type="password">
<로그인 버튼>
<input type="submit" value="로그인">
<가입인사 버튼>
<p><label for="">가입인사</label>
<textarea name="greet" id="" cols="30" rows="10"></textarea>
</p>
<둘중 하나 선택버튼>
<label for="">국내인or외국인</label>
<input type="radio" name="country" id="">국내인
<input type="radio" name="country" id="">외국인
여기서 name"" 이걸 같은걸 적어줘야 체크박스 한개만 선택할 수 있음!
만약 name 을 안 적는다면?
->
이렇게 돼버린다.
-선택박스에 밸류 넣기
<label for="">국내인or외국인</label>
<input type="radio" name="country" id="" value="a">국내인
<input type="radio" name="country" id="" value="b">외국인
<input type="radio" name="country" id="" value="c">외계인
->
사이트에 변화는 없음.
<체크박스 만들기>
<input type="checkbox" name="hobby" id="" value="mountan">등산
<input type="checkbox" name="hobby" id="" value="swim">수영
<input type="checkbox" name="hobby" id="" value="dance">댄스
<쭈루루 뜨는 선택창 만들기(셀렉트박스) >
<label for="">생년월일</label>
<select name="" id="">
<option value="">1991년</option>
<option value="">1992년</option>
<option value="">1993년</option>
<option value="">1994년</option>
<option value="">1995년</option>
</select>
<label for="">생년월일</label>
<select name="" id="">
<option value="">1991</option>
<option value="">1992</option>
<option value="">1993</option>
<option value="">1994</option>
<option value="">1995</option>
</select>년
<선택 달력 넣가>
<input type="date" name="" id="">
<select name="bmonth" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
</select>
<사진첨부 (파일선택) >
<label for="">사진첨부(method)</label>
<input type="file">
<보이지 않는 정보>
<input type="hidden" name="" value="no_dup">
<온 오프 버튼 (토글) <- 내가 만든거다! 밤낮 바꾸기 테마 ㅋㅋ>
온오프버튼(토글버튼)-diy
<맨 밑에 전송버튼, 다시작성, 취소 , 사진 버튼 만들기>
<input type="submit" name="" id="" value="가입전송">
<input type="reset" name="" id="" value="다시작성">
<input type="button" name="" id="" value="취소" onclick="alert('취소')">
<input type="image" src="images/까마귀.gif">
//참고//
1.
<input type="button" name="" id="" value="취소" onclick="alert('취소')">
여기서 벨류,,온클릭 취소 설명 : 버튼을 누르면 알림창에 취소 라고 써있는 창이 나온다
2.
<p><label for="">가입인사</label>
<textarea name="greet" id="" cols="30" rows="10">안녕하세요 가입인사를 넣어주세요</textarea>
리셋 눌러도 가입인사에 이렇게 내가 써넣은 거는 삭제 안된다.
3. 사진 주고받는 페이지로 하려면
<h2>폼컨트롤 종류-로그인페이지</h2>
<form action="server.html" method="post">
요거 메소드를 get 이 아니라 post 로 해야함.
오늘 과제
<!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>과제5-할 수 있는 사람만 업로드</title>
<style>
table{
width: 100%;
}
table td {
background-size: auto;
}
input {
border: 0;
}
textarea{
border: 0;
}
</style>
</head>
<body>
<h2>도서관 검색페이지</h2>
<table border="1" width="300">
<tr>
<td>도서명</td>
<td colspan="7"> <label></label> <input type="text" name="userid" id=""></td>
</tr>
<tr>
<td>출판사명</td>
<td colspan="7"> <label></label> <input type="text" name="userid" id=""></td>
</tr>
<tr>
<td>발행연도</td>
<td colspan="3"><label for=""></label>
<select name="byear" id="">
<option value="">1991</option>
<option value="">1992</option>
<option value="">1993</option>
<option value="">1994</option>
<option value="">1995</option>
</select>년</td>
<td>저자 암호</td>
<td colspan="3"><label></label> <label></label>
<input type="password" name="pw"></td>
</tr>
<tr>
<td>도서이미지</td>
<td colspan="7"><label for="">사진첨부(method)</label>
<input type="file"> </td>
</tr>
<tr>
<td>관련검색단어</td>
<td colspan="7"><input type="checkbox" name="hobby" id="" value="mountan">웹표준
<input type="checkbox" name="hobby" id="" value="swim">에이작스
<input type="checkbox" name="hobby" id="" value="dance">자바스크립트
<input type="checkbox" name="hobby" id="" value="dance">HTML
<input type="checkbox" name="hobby" id="" value="dance">MySQL
</td>
</tr>
<tr>
<td>보관도서관</td>
<td colspan="7"><input type="checkbox" name="hobby" id="" value="mountan">도서관1
<input type="checkbox" name="hobby" id="" value="swim">도서관2
<input type="checkbox" name="hobby" id="" value="dance">도서관3
<input type="checkbox" name="hobby" id="" value="dance">도서관4
<input type="checkbox" name="hobby" id="" value="dance">도서관5
</tr>
<tr>
<td>관련제목</td>
<td colspan="7"> <select name="byear" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option></td>
</tr>
<tr>
<td>설명</td>
<td colspan="7"><p><label for=""></label>
<textarea name="greet" id="" cols="30" rows="10"></textarea>
</td>
</tr>
</body>
</html>
결과
하하 재밌다
