HTML / Reference / form
개요
- form은 데이터를 입력 받고 전송할 때 사용하는 태그입니다.
- 입력 받은 값을 어디로 전송할지, 어떤 방식으로 전송할지 정합니다.
- <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>
HTML / Reference / input type="time"
개요 type이 time인 input은 시간을 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다. 아래 스크린샷은 크롬 기준입니다. 문법 <input type="time" value="xxx" min="yyy" max="zzz"> value : 선택 항목으로, 기본 시간을 정합니다. min : 선택 항목으로, 입력 가능한 가장 빠른 시간입니다. max : 선택 항목으로, 입력 가능한 가장 늦은 시간입니다. 예제 - 기본 양식 시간을 입력 받는, 선택 ...
개요 em 태그는 강조하는 텍스트에 사용합니다. 기본 모양은 기울임꼴입니다. strong 태그는 중요한 텍스트에 사용합니다. 기본 모양은 굵은 글자입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> body { font-size: 64px; } </style> </head> <body> <p>Lorem <em>Ipsum</em> <strong>Dolor</strong>.</p> </body> </html> b 태그는 글자를 굵게 만듭니다. 의미 부여 없이 굵게 만든다는 것이 strong과의 차이점입니다.
개요 video는 HTML 문서에 동영상을 삽입하는 태그입니다. HTML5에서 추가된 것이므로, HTML5를 지원하지 않는 웹브라우저(예를 들어 IE 8 이하)에서는 작동하지 않습니다. 문법 <video autoplay controls loop muted poster="aaa" preload="bbb"> <source src="xxx" type="yyy"> zzz </video> autoplay : 동영상을 자동으로 재생합니다. controls : 재생, 정지 등 조작 메뉴를 보여줍니다. loop : 동영상을 반복 재생합니다. poster : 동영상 재생 전에 ...
개요 q는 인용임을 나타내는 태그입니다. 인용임을 나타내는 태그에는 blockquote와 q가 있는데, blockquote는 블록 요소이고 q는 인라인 요소입니다. 문법 <q cite="xxx">...</q> 인용의 출처는 cite 속성으로 나타냅니다. cite 속성 입력은 선택 사항이고, 웹브라우저에서는 보이지 않습니다. 예제 q 요소의 기본 모양은 인용 문구를 큰 따옴표로 감싸는 것입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> ...
개요 noscript 태그 안의 내용은 스크립트를 지원하는 않는 웹브라우저나 스크립트를 실행하지 않도록 설정한 웹브라우저에서만 출력됩니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Tag | noscript</title> </head> <body> <script> document.write( '<h1>Your browser supports JavaScript</h1>'); ...
개요 HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식합니다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현됩니다. 만약 블록 요소 안에서 줄바꿈을 하고 싶다면 br 태그를 이용합니다. 예제 다음은 br 태그를 이용해서 줄바꿈을 한 예제입니다. 첫 번째 문단은 코드 상에서 줄바꿈을 했지만 웹브라우저에서는 띄어쓰기로 표현됩니다. 두 번째 ...
HTML / Reference / input type="date"
개요 type이 date인 input은 날짜를 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다. 문법 <input type="date" value="xxx" min="yyy" max="zzz"> value : 선택 항목으로, 기본 날짜를 정합니다. min : 선택 항목으로, 입력 가능한 가장 빠른 날짜입니다. max : 선택 항목으로, 입력 가능한 가장 늦은 날짜입니다. 예제 - 기본 양식 날짜를 입력 받는, 선택 항목이 없는 가장 ...
HTML / Reference / input type="range"
개요 type이 range인 input은 지정한 범위 내의 숫자를 선택할 수 있게 하는 양식입니다. 슬라이드로 값을 선택합니다. 문법 <input type="range" min="x" max="x" step="x" value="x"> min : 최솟값으로, 기본값은 0입니다. max : 최댓값으로, 기본값은 100입니다. step : 숫자들 사이의 간격으로, 기본값은 1입니다. value : 초깃값으로, min과 max의 평균입니다. 예제 Submit을 클릭하면 URL에서 값을 확인할 수 있습니다. 아래 상태 그대로 전송하면 URL 뒤에 ...
개요 pre 태그는 HTML에서 "preformatted text"를 정의하는 데 사용됩니다. 이 태그는 HTML 문서에서 텍스트를 작성한 그대로 표시하도록 하여, 공백과 줄바꿈을 유지하는 특징이 있습니다. 일반적으로 코드 블록, ASCII 아트, 또는 공백과 줄바꿈을 유지해야 하는 텍스트를 표시할 때 사용됩니다. 예제 HTML은 연속한 여러 개의 빈칸이나 탭, 줄바꿈을 하나의 빈칸으로 인식합니다. 예를 들어 다음 문서의 내용은 ...
개요 select는 선택할 수 있는 목록을 만들 때 사용합니다. 목록의 내용은 option 태그로 만듭니다. 문법 <select> <option>...</option> <option>...</option> <option>...</option> </select> 속성 select 태그에 사용하는 주요 속성은 다음과 같다. autofocus : 페이지가 로드되었을 때 해당 목록으로 바로 포커스가 맞춰집니다. disabled : 화면에는 보이지만 사용할 수 없도록 만듭니다. multiple : 여러 값을 선택할 수 있도록 합니다. name : 이름을 ...