HTML / Reference / input type="hidden"
개요
양식은 보통 사용자가 입력한 값을 활용하기 위해 사용합니다. 하지만, 사용자가 입력하지 않아도 필요한 값이 있을 수 있습니다.
- 사용자가 접속한 IP
- 로그인한 상태에서의 계정 정보
- 게시물의 답글인 경우 게시물의 ID
이러한 값들은 type이 hidden인 input 태그로 만들어서 넘깁니다. 다른 type의 input과 마찬가지로 이름은 name, 값은 value로 정합니다.
문법
<input type="hidden" name="xxx" value="yyy">
예제
다음은 size의 값을 big으로 정하고 넘기는 간단한 예제입니다.
<!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>Color</p>
<label><input type="checkbox" name="color" value="blue"> Blue</label>
<label><input type="checkbox" name="color" value="red"> Red</label>
<input type="hidden" name="size" value="big">
<p><input type="submit" value="Submit"> <input type="reset" value="Reset"></p>
</form>
</body>
</html>
값을 받는 방식은 사용자가 입력한 값을 받는 방식과 동일합니다. 아래는 PHP로 값을 받아서 출력하는 코드입니다.
<?php
$color = $_POST['color'];
$size = $_POST['size'];
?>
<!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>
<p>Your color is <?php echo $color ?>.</p>
<p>Your size is <?php echo $size ?>.</p>
</body>
</html>
Blue에 체크하고 전송하면...
전송한 값과 함께 hidden 타입으로 넘어온 값도 출력합니다.
del과 ins 태그는 HTML에서 텍스트의 수정 이력을 표현하는 데 사용됩니다. del은 텍스트를 삭제했음을 나타냅니다. 취소선이 있는 게 기본 모양입니다. ins는 새로 추가되었음을 나타냅니다. 밑줄이 있는 게 기본 모양입니다.
HTML / Reference / figure, figcaption
figure는 사진, 이미지, 다이어그램 등을 감싸는 테그입니다. figcaption은 figure 요소에 캡션을 만듭니다. figure 요소의 자식 요소이며, 제일 처음 또는 제일 마지막에 위치합니다.
noscript 태그는 HTML 문서에서 JavaScript가 비활성화되어 있을 때 표시할 콘텐츠를 지정하는 데 사용됩니다. 사용자의 브라우저가 JavaScript를 지원하지 않거나, JavaScript가 비활성화되어 있는 경우에만 이 태그 내의 콘텐츠가 렌더링됩니다.
video는 HTML 문서에 동영상을 삽입하는 태그입니다. HTML5에서 추가된 것이므로, HTML5를 지원하지 않는 웹브라우저(예를 들어 IE 8 이하)에서는 작동하지 않습니다.
HTML / Reference / input type="checkbox"
checkbox는 여러 선택지를 제공하고, 사용자가 하나 또는 여러 개의 선택을 할 수 있게 하는 폼 요소입니다. input 태그의 type="checkbox" 속성을 사용하여 체크박스를 생성합니다.
address는 소유자 또는 작성자의 연락처를 나타내는 태그입니다. body 태그 안에 있으면 문서의 소유자 또는 작성자의 연락처를 나타냅니다. article 태그 안에 있으면 기사의 소유자 또는 작성자의 연락처를 나타냅니다. 기본 모양은 기울임꼴입니다.
form은 HTML에서 사용자 입력을 서버로 전송하는 양식을 정의할 때 사용됩니다. 입력 받은 값을 어디로 전송할지, 어떤 방식으로 전송할지 정합니다. form 태그 안에 input, select, textarea 등 양식이 들어갑니다.
select 태그는 드롭다운 목록을 생성하는 데 사용됩니다. 사용자는 이 드롭다운에서 하나 이상의 옵션을 선택할 수 있습니다. 드롭다운 목록의 내용은 option 태그로 만듭니다.
textarea는 여러 줄의 긴 문장을 입력할 수 있는 양식입니다. col 속성으로 가로 크기를, row 속성으로 세로 크기를 정할 수 있습니다. 하지만, 크기 등 모양은 CSS의 width, height로 정하는 게 좋습니다.
HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식합니다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현됩니다. 만약 블록 요소 안에서 줄바꿈을 하고 싶다면 br 태그를 이용합니다.