Notice
Recent Posts
Recent Comments
Link
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags
more
Archives
Today
Total
관리 메뉴

개발 일기

HTML 태그 활용해보기 3(feat. form태그와 hyperlink태그) 본문

HTML5

HTML 태그 활용해보기 3(feat. form태그와 hyperlink태그)

개발 일기 2021. 8. 3. 22:22

안녕하세요~

 

오늘은 HTML을 사용 할 때 가장 많이 사용되는 form태그와 hyperlink태그를 활용한 코딩을 해보겠습니다.

 

 

1. form

  - 요청 시 전송되는 데이타를 묶어주는 단위

  - form 안에 있는 데이타들은 요청시 같이 전송된다.

  - action:요청할 URL(서블릿URL)

  - method:요청방법 (get, post)

 

--예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>검색</h3><hr/>

 <form action = "search.naver" method="get">
 	검색 : <input name="query" type = "text" placeholder="검색어를 입력하세요.">
	 	<input type ="submit" value="검색">
 
</form>
</body>
</html>

 

--결과

 - 검색어 입력 후 [검색]버튼을 클릭 시 submit된다.

 - submit이 일어나면 search.naver로 get방식으로 action(이동)된다.

 

 

2. hyperlink

 - a 태그 : 다른 페이지로 이동할 때 사용하는 요소

 - href 속성 : 요청 url

 - target 속성 : target속성을 지정해서 어느 창에 보일지 선택 가능

 

--예시(절대경로)

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />	
	<title>hyperlink 요소 연습</title>
</head>
<body>
	
	<h3>
	[절대경로(uri)]--> http://,https:// 로시작하는경로
	</h3><hr>
	<ul>
		<li>======= 12.hyperlink.html 과 다른사이트에있는 리소스 ==================</li>
		<li><a href="https://www.naver.com/index.html">네이버</a></li>
		<li><a href="https://www.daum.net/index.html">다음</a></li>
		
		<li>======= 12.hyperlink.html 과 같은사이트(servletSite)에있는 리소스 =====</li>
		<li><a href='http://localhost/htmlSite/03.div.html'>03.div.html</a></li>
		<li><a href='http://localhost/htmlSite/04.p.html'>04.p.html</a></li>
		<li><a href='http://localhost/htmlSite/11.form.html'>[회원가입]</a></li>
	</ul>
</body>
</html>

 

 

--결과

 

 

--예시(상대경로)

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />	
	<title>hyperlink 요소 연습</title>
</head>
<body>
			
	<h3>
	[상대경로(uri)]--> http://으로 시작하지않는경로
	</h3><hr>
	<ul>
		<li>======= 12.hyperlink.html 과 같은사이트(htmlSite)에있는 리소스 =====</li>
		
		<li>기준경로:[http://localhost/htmlSite] 와 동일한 위치의 리소스</li>
		<li><a href='03.div.html'>03.div.html</a></li>
		<li><a href='04.p.html'>04.p.html</a></li>
		<li><a href='11.form.html'>[회원가입]</a></li>
		<li><a href='male.jpg'>male.jpg</a></li>
		<li><a href='female.gif'>female.gif</a></li>
		<li><a href='tomcat.gif'>tomcat.gif</a></li>
		
		<li>기준경로:[http://localhost/htmlSite] 의 하위에 위치의 리소스</li>
		<li><a href='images/penguin1.gif'>penguin1.gif</a></li>
		<li><a href='images/penguin2.gif'>penguin2.gif</a></li>
		
	</ul>
</body>
</html>

 

--결과

 

- 하이퍼링크를 설정 후 클릭 시 설정된 링크로 이동됨

 

 

form과 hyperlink 활용에 대해 정리해보았습니다.

감사합니다.

저작자표시

'HTML5' 카테고리의 다른 글

HTML 태그 활용해보기 2(feat. <list>, <table>, <span>, <iframe>)  (0) 2021.08.01
HTML 태그 활용해보기(feat. <title>, <body>, <div>, <p>, <pre>)  (0) 2021.07.30
HTML5란?? (feat. HTML5, CSS, Javascript)  (1) 2021.07.28
'HTML5' Related Articles more
Comments