개발/HTML & CSS

[HTML] a 태그, form 태그, input 태그

뉴NEW 2022. 8. 26. 09:57

< a 태그 >

- 하이퍼링크를 거는 태그, anchor(닻)

- 텍스트 또는 멀티미디어에 링크를 걸어 페이지를 이동하도록 하는 태그

 

1. href 속성

- hyperlink reference

 

2. target 속성 _self, _blank 이 두가지 속성을 사용함

- _self: 기본값, 해당 페이지에서 이동하는 속성

- _blank: 새페이지 열어서 이동하는 속성

- _parent: 해당 페이지의 부모 프레임에서 이동하는 속성

- _top: 현재 윈도우 전체로 이동하는 속성

<a href="http://www.w3schools.com" target="_self">w3schools</a>
<a href="http://www.google.co.kr" target="_blank">Google</a>

 

3. a 태그가 설정된 텍스트의 스타일

- 기본 스타일 링크: 밑줄, 파란색

- 활성화된 링크: 밑줄, 보라색

- 활성화된 링크: 밑줄, 빨간색

 

< form 태그 >

- form 태그 입력한 데이터를 웹서버로 전달하는 태그

- input 태그를 포함하는 태그

  ex) 로그인, 회원가입 ...

- action 속성 : 데이터를 가지고 이동할 페이지를 지정

- method 속성 : 데이터의 이동 방식을 지정, (get 방식, post 방식)

   - get 방식: 입력한 데이터가 url에 노출하여 이동하는 방식, 보안에 취약(단점), 속도가 빠름(장점)

   - post 방식: 입력한 데이터를 url내부에 숨겨서 이동하는 방식, 보안에 유리(장점), 속도가 느림(단점)

 

< input 태그 >

- input 태그 데이터를 입력하는 태그

- type에 따라 많은 종류의 input 태그가 있음.

- type: text(사용多), password, number, tel, email, address, submit, reset ...

- submit: 전송 버튼, form의 action에 설정된 페이지로 이동하는 버튼

- reset: 취소 버튼, form 안의 입력 태그의 입력 내용을 삭제

 
<body>
 <h2>성적 입력 및 조회</h2>
 <form action="semantic01.html" method="POST">
    전공(학과): <input type="text" name="major"><br>
    이름: <input type="text" name="name"><br>
    중간 성적: <input type="text" name="mid"><br>
    기말 성적: <input type="text" name="last"><br><br>
    <input type="submit" value="처리결과 조회">
    <input type="reset" value="입력 취소"> 
 </form>
</body>

저작자표시 (새창열림)