HTML / Reference / form
개요
- form은 HTML에서 사용자 입력을 서버로 전송하는 양식을 정의할 때 사용됩니다.
- 입력 받은 값을 어디로 전송할지, 어떤 방식으로 전송할지 정합니다.
- <form>과 </form> 사이에 input, select, textarea 등 양식이 들어갑니다.
문법
<form method="xxx" action="yyy"> ... </form>
- method : 값을 전송하는 방법으로 get 또는 post를 입력합니다.
- action : 값을 전달할 페이지를 입력합니다. 입력하지 않으면 현재 페이지로 전송합니다.
form 안에 form을 넣으면 제대로 작동하지 않습니다.
예제 - GET 방식으로 값 전달
get 방식으로 값을 전달하는 간단한 양식입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
* {
font-size: 16px;
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<form method="get" action="form-action.php">
<p><label>Input Color : <input type="text" name="color"></label></p>
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>
get 방식의 경우 URL에 전달하는 값이 표시됩니다.
예제 - POST 방식으로 값 전달
post 방식으로 값을 전달하면 URL에 값이 표시되지 않습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
* {
font-size: 16px;
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<form method="post" action="form-action.php">
<p><label>Input Color : <input type="text" name="color"></label></p>
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>
예제 - 전달 받은 값 사용하기
다음은 PHP로 값을 전달 받고 사용하는 간단한 예제입니다.
<?php
$color = $_POST['color'];
?>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
* {
font-size: 16px;
font-family: Consolas, sans-serif;
}
</style>
</head>
<body>
<h1>Submitted</h1>
<p>Your color is <?php echo $color ?>.</p>
</body>
</html>
q는 인용임을 나타내는 태그입니다. 인용임을 나타내는 태그에는 blockquote와 q가 있는데, blockquote는 블록 요소이고 q는 인라인 요소입니다.
address는 소유자 또는 작성자의 연락처를 나타내는 태그입니다. body 태그 안에 있으면 문서의 소유자 또는 작성자의 연락처를 나타냅니다. article 태그 안에 있으면 기사의 소유자 또는 작성자의 연락처를 나타냅니다. 기본 모양은 기울임꼴입니다.
blockquote는 인용임을 나타내는 태그입니다. 인용의 출처는 cite 속성으로 나타냅니다. cite 속성 입력은 선택 사항이고, 웹브라우저에서는 보이지 않습니다. blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다.
label은 폼의 양식에 이름 붙이는 태그입니다. 주요 속성은 for입니다. label의 for의 값과 양식의 id의 값이 같으면 연결됩니다. label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나, 체크를 하거나, 체크를 해제합니다.
HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식합니다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현됩니다. 만약 블록 요소 안에서 줄바꿈을 하고 싶다면 br 태그를 이용합니다.
HTML / Reference / input type="range"
type이 range인 input은 지정한 범위 내의 숫자를 선택할 수 있게 하는 양식입니다. 슬라이드로 값을 선택합니다.
HTML / Reference / input type="radio"
radio(라디오 버튼)는 사용자가 여러 개의 옵션 중 하나만 선택할 수 있게 하는 폼 요소입니다. input 태그의 type="radio" 속성을 사용하여 라디오 버튼을 생성합니다.
HTML / Reference / input type="time"
type이 time인 input은 시간을 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다.
HTML / Reference / input type="checkbox"
checkbox는 여러 선택지를 제공하고, 사용자가 하나 또는 여러 개의 선택을 할 수 있게 하는 폼 요소입니다. input 태그의 type="checkbox" 속성을 사용하여 체크박스를 생성합니다.
video는 HTML 문서에 동영상을 삽입하는 태그입니다. HTML5에서 추가된 것이므로, HTML5를 지원하지 않는 웹브라우저(예를 들어 IE 8 이하)에서는 작동하지 않습니다.