2017 - 09 - 14 (목)
기본사항 정리
1 . Form element
<form action="index.html" method="post">
<!--action 값은 정보를 보낼 곳을 말하며 method는 전송 방식이다. 전송방식에는 POST와 GET이있다.-->
</form>
전송방식으로는 POST와 GET방식이 있다. 간단히 알아본 결과 GET 방식의 경우 URL뒤에 사이트의 정보 및 쿼리가 붙어 전송된다. POST의 경우 GET방식과 달리 BODY에 포함하고 URL뒤를 생략해서 보내는 방식이다.
<form action="index.html" method="post">
<input type="text" name="" value="">
<!--type은 어떤형식으로 보내는지를 정하는 속성이다. 위에서 보는 text value 이외에도 password, email등의 value가있다. name에는 <input>을 구별해주기 위함이다.-->
</form>
<form action="index.html" method="post">
<select class="" name="">
<option value="">1</option>
<option value="">2</option>
</select>
<textarea name="name" rows="8" cols="80"></textarea>
<button type="button" name="button"></button>
</form>
<!--select태그는 콤보박스를 만들어준다 Textarea태그는 나중에 게시판 만들 때 활용할 수 있을것으로 본다. Button 이벤트를 발생시키기 위해서 생성한다.-->
위의 속성 뿐만 아니라 input 태그에는 size, maxlength(최대길이), placeholder(입력예시),autofocus(focus를 가지게함),required(필수입력) 등이 있다.
2 .CSS Psuedo selector
a:link{} /*아직 방문하지 않은 링크*/
a:visited{} /*방문한 적이 있는 링크 */
a:hover{} /*사용자가 마우스를 올려놓은 링크 */
a:active{} /*클릭되었을 때의 링크 */
input:checked{} /*체크된 input element를 선택*/
input:disabled{} /*사용할수 없는 input element를 선택*/
p:empty{} /*children이 없는 p element를 모두 선택*/
a 태그의 경우 위에서 보이는 순서를 지켜서 사용해야한다.
3 .practice
form 태그를 활용하여 내일부터 학습할 jsp에 활용하기위한 로그인 페이지 및 회원가입 페이지 제작
로그인 화면
회원가입 화면