Nuke Olaf - Log Store
HTML - <form> 태그 : 사용자에게 입력값을 받기 본문
form 태그의 form 이란, 종류, 방식, 서식 이라는 뜻이다.
사용자에게 "어떠한 입력값을 받는" 형식을 표현하고 싶을때,
즉 정보를 제출하기 위한 대화형 컨트롤을 포함해야 할 때, HTML 의 form 태그를 이용한다.
form 태그의 요소는 form 의 범위를 표시하며, 사용자의 입력을 위한 다양한 형식의 컨트롤 (입력필드, 버튼 등)로 구성된다. 이러한 사용자 입력을 통해 데이터를 수집하는 컨트롤들이 모여있는 곳을 폼이라고 생각하면 된다.
폼 요소는 블록 레벨 요소이며, 문서 전체를 폼으로 지정할 수도 있고, 한 문서 내에 여러개의 폼을 지정할 수도 있다.
* 블록레벨 요소와 인라인 요소 : https://developer.mozilla.org/ko/docs/Web/HTML/Block-level_elements
HTML 의 요소는 "블록레벨" 요소와 "인라인" 요소로 분류된다. 블록 레벨 요소는 부모요소의 전체공간을 차지하여 "블록"을 만든다. 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다.
HTML 5부터는 이러한 블록레벨과 인라인 요소 분류가 콘텐츠 카테고리 집합으로 대체되었다.
HTML 요소는 공통 특성을 공유하는 요소끼리 묶는 콘텐츠 카테고리 중 한 가지 이상에 속할 수 있다.
콘텐츠 카테고리의 유형은 세가지가 있다. https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content
- 메인 콘텐츠 카테고리 : 여러 요소가 공유하는 일반적인 콘텐츠 규칙
- 폼 관련 콘텐츠 카테고리 : 입력 폼 관련 요소가 공통으로 가지는 규칙
- 특정 콘텐츠 카테고리 : 소수의 요소만 공유하는 카테고리, 특정 문맥에서만 유효하기도 함
< form 태그의 속성 >
get 과 post 를 사용하기 위해 필수적인 속성만 정리함
<form> 태그의 action 속성은 실행 애플리케이션을 지정한다. 실행 애플리케이션이란, 입력된 데이터를 처리하는 서버 또는 프로그램을 말한다. 실행 애플리케이션으로 데이터를 보내려면, 브라우저가 전송 위치(url) 을 알아야 하며, 이를 명시하기 위해 action 속성을 사용한다.
<form> 태그의 method 속성은 HTTP 메서드를 지정한다. HTTP 메서드는 클라이언트와 서버 간 데이터를 주고받기 위한 방식을 의미한다. 주로 사용되는 방식은 GET 과 POST 방식이다.
<form> 태그의 name 속성은 폼 이름을 지정한다. 이 속성은 스크립트에서 폼을 참조할 때 필요하다.
<form> 태그의 target 속성 을 이용하면, 현재 창에서 페이지를 열것인지, 별도의 창에서 페이지를 열 것인지 지정할 수 있다. 기본값은 _self 이고, _blank 를 이용하면 별도의 창에서 열린다.
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML form Tag</title>
</head>
<body>
<form action = "/cgi-bin/hello_get.cgi" method = "get">
First name:
<input type = "text" name = "first_name" value = "" maxlength = "100" />
<br />
Last name:
<input type = "text" name = "last_name" value = "" maxlength = "100" />
<input type = "submit" value ="Submit" />
</form>
</body>
</html>
참고 사이트 >>>
https://www.geeksforgeeks.org/html-form-tag/
https://mainia.tistory.com/4246
'Language > [PHP]' 카테고리의 다른 글
| HTML5 - 블록 태그, 인라인 태그란? (1) | 2020.02.04 |
|---|---|
| PHP - file_put_contents 가 실행되지 않음 (0) | 2020.02.03 |
| CSS 분리할때, background-image url 주의할 점 (0) | 2020.02.03 |
| HTML 에서 CSS 와 JavaScript 분리하기 (1) | 2020.02.02 |
| HTML 문서내에서 Java Script 다루는 방법 (0) | 2020.01.29 |
