form 태그
form 태그 안에 값을 입력 받아서 서버 url로 전송한다.
form 태그 속성
- action = "정보를 보낼 주소"
input 태그
열린 태그이며 값을 입력 받기 위한 태그이다.
input 태그 속성
-
type = "text" - 텍스트를 입력 받는다.
type = "password" - 텍스트를 입력 받는데 점으로 표시된다.
type = "checkbox" - 다중선택이 가능한 체크박스가 생성된다.
type = "radio" - 단일선택이 가능한 라디오체크가 생성된다.
type = "submit" - 제출 버튼으로 서버로 값을 보낸다. -
name = "name" - 입력한 값의 이름을 설정한다.
-
value = "value" - 입력 창의 입력 기본 값을 설정한다.
-
checked - 체크박스나 라디오버튼 이용시 기본 선택 값을 설정한다.
textarea 태그
- 여러 줄의 텍스트를 입력해야할 때 만들어준다.
- 태그 사이에 기본 입력 값을 넣을 수 있다.
textarea 태그 속성
- cols = "50" - 열의 크기
- rows = "5" - 행의 크기
select 태그
option 태그를 감싸주는 태그이다.
select 태그 속성
- name = "name" - 선택된 값의 이름을 설정한다.
- multiple - 다중선택이 가능하게 설정한다.
option 태그
태그 사이에 화면에 표시되는 값을 설정한다.
option 태그 속성
- value = "value" - 서버에 전송되는 값을 설정한다.
form 예시
Login 화면 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="http://localhost/login.php">
<p>아이디 : <input type="text" name = "id" value = "defalutvalue"></p>
<p>비밀번호 : <input type="password" name = "pw" value = "defalutvalue"></p>
<p>주소 : <input type="text" name = "address" value = "defalutvalue"></p>
<p><textarea cols ="50" rows = "5" name="message">dafault value</textarea>
<p><input type="submit"></p>
</form>
</body>
</html>
콤보박스 만들기
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
<form action = "http://localhost/color.php">
<select name="color" multiple>
<option value="red">붉은색</option>
<option value="blue">파란색</option>
<option value="yellow">노란색</option>
</select>
<input type="submit">
</form>
</body>
</html>
라디오버튼 만들기
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
<form action = "http://localhost/color.php">
<p>붉은색 : <input type="radio" name="color" value = "red"></p>
<p>파란색 : <input type="radio" name="color" value = "blue" checked></p>
<p>노란색 : <input type="radio" name="color" value = "yellow"></p>
<input type="submit">
</form>
</body>
</html>체크박스 만들기
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
<form action = "http://localhost/size.php">
<p>95 : <input type="checkbox" name="size" value = "95"></p>
<p>100 : <input type="checkbox" name="size" value = "100" checked></p>
<p>105 : <input type="checkbox" name="size" value = "105"></p>
<input type="submit">
</form>
</body>
</html>