[ HTML ] <form>, <input>, <button> 태그

환경 : Spring Tools Suite4

 

 

 

<Form>

• 사용자가 입력한 정보(데이터)를 특정 위치로 전송하는 태그
• action 속성으로 제출할 대상을 설정할 수 있다.
• 페이지에 보이지 않음

<form action="전송위치" method="전송방식">
    <!-- 각종 입력창 -->
    <input type="submit">
</form>

 

<input>

• 웹에서 사용할 수 있는 입력을 위한 도구
• name 속성으로 파라미터의 이름을 설정할 수 있음 (값에 부여될 식별자를 설정)
• type 속성으로 입력창의 형태를 결정할 수 있음 (기본값 : text)

<input> 태그에 대해 더 자세히는 따로 다루겠습니다.

 

<button>

• 웹에서 입력된 값을 전송시키는 도구

 

---

[ 사용 예 ]

 

  - HtmlController.java

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/form")
public class FormController {
	
	@RequestMapping("/test1")
	public String test1() {
		return "/WEB-INF/views/form/test1.jsp";
	}
}

 

 

  - form.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<h1>폼 예제</h1>

<h2>지니 검색</h2>
<form action="https://www.genie.co.kr/search/searchMain">
	<input name="query">
	<button>검색</button>
</form>

<h2>멜론 검색</h2>
<form action="https://www.melon.com/search/total/index.htm">
	<input name = "q">
	<button>검색</button>
</form>

<h2>네이버 검색</h2>
<form action="https://search.naver.com/search.naver">
	<input name="query">
	<button>검색</button>
</form>

<h2>구글 검색</h2>
<form action="https://www.google.com/search">
	<input name="q">
	<button>검색</button>
</form>

 

  - 출력 결과

출력결과

 

   - 네이버 검색 해보기

확인해보기

 

 

 

 

개인 공부 기록용입니다:)