<form> 태그 1
1. 텍스트 입력
(1) 텍스트 필드
사용자로부터 텍스트 입력 받는다. 한줄 정도의 단문에 적당하고 긴 줄의 텍스트는 <textarea> 를 이용한다.
1) 문법
<input type="text" name="값의 이름" value="값" disabled="disabled" readonly="readonly" />
- type : text를 사용해야 텍스트 필드가 된다.
- name : 입력한 데이터의 이름
- value : 데이터의 값. 입력한 데이터의 기본 값으로 이 값이 기본적으로 텍스트 필드에 표시된다.
- disabled : 값으로 disabled을 지정하면 텍스트 필드가 불능 상태가 된다. 서버로 전송해도 이 속성이 설정된 컨트롤의 데이터는 서버로 전송되지 않는다.
- readonly : 값으로 readonly를 지정하면 텍스트 필드에 값이 입력되지 않는다. 서버로는 데이터가 전송된다.
2) 예제
example1.html
<!DOCTYPE html>
<html>
<head>
<title>생활코딩</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<form action="url" method="GET">
닉네임 :
<input type="text" name="nickname" />
<br />
<input type="submit" />
</form>
</body>
</html>
(2) 비밀번호
보안이 중시되는 데이터의 입력을 받는다.
1) 예제
example2.html
<!DOCTYPE html>
<html>
<head>
<title>생활코딩</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<form action="url" method="GET">
비밀번호 :
<input type="password" name="password" />
<br />
<input type="submit" />
</form>
</body>
</html>
(3) hidden data
화면상에 표시되지 않는 컨트롤을 생성한다. 서버로 전달할 데이터이지만 사용자에게는 노출될 필요가 없는 데이터인 경우 사용한다.
사용자가 지정하지 않은 정보의 데이터를 전송하기 위함.
1) 예제
example3.html
<html>
<head>
<title>생활코딩</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<form action="url" method="GET">
이름 :
<input type="text" name="name" />
<input type="hidden" name="language" />
<br />
<input type="submit" />
</form>
</body>
</html>
(4) textarea
여러줄의 텍스트 입력 할 때 사용한다. (text: 한 줄)
1) 문법
<textarea name="값의 이름" rows="행의 수" cols="열의 수" disabled="disabled" readonly="readonly">값</textarea>
rows : 입력한 행위 수 만큼 높이가 정해진다. ex.) 10행
cols : 입력한 열의 수 만큼 폭이 정해진다. ex.) 한 줄에 10글자
2) 예제
example4.html
<!DOCTYPE html>
<html>
<head>
<title>생활코딩</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<form action="url" method="GET">
내용 : <br />
<textarea rows="5" cols="20"></textarea> <br />
<input type="submit" />
</form>
</body>
</html>
2. 선택
(1) 라디오 버튼
여러개의 항목 중에서 하나만을 선택 할 수 있도록 제한하는 컨트롤
1) 문법
<input type="radio" name="값의 이름" value="값" checked="checked">
- name이라는 속성의 값은 같은 값을 사용하고 있어야 한다.
- value라는 속성의 값은 다른 값을 사용하고 있어야 한다.
2) 예제
example1.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<form action="example_receive_single.php" method="POST">
관심사 : <br />
<input type="radio" name="interest" value="programming" checked="checked" /> 프로그래밍<br />
<input type="radio" name="interest" value="design" /> 디자인<br />
<input type="radio" name="interest" value="planning" /> 기획<br />
<input type="submit" />
</form>
</body>
</html>
example_receive_single.php - 사용자가 전송한 데이터를 서버 쪽에서 처리한다.
<html>
<body>
당신의 관심사는? <?=$_POST['interest']?>
</body>
</html>
(2) 콤보박스
여러개의 항목 중에서 원하는 것을 하나만 선택하는 컨트롤로 흔히 콤보박스라고 부른다. --> 공간의 효율성 높인다.
1) 문법
<select name="값의 이름" multiple="multiple">
<option value="선택될 경우 name의 값이 됨" selected="selected">값에 대한 표시값</option>
...option 반복
</select>
- multiple : 이 속성의 값을 mulitple로 지정하면 여러개의 항목을 선택할 수 있는 컨트롤이 된다. --> 복수 선택 방법(ctrl+항목지정)
2) 예제
example2.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<form action="example_receive_single.php" method="POST">
관심사 : <br />
<select name="interest">
<option value="programming">프로그래밍</option>
<option value="design" selected="selected">디자인</option>
<option value="planning">기획</option>
</select>
<input type="submit" />
</form>
</body>
</html>
(3) 체크 박스
여러개의 항목 중에서 원하는 것을 복수로 선택할 수 있게 하는 컨트롤로 체크박스라고 부른다.
1) 문법
<input type="checkbox" name="값의 이름" value="값" />
- checkbox는 여러개의 값을 같은 이름으로 전송해야 하기 때문에 연관된 항목들의 name 값을 같은 이름으로 지정한다.
- name의 이름 끝에 '[]'를 붙이면 서버 쪽에서 실행되는 언어가 이 값을 배열로 인지한다.
2) 예제
example3.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<form action="example_receive_multi.php" method="POST">
관심사 : <br />
<input type="checkbox" name="interest[]" value="programming" /> 프로그래밍<br />
<input type="checkbox" name="interest[]" value="design" /> 디자인<br />
<input type="checkbox" name="interest[]" value="planning" checked="checked" /> 기획<br />
<input type="submit" />
</form>
</body>
</html>
example_receive_multi.php
<html>
<body>
당신의 관심사는? <br />
<ul>
<?php
foreach($_POST['interest'] as $entry){
echo "<li>$entry</li>";
}
?>
</ul>
</body>
</html>
'WebFont-end > HTML5' 카테고리의 다른 글
| [HTML5] <form> 태그_GET과 POST (0) | 2014.12.21 |
|---|---|
| [HTML5] <form> 태그 2 (0) | 2014.12.20 |
| [HTML5] 아이프레임과 프레임 (0) | 2014.12.20 |
| [HTML5] <meta> 태그 (0) | 2014.12.20 |
| [HTML5] 이스케이핑 (0) | 2014.12.20 |